Jsoneditor Example

├── .npmignore ├── index.js ├── examples ├── demo.gif ├── index.html └── index.js ├── src ├── middleware │ └── propsChange.js ├── reducers │ └── index.js ├── components │ ├── App.js │ ├── BaseItem.js │ ├── ObjectItem.js │ ├── jsoneditor.css │ └── img │ │ └── jsoneditor-icons.svg ├── actions │ └── index.js ├── app.js ├── containers │ └── Node.js └── util │ └── index.js ├── .gitignore ├── webpack.config.js ├── README.md └── package.json /.npmignore: -------------------------------------------------------------------------------- 1 | .git/ 2 | .vscode/ 3 | node_modules/ -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // main 2 | module.exports = require('./build/app'); -------------------------------------------------------------------------------- /examples/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yixianle/react-jsoneditor/HEAD/examples/demo.gif -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jsoneditor Example 7 | 8 | 9 |

10 | 11 | 12 | -------------------------------------------------------------------------------- /src/middleware/propsChange.js: -------------------------------------------------------------------------------- 1 | import {convertTreeJson} from "../util" 2 | 3 | // 4 | export default changeVal => store => next => action =>{ 5 | // console.log(convertTreeJson(store.getState()),"---propsChange begin--") 6 | next(action) 7 | // console.log(convertTreeJson(store.getState()),"---propsChange end--") 8 | changeVal(convertTreeJson(store.getState())) 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | *.iml 3 | .idea/ 4 | .vscode/ 5 | .ipr 6 | .iws 7 | *~ 8 | ~* 9 | *.diff 10 | *.patch 11 | *.bak 12 | *.bat 13 | .DS_Store 14 | Thumbs.db 15 | .svn/ 16 | *.swp 17 | .nojekyll 18 | .project 19 | .settings/ 20 | node_modules/ 21 | 22 | # production 23 | build/ 24 | 25 | # misc 26 | .DS_Store 27 | npm-debug.log 28 | -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | 2 | import { UPDATE_VAL, CREATE_NODE, DELETE_NODE, ADD_CHILD, REMOVE_CHILD } from '../actions' 3 | 4 | const initialState = {} 5 | 6 | export default (state = initialState, action) => { 7 | // console.log(state,action,"----reducers update_val----") 8 | const { type, id, val } = action 9 | switch (type) { 10 | case UPDATE_VAL: 11 | if(id && state[id]){ 12 | return { 13 | ...state, 14 | [id]:Object.assign({},state[id],{val:val}) 15 | } 16 | } 17 | return state 18 | default: 19 | return state 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React , {Component} from 'react' 2 | 3 | import Node from '../containers/Node'; 4 | 5 | export default class App extends Component { 6 | render() { 7 | const { json } = this.props 8 | 9 | return

10 |

11 |

12 | 13 | 14 | 15 | 18 | 19 | 20 |

16 | 17 |

21 |

22 |

23 |

