5.2.6 • Published 8 months ago

@wibetter/json-editor v5.2.6

Weekly downloads
14
License
MIT
Repository
github
Last release
8 months ago

JSONEditor功能组件

JSON数据可视化/JSONEditor,可视化界面编辑json数据

使用场景

以表单的形式编辑 json 数据,可用于支持组件或页面可视化配置。

技术栈

React/Mobx/Ant Design

特点

  1. 弹性布局,提供大屏和小屏两种展示模式
  2. 支持字段联动
  3. 支持14种基础类型组件(input、boolean、 date、date-time、 time、 url、 textarea、number、color、radio、 checkboxes、select、cascader、input-image)
  4. 支持12个特殊类型组件(object、array、json、datasource、dynamic-data、event、 codearea、htmlarea、text-editor(使用说明)、quantity、box-style、padding-margin)
  5. 支持json转schema能力,当schemaData为空而jsonData不为空时,自动通过json转换一个对应的schemaData
  6. 支持通过表达式设置数据联动(支持两种数据域:全局数据域、当前局部数据域)
  7. 支持源码模式切换(开启源码模式后可以开启编辑模式)

安装

npm install --save @wibetter/json-editor

使用示例

import * as React from 'react';
import JSONEditor from '@wibetter/json-editor';
import '@wibetter/json-editor/lib/index.css';

class IndexDemo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      jsonSchema: {},
      jsonData: {},
      wideScreen: false,
    };
  }

  render() {
    const { jsonSchema, jsonData, wideScreen } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-editor-box">
            <JSONEditor
              wideScreen={wideScreen} // 宽屏和小屏的配置项
              jsonView={false} // 开启后展示当前json数据
              schemaData={jsonSchema}
              jsonData={jsonData}
              onChange={(newJsonData) => {
                this.setState({
                  jsonData: newJsonData
                });
              }}
            />
          </div>
        </div>
      </>
    );
  }
}

JSONEditor 可配置参数

nametypedefaultdesc
viewStylestringfold非必填,默认为fold(可折叠面板),可选:tabs:(tabs切换面板)
jsonViewbooleanfalse非必填,是否开启全局源码模式,默认不开启
wideScreenbooleanfalse非必填,宽屏模式/小屏模式, 默认是小屏模式
schemaDataobject{}非必填,json的结构数据,备注:schemaData为空而jsonData不为空时,会自动通过jsonData生产一份应的schemaData
jsonDataobject{}必填项,json的内容数据
onChangefunction() => {}jsonData内容变动时会触发onChange
5.2.6

8 months ago

5.2.5

8 months ago

5.2.3

8 months ago

5.2.2

8 months ago

5.2.1

8 months ago

5.1.28

8 months ago

5.1.27

9 months ago

5.1.26

9 months ago

5.1.25

9 months ago

5.1.23

9 months ago

5.1.22

9 months ago

5.1.21

9 months ago

5.1.20

9 months ago

5.1.19

9 months ago

5.1.18

9 months ago

5.1.17

9 months ago

5.1.16

9 months ago

5.1.13

9 months ago

5.1.9

9 months ago

5.1.8

9 months ago

5.1.12

9 months ago

5.1.11

9 months ago

5.1.10

9 months ago

5.0.28

10 months ago

5.0.29

10 months ago

5.1.7

9 months ago

5.1.6

9 months ago

5.1.5

9 months ago

5.1.3

9 months ago

5.1.2

9 months ago

5.1.1

10 months ago

5.1.0

10 months ago

5.0.20

10 months ago

5.0.21

10 months ago

5.0.23

10 months ago

5.0.25

10 months ago

5.0.26

10 months ago

5.0.17

10 months ago

5.0.18

10 months ago

5.0.19

10 months ago

5.0.9

10 months ago

5.0.8

10 months ago

5.0.7

10 months ago

5.0.10

10 months ago

5.0.16

10 months ago

5.0.6

10 months ago

5.0.5

10 months ago

5.0.4

10 months ago

5.0.3

10 months ago

5.0.1

1 year ago

5.0.0

1 year ago

3.5.11

4 years ago

3.5.10

4 years ago

3.5.7

4 years ago

3.5.9

4 years ago

3.5.8

4 years ago

3.5.6

4 years ago

3.5.5

4 years ago

3.3.79

4 years ago

3.3.71

4 years ago

3.3.72

4 years ago

3.3.73

4 years ago

3.3.75

4 years ago

3.3.76

4 years ago

3.3.77

4 years ago

3.3.78

4 years ago

3.3.70

4 years ago

3.3.80

4 years ago

3.3.68

5 years ago

3.3.69

5 years ago

3.5.3

4 years ago

3.5.2

4 years ago

3.5.1

4 years ago

3.3.66

5 years ago

3.3.67

5 years ago

3.3.65

5 years ago

3.3.63

5 years ago

3.3.62

5 years ago

3.3.61

5 years ago

3.3.59

5 years ago

3.3.60

5 years ago

3.3.58

5 years ago

3.3.57

5 years ago

3.3.55

5 years ago

3.3.56

5 years ago

3.3.53

5 years ago

3.3.52

5 years ago

3.3.51

5 years ago

3.3.50

5 years ago

3.3.40

5 years ago

3.3.41

5 years ago

3.3.39

5 years ago

3.3.38

5 years ago

3.3.36

5 years ago

3.3.32

5 years ago

3.3.33

5 years ago

3.3.26

5 years ago

3.3.27

5 years ago

3.3.25

5 years ago

3.3.23

5 years ago

3.3.22

5 years ago

3.3.18

5 years ago

3.3.19

5 years ago

3.2.62

5 years ago

3.2.61

5 years ago

3.2.63

5 years ago

3.2.65

5 years ago

3.2.51

5 years ago

3.3.20

5 years ago

3.3.21

5 years ago

3.3.13

5 years ago

3.3.15

5 years ago

3.3.16

5 years ago

3.3.11

5 years ago

3.3.12

5 years ago

3.3.10

5 years ago

3.3.9

5 years ago

3.3.8

5 years ago

3.3.7

5 years ago

3.3.6

5 years ago

3.3.5

5 years ago

3.2.2

5 years ago

3.2.19

5 years ago

3.2.18

5 years ago

3.2.17

5 years ago

3.2.16

5 years ago

3.2.13

5 years ago

3.2.15

5 years ago

3.2.12

5 years ago

3.2.11

5 years ago

3.2.10

5 years ago

3.2.9

5 years ago