24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/actions/index.js: -------------------------------------------------------------------------------- 1 | export const UPDATE_VAL = 'CHANGE_VAL' 2 | export const CREATE_NODE = 'CREATE_NODE' 3 | export const DELETE_NODE = 'DELETE_NODE' 4 | export const ADD_CHILD = 'ADD_CHILD' 5 | export const REMOVE_CHILD = 'REMOVE_CHILD' 6 | 7 | export const updateVal = (id, val, propsChange) => ({ 8 | type: UPDATE_VAL, 9 | id, 10 | val, 11 | propsChange 12 | }) 13 | 14 | let nextId = 0 15 | export const createNode = () => ({ 16 | type: CREATE_NODE, 17 | nodeId: `new_${nextId++}` 18 | }) 19 | 20 | export const deleteNode = (nodeId) => ({ 21 | type: DELETE_NODE, 22 | nodeId 23 | }) 24 | 25 | export const addChild = (nodeId, childId) => ({ 26 | type: ADD_CHILD, 27 | nodeId, 28 | childId 29 | }) 30 | 31 | export const removeChild = (nodeId, childId) => ({ 32 | type: REMOVE_CHILD, 33 | nodeId, 34 | childId 35 | }) 36 | -------------------------------------------------------------------------------- /examples/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | 5 | import JsonEdit from "../src/app.js" 6 | 7 | function changeVal(val){ 8 | console.log(val,"-----changeVal------") 9 | } 10 | 11 | const json = { 12 | "array1": ["aaaaaaaaaaaaaaaaa", 1, {a:1}], 13 | "array2": [], 14 | "boolean": true, 15 | "null1": null, 16 | "null2": "", 17 | "null3": 0, 18 | "number": 1234, 19 | "object1": {"a": "b", "c": "d"}, 20 | "string1": "Hello World", 21 | "one": { 22 | "two": { 23 | "three":[{ 24 | "array1":{ 25 | "array2":{ 26 | "array3":5555 27 | } 28 | } 29 | }] 30 | } 31 | } 32 | }; 33 | 34 | render( 35 | , 36 | document.getElementById('root') 37 | ) 38 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import React,{Component} from 'react' 2 | import { render } from 'react-dom' 3 | import { createStore, applyMiddleware } from 'redux' 4 | import { Provider } from 'react-redux' 5 | 6 | import App from "./components/App" 7 | import reducer from "./reducers" 8 | import propsChange from "./middleware/propsChange" 9 | import {convertLevelJson,convertTreeJson} from "./util" 10 | 11 | import "./components/jsoneditor.css" 12 | 13 | export default class JsonEdit extends Component { 14 | componentWillMount(){ 15 | //const levelJson = convertLevelJson(this.props.json) 16 | //console.log(convertTreeJson(json),66) 17 | 18 | this.store = createStore( 19 | reducer, 20 | convertLevelJson(this.props.json), 21 | applyMiddleware(propsChange(this.props.changeVal)) 22 | ) 23 | } 24 | render() { 25 | return 26 | 27 | 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | 3 | module.exports = { 4 | entry: { 5 | app: './src/app.js' 6 | //,demo:'./examples/index.js' 7 | }, 8 | output: { 9 | path: 'build', 10 | filename: '[name].js' 11 | }, 12 | module: { 13 | loaders: [{ 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | loader: 'babel-loader', 17 | query: { 18 | presets: ['es2015','stage-0','react'] 19 | } 20 | }, 21 | { 22 | test: /\.css$/, 23 | loaders: ['style', 'css'] 24 | }, 25 | { 26 | test: /\.(jpe?g|png|gif|svg)$/i, 27 | loaders: [ 28 | 'url?limit=10000&name=img/[hash:8].[name].[ext]', // 图片小于8k就转化为 base64, 或者单独作为文件 29 | 'image-webpack' // 图片压缩 30 | ] 31 | }] 32 | }, 33 | plugins: [new HtmlWebpackPlugin({ 34 | filename: 'index.html', 35 | template: './examples/index.html', 36 | chunks: ['demo'], 37 | inject: 'body' 38 | })] 39 | }; 40 | -------------------------------------------------------------------------------- /src/containers/Node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by lele on 16/12/24. 3 | */ 4 | 5 | import React, { Component } from 'react' 6 | import { connect } from 'react-redux' 7 | 8 | import ObjectItem from '../components/ObjectItem' 9 | import BaseItem from '../components/BaseItem' 10 | import { updateVal } from '../actions' 11 | 12 | import {convertLevelJson,convertTreeJson} from "../util" 13 | 14 | // 15 | class Node extends Component { 16 | render() { 17 | const { keyName, val, type, length, childIds } = this.props 18 | 19 | let element; 20 | if(type==="array"||type==="object"){ 21 | element = 22 | }else{ 23 | element = 24 | } 25 | return

26 | {element} 27 |

28 | } 29 | } 30 | 31 | const mapDispatchToProps = dispatch => 32 | ({ 33 | changeVal: (id, val)=>{ 34 | dispatch(updateVal(id, val)) 35 | } 36 | }) 37 | 38 | const mapStateToProps = (state,ownProps) => { 39 | const {id} = ownProps 40 | return { 41 | ...state[id], 42 | id 43 | } 44 | } 45 | export default connect(mapStateToProps,mapDispatchToProps)(Node) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jsoneditor 2 | A react based tool to view, edit,and format JSON 3 | 4 | ## DEMO 5 | http://jsoneditor.hotcn.top/ 6 | 7 | google translate

8 | 9 | ## Npm Module 10 | 11 | ### Install 12 | ``` 13 | $ npm install react-jsoneditor 14 | ``` 15 | 16 | ## Example 17 | 18 | ```javascript 19 | import JsonEdit from 'react-jsoneditor' 20 | 21 | function changeVal(val){ 22 | console.log(val,"-----changeVal------") 23 | } 24 | 25 | const json = { 26 | "array1": ["aaaaaaaaaaaaaaaaa", 1, {a:1}], 27 | "array2": [], 28 | "boolean": true, 29 | "null1": null, 30 | "null2": "", 31 | "null3": 0, 32 | "number": 1234, 33 | "object1": {"a": "b", "c": "d"}, 34 | "string1": "Hello World", 35 | "one": { 36 | "two": { 37 | "three":[{ 38 | "array1":{ 39 | "array2":{ 40 | "array3":5555 41 | } 42 | } 43 | }] 44 | } 45 | } 46 | }; 47 | 48 | render( 49 | , 50 | document.getElementById('root') 51 | ) 52 | ``` 53 | -------------------------------------------------------------------------------- /src/components/BaseItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by lele on 16/12/24. 3 | */ 4 | 5 | import React, { Component } from 'react' 6 | import classnames from 'classnames' 7 | 8 | 9 | export default class ObjectItem extends Component { 10 | handleBlur = (key,e) => { 11 | const { id, type, changeVal } = this.props 12 | 13 | let val = e.target.innerHTML 14 | if(type==="number"){ 15 | val = isNaN(val-0)?val:(val-0) 16 | }else if(type==="boolean"){ 17 | val = val==="true"?true:(val==="false"?false:val) 18 | }else if(type==="null"){ 19 | val = val==="null"?null:val 20 | } 21 | changeVal(id, val) 22 | } 23 | 24 | render(){ 25 | const { keyName, val, type, changeVal } = this.props 26 | 27 | return

28 |

29 | 30 |

31 |

32 |

{keyName}

33 |

34 |

35 |

36 |

39 | {val===null?"null":val.toString()} 40 |

41 |

42 |

; 43 | } 44 | } -------------------------------------------------------------------------------- /src/components/ObjectItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by lele on 16/12/24. 3 | */ 4 | 5 | import React, { Component } from 'react' 6 | import classnames from 'classnames' 7 | import Node from '../containers/Node' 8 | 9 | 10 | export default class ObjectItem extends Component { 11 | state = { 12 | foldNode: true 13 | } 14 | 15 | //展开折叠子节点 16 | handleToggleFold = () => { 17 | 18 | this.setState({ 19 | foldNode: !this.state.foldNode 20 | }) 21 | } 22 | render(){ 23 | const { keyName, type, length, childIds } = this.props 24 | 25 | return

26 |

27 | 32 |

33 |

34 |

{keyName}

35 |

36 |

37 |

38 |

39 | {type==='array'?'['+length+']':'{'+length+'}'} 40 |

41 |

42 | {this.state.foldNode?

43 | {childIds.map(id=>())} 44 |

:null} 45 | 46 |

; 47 | } 48 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-jsoneditor", 3 | "version": "0.2.19", 4 | "description": "Json editor of react version", 5 | "main": "index.js", 6 | "dependencies": { 7 | "classnames": "^2.2.5", 8 | "react": "^15.5.4", 9 | "react-dom": "^15.5.4", 10 | "react-redux": "^5.0.5", 11 | "redux": "^3.6.0", 12 | "type-of": "^2.0.1" 13 | }, 14 | "devDependencies": { 15 | "babel-cli": "^6.23.0", 16 | "babel-core": "^6.23.1", 17 | "babel-loader": "^6.3.2", 18 | "babel-preset-es2015": "^6.22.0", 19 | "babel-preset-react": "^6.23.0", 20 | "babel-preset-stage-0": "^6.22.0", 21 | "css-loader": "^0.26.2", 22 | "file-loader": "^0.10.1", 23 | "html-webpack-plugin": "^2.28.0", 24 | "image-webpack-loader": "^3.2.0", 25 | "style-loader": "^0.13.2", 26 | "url-loader": "^0.5.8", 27 | "webpack": "^1.13.2" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start -d", 31 | "build": "NODE_ENV=production webpack --config webpack.config.js", 32 | "test": "echo \"Error: no test specified\" && exit 1" 33 | }, 34 | "repository": { 35 | "type": "git", 36 | "url": "git+https://github.com/yixianle/react-jsoneditor.git" 37 | }, 38 | "keywords": [ 39 | "json", 40 | "editor", 41 | "react", 42 | "redux", 43 | "view", 44 | "format" 45 | ], 46 | "author": "lele", 47 | "license": "ISC", 48 | "bugs": { 49 | "url": "https://github.com/yixianle/react-jsoneditor/issues" 50 | }, 51 | "homepage": "https://github.com/yixianle/react-jsoneditor#readme" 52 | } 53 | -------------------------------------------------------------------------------- /src/util/index.js: -------------------------------------------------------------------------------- 1 | import type from 'type-of' 2 | 3 | // 存放平铺数据 4 | let levelJson={} 5 | // 标记平铺后对象的下标 6 | let levelIndex=-1 7 | 8 | // level data => tree json 9 | const toTree = (node)=>{ 10 | if(node.type!=="array"&&node.type!=="object"){ return } 11 | let json = node.type==="array"?[]:{} 12 | // 13 | if(node.childIds){ 14 | // 有子节点 15 | node.childIds.forEach((item,index)=>{ 16 | let childNode = levelJson[item] 17 | if(childNode.type==="array"||childNode.type==="object"){ 18 | json[childNode.keyName] = toTree(childNode) 19 | }else{ 20 | json[childNode.keyName] = childNode.val 21 | } 22 | }) 23 | } 24 | return json 25 | } 26 | 27 | // 28 | const smooth = (json,parentId)=>{ 29 | // 30 | let jsonMap = type(json)==="array"?json:Object.keys(json) 31 | jsonMap.map((item,index)=>{ 32 | let val = type(json)==="array"?item:json[item] 33 | let keyName = type(json)==="array"?index:item 34 | 35 | appendLevelJson(keyName,val,parentId) 36 | }) 37 | } 38 | 39 | // 将json的每一子项拼接到 levelJson 40 | const appendLevelJson=(keyName,val,parentId)=>{ 41 | levelIndex++ 42 | parentId!=undefined && levelJson[parentId].childIds.push(levelIndex) 43 | 44 | let itemType = type(val) 45 | if(itemType==="array" || itemType==="object"){ 46 | levelJson[levelIndex] = { 47 | type:itemType, 48 | keyName:keyName, 49 | length:itemType==="object"?Object.keys(val).length:val.length, 50 | childIds:[] 51 | } 52 | smooth(val,levelIndex) 53 | }else{ 54 | levelJson[levelIndex] = { 55 | type:itemType, 56 | keyName:keyName, 57 | val:val 58 | } 59 | } 60 | } 61 | 62 | // 树形数据转为平铺数据 63 | export function convertLevelJson(tree) { 64 | levelJson={} 65 | // 初始化根节点 66 | appendLevelJson("root",tree) 67 | // 树形结构转为平铺结构 68 | smooth(tree) 69 | 70 | return levelJson 71 | } 72 | 73 | // 平铺数据转为树形数据 74 | export function convertTreeJson(level){ 75 | levelJson = level||{} 76 | return levelJson[0] && toTree(levelJson[0]) 77 | } -------------------------------------------------------------------------------- /src/components/jsoneditor.css: -------------------------------------------------------------------------------- 1 | /* reset styling (prevent conflicts with bootstrap, materialize.css, etc.) */ 2 | 3 | div.jsoneditor input { 4 | height: auto; 5 | border: inherit; 6 | } 7 | 8 | div.jsoneditor input:focus { 9 | border: none !important; 10 | box-shadow: none !important; 11 | } 12 | 13 | div.jsoneditor table { 14 | border-collapse: collapse; 15 | width: auto; 16 | } 17 | 18 | div.jsoneditor td, 19 | div.jsoneditor th { 20 | padding: 0; 21 | display: table-cell; 22 | text-align: left; 23 | vertical-align: inherit; 24 | border-radius: inherit; 25 | } 26 | 27 | 28 | div.jsoneditor-field, 29 | div.jsoneditor-value, 30 | div.jsoneditor-readonly { 31 | border: 1px solid transparent; 32 | min-height: 16px; 33 | min-width: 32px; 34 | padding: 2px; 35 | margin: 1px; 36 | word-wrap: break-word; 37 | float: left; 38 | } 39 | 40 | /* adjust margin of p elements inside editable divs, needed for Opera, IE */ 41 | 42 | div.jsoneditor-field p, 43 | div.jsoneditor-value p { 44 | margin: 0; 45 | } 46 | 47 | div.jsoneditor-value { 48 | word-break: break-word; 49 | } 50 | 51 | div.jsoneditor-readonly { 52 | min-width: 16px; 53 | color: gray; 54 | } 55 | 56 | div.jsoneditor-empty { 57 | border-color: lightgray; 58 | border-style: dashed; 59 | border-radius: 2px; 60 | } 61 | 62 | div.jsoneditor-field.jsoneditor-empty::after, 63 | div.jsoneditor-value.jsoneditor-empty::after { 64 | pointer-events: none; 65 | color: lightgray; 66 | font-size: 8pt; 67 | } 68 | 69 | div.jsoneditor-field.jsoneditor-empty::after { 70 | content: "field"; 71 | } 72 | 73 | div.jsoneditor-value.jsoneditor-empty::after { 74 | content: "value"; 75 | } 76 | 77 | div.jsoneditor-value.jsoneditor-url, 78 | a.jsoneditor-value.jsoneditor-url { 79 | color: green; 80 | text-decoration: underline; 81 | } 82 | 83 | a.jsoneditor-value.jsoneditor-url { 84 | display: inline-block; 85 | padding: 2px; 86 | margin: 2px; 87 | } 88 | 89 | a.jsoneditor-value.jsoneditor-url:hover, 90 | a.jsoneditor-value.jsoneditor-url:focus { 91 | color: #ee422e; 92 | } 93 | 94 | div.jsoneditor td.jsoneditor-separator { 95 | padding: 3px 0; 96 | vertical-align: top; 97 | color: gray; 98 | } 99 | 100 | div.jsoneditor-field[contenteditable=true]:focus, 101 | div.jsoneditor-field[contenteditable=true]:hover, 102 | div.jsoneditor-value[contenteditable=true]:focus, 103 | div.jsoneditor-value[contenteditable=true]:hover, 104 | div.jsoneditor-read-write:focus, 105 | div.jsoneditor-read-write:hover, 106 | div.jsoneditor-field.jsoneditor-highlight, 107 | div.jsoneditor-value.jsoneditor-highlight { 108 | background-color: #FFFFAB; 109 | border: 1px solid yellow; 110 | border-radius: 2px; 111 | } 112 | 113 | div.jsoneditor-field.jsoneditor-highlight-active, 114 | div.jsoneditor-field.jsoneditor-highlight-active:focus, 115 | div.jsoneditor-field.jsoneditor-highlight-active:hover, 116 | div.jsoneditor-value.jsoneditor-highlight-active, 117 | div.jsoneditor-value.jsoneditor-highlight-active:focus, 118 | div.jsoneditor-value.jsoneditor-highlight-active:hover { 119 | background-color: #ffee00; 120 | border: 1px solid #ffc700; 121 | border-radius: 2px; 122 | } 123 | 124 | div.jsoneditor-value.jsoneditor-string { 125 | color: #008000; 126 | } 127 | 128 | div.jsoneditor-value.jsoneditor-object, 129 | div.jsoneditor-value.jsoneditor-array { 130 | min-width: 16px; 131 | color: #808080; 132 | } 133 | 134 | div.jsoneditor-value.jsoneditor-number { 135 | color: #ee422e; 136 | } 137 | 138 | div.jsoneditor-value.jsoneditor-boolean { 139 | color: #ff8c00; 140 | } 141 | 142 | div.jsoneditor-value.jsoneditor-null { 143 | color: #004ED0; 144 | } 145 | 146 | div.jsoneditor-value.jsoneditor-invalid { 147 | color: #000000; 148 | } 149 | 150 | div.jsoneditor-tree button { 151 | width: 24px; 152 | height: 24px; 153 | padding: 0; 154 | margin: 0; 155 | border: none; 156 | cursor: pointer; 157 | background: transparent url("img/jsoneditor-icons.svg"); 158 | } 159 | 160 | div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree, 161 | div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree { 162 | cursor: pointer; 163 | } 164 | 165 | div.jsoneditor-tree button.jsoneditor-collapsed { 166 | background-position: 0 -48px; 167 | } 168 | 169 | div.jsoneditor-tree button.jsoneditor-expanded { 170 | background-position: 0 -72px; 171 | } 172 | 173 | div.jsoneditor-tree button.jsoneditor-contextmenu { 174 | background-position: -48px -72px; 175 | } 176 | 177 | div.jsoneditor-tree button.jsoneditor-contextmenu:hover, 178 | div.jsoneditor-tree button.jsoneditor-contextmenu:focus, 179 | div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected, 180 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu { 181 | background-position: -48px -48px; 182 | } 183 | 184 | div.jsoneditor-tree *:focus { 185 | outline: none; 186 | } 187 | 188 | div.jsoneditor-tree button:focus { 189 | /* TODO: nice outline for buttons with focus 190 | outline: #97B0F8 solid 2px; 191 | box-shadow: 0 0 8px #97B0F8; 192 | */ 193 | background-color: #f5f5f5; 194 | outline: #e5e5e5 solid 1px; 195 | } 196 | 197 | div.jsoneditor-tree button.jsoneditor-invisible { 198 | visibility: hidden; 199 | background: none; 200 | } 201 | 202 | div.jsoneditor { 203 | color: #1A1A1A; 204 | border: 1px solid #3883fa; 205 | -moz-box-sizing: border-box; 206 | -webkit-box-sizing: border-box; 207 | box-sizing: border-box; 208 | width: 100%; 209 | height: 100%; 210 | overflow: hidden; 211 | position: relative; 212 | padding: 0; 213 | line-height: 100%; 214 | } 215 | 216 | div.jsoneditor-tree table.jsoneditor-tree { 217 | border-collapse: collapse; 218 | border-spacing: 0; 219 | width: 100%; 220 | margin: 0; 221 | } 222 | 223 | div.jsoneditor-outer { 224 | width: 100%; 225 | height: 100%; 226 | margin: -35px 0 0 0; 227 | padding: 35px 0 0 0; 228 | -moz-box-sizing: border-box; 229 | -webkit-box-sizing: border-box; 230 | box-sizing: border-box; 231 | } 232 | 233 | textarea.jsoneditor-text, 234 | .ace-jsoneditor { 235 | min-height: 150px; 236 | } 237 | 238 | div.jsoneditor-tree { 239 | width: 100%; 240 | height: 100%; 241 | position: relative; 242 | overflow: auto; 243 | } 244 | 245 | textarea.jsoneditor-text { 246 | width: 100%; 247 | height: 100%; 248 | margin: 0; 249 | -moz-box-sizing: border-box; 250 | -webkit-box-sizing: border-box; 251 | box-sizing: border-box; 252 | outline-width: 0; 253 | border: none; 254 | background-color: white; 255 | resize: none; 256 | } 257 | 258 | tr.jsoneditor-highlight, 259 | tr.jsoneditor-selected { 260 | background-color: #e6e6e6; 261 | } 262 | 263 | tr.jsoneditor-selected button.jsoneditor-dragarea, 264 | tr.jsoneditor-selected button.jsoneditor-contextmenu { 265 | visibility: hidden; 266 | } 267 | 268 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea, 269 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu { 270 | visibility: visible; 271 | } 272 | 273 | div.jsoneditor-tree button.jsoneditor-dragarea { 274 | background: url("img/jsoneditor-icons.svg") -72px -72px; 275 | cursor: move; 276 | } 277 | 278 | div.jsoneditor-tree button.jsoneditor-dragarea:hover, 279 | div.jsoneditor-tree button.jsoneditor-dragarea:focus, 280 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea { 281 | background-position: -72px -48px; 282 | } 283 | 284 | div.jsoneditor tr, 285 | div.jsoneditor th, 286 | div.jsoneditor td { 287 | padding: 0; 288 | margin: 0; 289 | } 290 | 291 | div.jsoneditor td { 292 | vertical-align: top; 293 | } 294 | 295 | div.jsoneditor td.jsoneditor-tree { 296 | vertical-align: top; 297 | } 298 | 299 | div.jsoneditor-field, 300 | div.jsoneditor-value, 301 | div.jsoneditor td, 302 | div.jsoneditor th, 303 | div.jsoneditor textarea, 304 | .jsoneditor-schema-error { 305 | font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif; 306 | font-size: 10pt; 307 | color: #1A1A1A; 308 | } 309 | 310 | /* popover */ 311 | 312 | .jsoneditor-schema-error { 313 | cursor: default; 314 | display: inline-block; 315 | /*font-family: arial, sans-serif;*/ 316 | height: 24px; 317 | line-height: 24px; 318 | position: relative; 319 | text-align: center; 320 | width: 24px; 321 | } 322 | 323 | div.jsoneditor-tree .jsoneditor-schema-error { 324 | width: 24px; 325 | height: 24px; 326 | padding: 0; 327 | margin: 0 4px 0 0; 328 | background: url("img/jsoneditor-icons.svg") -168px -48px; 329 | } 330 | 331 | .jsoneditor-schema-error .jsoneditor-popover { 332 | background-color: #4c4c4c; 333 | border-radius: 3px; 334 | box-shadow: 0 0 5px rgba(0,0,0,0.4); 335 | color: #fff; 336 | display: none; 337 | padding: 7px 10px; 338 | position: absolute; 339 | width: 200px; 340 | z-index: 4; 341 | } 342 | 343 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above { 344 | bottom: 32px; 345 | left: -98px; 346 | } 347 | 348 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below { 349 | top: 32px; 350 | left: -98px; 351 | } 352 | 353 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left { 354 | top: -7px; 355 | right: 32px; 356 | } 357 | 358 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right { 359 | top: -7px; 360 | left: 32px; 361 | } 362 | 363 | .jsoneditor-schema-error .jsoneditor-popover:before { 364 | border-right: 7px solid transparent; 365 | border-left: 7px solid transparent; 366 | content: ''; 367 | display: block; 368 | left: 50%; 369 | margin-left: -7px; 370 | position: absolute; 371 | } 372 | 373 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above:before { 374 | border-top: 7px solid #4c4c4c; 375 | bottom: -7px; 376 | } 377 | 378 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below:before { 379 | border-bottom: 7px solid #4c4c4c; 380 | top: -7px; 381 | } 382 | 383 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left:before { 384 | border-left: 7px solid #4c4c4c; 385 | border-top: 7px solid transparent; 386 | border-bottom: 7px solid transparent; 387 | content: ''; 388 | top: 19px; 389 | right: -14px; 390 | left: inherit; 391 | margin-left: inherit; 392 | margin-top: -7px; 393 | position: absolute; 394 | } 395 | 396 | .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right:before { 397 | border-right: 7px solid #4c4c4c; 398 | border-top: 7px solid transparent; 399 | border-bottom: 7px solid transparent; 400 | content: ''; 401 | top: 19px; 402 | left: -14px; 403 | margin-left: inherit; 404 | margin-top: -7px; 405 | position: absolute; 406 | } 407 | 408 | .jsoneditor-schema-error:hover .jsoneditor-popover, 409 | .jsoneditor-schema-error:focus .jsoneditor-popover { 410 | display: block; 411 | animation: fade-in .3s linear 1, move-up .3s linear 1; 412 | -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1; 413 | -moz-animation: fade-in .3s linear 1, move-up .3s linear 1; 414 | -ms-animation: fade-in .3s linear 1, move-up .3s linear 1; 415 | } 416 | 417 | @keyframes fade-in { 418 | from { 419 | opacity: 0; 420 | } 421 | 422 | to { 423 | opacity: 1; 424 | } 425 | } 426 | 427 | @-webkit-keyframes fade-in { 428 | from { 429 | opacity: 0; 430 | } 431 | 432 | to { 433 | opacity: 1; 434 | } 435 | } 436 | 437 | @-moz-keyframes fade-in { 438 | from { 439 | opacity: 0; 440 | } 441 | 442 | to { 443 | opacity: 1; 444 | } 445 | } 446 | 447 | @-ms-keyframes fade-in { 448 | from { 449 | opacity: 0; 450 | } 451 | 452 | to { 453 | opacity: 1; 454 | } 455 | } 456 | 457 | /*@-webkit-keyframes move-up {*/ 458 | 459 | /*from { bottom: 24px; }*/ 460 | 461 | /*to { bottom: 32px; }*/ 462 | 463 | /*}*/ 464 | 465 | /*@-moz-keyframes move-up {*/ 466 | 467 | /*from { bottom: 24px; }*/ 468 | 469 | /*to { bottom: 32px; }*/ 470 | 471 | /*}*/ 472 | 473 | /*@-ms-keyframes move-up {*/ 474 | 475 | /*from { bottom: 24px; }*/ 476 | 477 | /*to { bottom: 32px; }*/ 478 | 479 | /*}*/ 480 | 481 | /* JSON schema errors displayed at the bottom of the editor in mode text and code */ 482 | 483 | .jsoneditor .jsoneditor-text-errors { 484 | width: 100%; 485 | border-collapse: collapse; 486 | background-color: #ffef8b; 487 | border-top: 1px solid #ffd700; 488 | } 489 | 490 | .jsoneditor .jsoneditor-text-errors td { 491 | padding: 3px 6px; 492 | vertical-align: middle; 493 | } 494 | 495 | .jsoneditor-text-errors .jsoneditor-schema-error { 496 | border: none; 497 | width: 24px; 498 | height: 24px; 499 | padding: 0; 500 | margin: 0 4px 0 0; 501 | background: url("img/jsoneditor-icons.svg") -168px -48px; 502 | } 503 | /* ContextMenu - main menu */ 504 | 505 | div.jsoneditor-contextmenu-root { 506 | position: relative; 507 | width: 0; 508 | height: 0; 509 | } 510 | 511 | div.jsoneditor-contextmenu { 512 | position: absolute; 513 | box-sizing: content-box; 514 | z-index: 99999; 515 | } 516 | 517 | div.jsoneditor-contextmenu ul, 518 | div.jsoneditor-contextmenu li { 519 | box-sizing: content-box; 520 | } 521 | 522 | div.jsoneditor-contextmenu ul { 523 | position: relative; 524 | left: 0; 525 | top: 0; 526 | width: 124px; 527 | background: white; 528 | border: 1px solid #d3d3d3; 529 | box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); 530 | list-style: none; 531 | margin: 0; 532 | padding: 0; 533 | } 534 | 535 | div.jsoneditor-contextmenu ul li button { 536 | padding: 0; 537 | margin: 0; 538 | width: 124px; 539 | height: 24px; 540 | border: none; 541 | cursor: pointer; 542 | color: #4d4d4d; 543 | background: transparent; 544 | font-size: 10pt; 545 | font-family: arial, sans-serif; 546 | box-sizing: border-box; 547 | line-height: 26px; 548 | text-align: left; 549 | } 550 | 551 | /* Fix button padding in firefox */ 552 | 553 | div.jsoneditor-contextmenu ul li button::-moz-focus-inner { 554 | padding: 0; 555 | border: 0; 556 | } 557 | 558 | div.jsoneditor-contextmenu ul li button:hover, 559 | div.jsoneditor-contextmenu ul li button:focus { 560 | color: #1a1a1a; 561 | background-color: #f5f5f5; 562 | outline: none; 563 | } 564 | 565 | div.jsoneditor-contextmenu ul li button.jsoneditor-default { 566 | width: 92px; 567 | } 568 | 569 | div.jsoneditor-contextmenu ul li button.jsoneditor-expand { 570 | float: right; 571 | width: 32px; 572 | height: 24px; 573 | border-left: 1px solid #e5e5e5; 574 | } 575 | 576 | div.jsoneditor-contextmenu div.jsoneditor-icon { 577 | float: left; 578 | width: 24px; 579 | height: 24px; 580 | border: none; 581 | padding: 0; 582 | margin: 0; 583 | background-image: url("img/jsoneditor-icons.svg"); 584 | } 585 | 586 | div.jsoneditor-contextmenu ul li button div.jsoneditor-expand { 587 | float: right; 588 | width: 24px; 589 | height: 24px; 590 | padding: 0; 591 | margin: 0 4px 0 0; 592 | background: url("img/jsoneditor-icons.svg") 0 -72px; 593 | opacity: 0.4; 594 | } 595 | 596 | div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand, 597 | div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand, 598 | div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand, 599 | div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand, 600 | div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand { 601 | opacity: 1; 602 | } 603 | 604 | div.jsoneditor-contextmenu div.jsoneditor-separator { 605 | height: 0; 606 | border-top: 1px solid #e5e5e5; 607 | padding-top: 5px; 608 | margin-top: 5px; 609 | } 610 | 611 | div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon { 612 | background-position: -24px -24px; 613 | } 614 | 615 | div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon, 616 | div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon { 617 | background-position: -24px 0; 618 | } 619 | 620 | div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon { 621 | background-position: 0 -24px; 622 | } 623 | 624 | div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon, 625 | div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon { 626 | background-position: 0 0; 627 | } 628 | 629 | div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon { 630 | background-position: 0 -24px; 631 | } 632 | 633 | div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon, 634 | div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon { 635 | background-position: 0 0; 636 | } 637 | 638 | div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon { 639 | background-position: -48px -24px; 640 | } 641 | 642 | div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon, 643 | div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon { 644 | background-position: -48px 0; 645 | } 646 | 647 | div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon { 648 | background-position: -168px -24px; 649 | } 650 | 651 | div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon, 652 | div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon { 653 | background-position: -168px 0; 654 | } 655 | 656 | div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon { 657 | background-position: -192px -24px; 658 | } 659 | 660 | div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon, 661 | div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon { 662 | background-position: -192px 0; 663 | } 664 | 665 | /* ContextMenu - sub menu */ 666 | 667 | div.jsoneditor-contextmenu ul li button.jsoneditor-selected, 668 | div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover, 669 | div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus { 670 | color: white; 671 | background-color: #ee422e; 672 | } 673 | 674 | div.jsoneditor-contextmenu ul li { 675 | overflow: hidden; 676 | } 677 | 678 | div.jsoneditor-contextmenu ul li ul { 679 | display: none; 680 | position: relative; 681 | left: -10px; 682 | top: 0; 683 | border: none; 684 | box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5); 685 | padding: 0 10px; 686 | /* TODO: transition is not supported on IE8-9 */ 687 | -webkit-transition: all 0.3s ease-out; 688 | -moz-transition: all 0.3s ease-out; 689 | -o-transition: all 0.3s ease-out; 690 | transition: all 0.3s ease-out; 691 | } 692 | 693 | 694 | 695 | div.jsoneditor-contextmenu ul li ul li button { 696 | padding-left: 24px; 697 | animation: all ease-in-out 1s; 698 | } 699 | 700 | div.jsoneditor-contextmenu ul li ul li button:hover, 701 | div.jsoneditor-contextmenu ul li ul li button:focus { 702 | background-color: #f5f5f5; 703 | } 704 | 705 | div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon { 706 | background-position: -144px -24px; 707 | } 708 | 709 | div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon, 710 | div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon, 711 | div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected > div.jsoneditor-icon { 712 | background-position: -144px 0; 713 | } 714 | 715 | div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon { 716 | background-position: -120px -24px; 717 | } 718 | 719 | div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon, 720 | div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon, 721 | div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected > div.jsoneditor-icon { 722 | background-position: -120px 0; 723 | } 724 | 725 | div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon { 726 | background-position: -72px -24px; 727 | } 728 | 729 | div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon, 730 | div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon, 731 | div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected > div.jsoneditor-icon { 732 | background-position: -72px 0; 733 | } 734 | 735 | div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon { 736 | background-position: -96px -24px; 737 | } 738 | 739 | div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon, 740 | div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon, 741 | div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected > div.jsoneditor-icon { 742 | background-position: -96px 0; 743 | } 744 | 745 | div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon { 746 | background-image: none; 747 | width: 6px; 748 | } 749 | div.jsoneditor-menu { 750 | width: 100%; 751 | height: 35px; 752 | padding: 2px; 753 | margin: 0; 754 | -moz-box-sizing: border-box; 755 | -webkit-box-sizing: border-box; 756 | box-sizing: border-box; 757 | color: white; 758 | background-color: #3883fa; 759 | border-bottom: 1px solid #3883fa; 760 | } 761 | 762 | div.jsoneditor-menu > button, 763 | div.jsoneditor-menu > div.jsoneditor-modes > button { 764 | width: 26px; 765 | height: 26px; 766 | margin: 2px; 767 | padding: 0; 768 | border-radius: 2px; 769 | border: 1px solid transparent; 770 | background: transparent url("img/jsoneditor-icons.svg"); 771 | color: white; 772 | opacity: 0.8; 773 | font-family: arial, sans-serif; 774 | font-size: 10pt; 775 | float: left; 776 | } 777 | 778 | div.jsoneditor-menu > button:hover, 779 | div.jsoneditor-menu > div.jsoneditor-modes > button:hover { 780 | background-color: rgba(255,255,255,0.2); 781 | border: 1px solid rgba(255,255,255,0.4); 782 | } 783 | 784 | div.jsoneditor-menu > button:focus, 785 | div.jsoneditor-menu > button:active, 786 | div.jsoneditor-menu > div.jsoneditor-modes > button:focus, 787 | div.jsoneditor-menu > div.jsoneditor-modes > button:active { 788 | background-color: rgba(255,255,255,0.3); 789 | } 790 | 791 | div.jsoneditor-menu > button:disabled, 792 | div.jsoneditor-menu > div.jsoneditor-modes > button:disabled { 793 | opacity: 0.5; 794 | } 795 | 796 | div.jsoneditor-menu > button.jsoneditor-collapse-all { 797 | background-position: 0 -96px; 798 | } 799 | 800 | div.jsoneditor-menu > button.jsoneditor-expand-all { 801 | background-position: 0 -120px; 802 | } 803 | 804 | div.jsoneditor-menu > button.jsoneditor-undo { 805 | background-position: -24px -96px; 806 | } 807 | 808 | div.jsoneditor-menu > button.jsoneditor-undo:disabled { 809 | background-position: -24px -120px; 810 | } 811 | 812 | div.jsoneditor-menu > button.jsoneditor-redo { 813 | background-position: -48px -96px; 814 | } 815 | 816 | div.jsoneditor-menu > button.jsoneditor-redo:disabled { 817 | background-position: -48px -120px; 818 | } 819 | 820 | div.jsoneditor-menu > button.jsoneditor-compact { 821 | background-position: -72px -96px; 822 | } 823 | 824 | div.jsoneditor-menu > button.jsoneditor-format { 825 | background-position: -72px -120px; 826 | } 827 | 828 | div.jsoneditor-menu > div.jsoneditor-modes { 829 | display: inline-block; 830 | float: left; 831 | } 832 | 833 | div.jsoneditor-menu > div.jsoneditor-modes > button { 834 | background-image: none; 835 | width: auto; 836 | padding-left: 6px; 837 | padding-right: 6px; 838 | } 839 | 840 | div.jsoneditor-menu > button.jsoneditor-separator, 841 | div.jsoneditor-menu > div.jsoneditor-modes > button.jsoneditor-separator { 842 | margin-left: 10px; 843 | } 844 | 845 | div.jsoneditor-menu a { 846 | font-family: arial, sans-serif; 847 | font-size: 10pt; 848 | color: white; 849 | opacity: 0.8; 850 | vertical-align: middle; 851 | } 852 | 853 | div.jsoneditor-menu a:hover { 854 | opacity: 1; 855 | } 856 | 857 | div.jsoneditor-menu a.jsoneditor-poweredBy { 858 | font-size: 8pt; 859 | position: absolute; 860 | right: 0; 861 | top: 0; 862 | padding: 10px; 863 | } 864 | table.jsoneditor-search input, 865 | table.jsoneditor-search div.jsoneditor-results { 866 | font-family: arial, sans-serif; 867 | font-size: 10pt; 868 | color: #1A1A1A; 869 | background: transparent; 870 | /* For Firefox */ 871 | } 872 | 873 | table.jsoneditor-search div.jsoneditor-results { 874 | color: white; 875 | padding-right: 5px; 876 | line-height: 24px; 877 | } 878 | 879 | table.jsoneditor-search { 880 | position: absolute; 881 | right: 4px; 882 | top: 4px; 883 | border-collapse: collapse; 884 | border-spacing: 0; 885 | } 886 | 887 | table.jsoneditor-search div.jsoneditor-frame { 888 | border: 1px solid transparent; 889 | background-color: white; 890 | padding: 0 2px; 891 | margin: 0; 892 | } 893 | 894 | table.jsoneditor-search div.jsoneditor-frame table { 895 | border-collapse: collapse; 896 | } 897 | 898 | table.jsoneditor-search input { 899 | width: 120px; 900 | border: none; 901 | outline: none; 902 | margin: 1px; 903 | line-height: 20px; 904 | } 905 | 906 | table.jsoneditor-search button { 907 | width: 16px; 908 | height: 24px; 909 | padding: 0; 910 | margin: 0; 911 | border: none; 912 | background: url("img/jsoneditor-icons.svg"); 913 | vertical-align: top; 914 | } 915 | 916 | table.jsoneditor-search button:hover { 917 | background-color: transparent; 918 | } 919 | 920 | table.jsoneditor-search button.jsoneditor-refresh { 921 | width: 18px; 922 | background-position: -99px -73px; 923 | } 924 | 925 | table.jsoneditor-search button.jsoneditor-next { 926 | cursor: pointer; 927 | background-position: -124px -73px; 928 | } 929 | 930 | table.jsoneditor-search button.jsoneditor-next:hover { 931 | background-position: -124px -49px; 932 | } 933 | 934 | table.jsoneditor-search button.jsoneditor-previous { 935 | cursor: pointer; 936 | background-position: -148px -73px; 937 | margin-right: 2px; 938 | } 939 | 940 | table.jsoneditor-search button.jsoneditor-previous:hover { 941 | background-position: -148px -49px; 942 | } 943 | 944 | 945 | /*----- my style -----*/ 946 | div.jsoneditor-tree,div.jsoneditor-separator{ 947 | display: inline-block; 948 | width: initial; 949 | vertical-align: middle; 950 | } 951 | div.jsoneditor-tree-val{ 952 | vertical-align: text-top 953 | } 954 | .jsoneditor-hide { 955 | display: none!important; 956 | } 957 | div.jsoneditor{ 958 | border: dashed 2px #ccc; 959 | padding: 3px; 960 | background-color: #f7f7f7; 961 | } 962 | 963 | .jsoneditor-read-write{ 964 | user-modify: read-write-plaintext-only; 965 | -webkit-user-modify: read-write-plaintext-only; 966 | -moz-user-modify: read-write-plaintext-only; 967 | } -------------------------------------------------------------------------------- /src/components/img/jsoneditor-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 894 | --------------------------------------------------------------------------------