@wibetter/json-schema-editor v5.2.5

json-schema-editor

JSON数据可视化/JSONSchema，以表单的形式编辑 json schema，可用于在线设计组件的配置面板。

技术栈

React/Mobx/Ant Design

特点

1. 支持14种基础类型组件（input、boolean、 date、date-time、 time、 url、 textarea、number、color、radio、 checkboxes、select、cascader、input-image）
2. 支持12个特殊类型组件（object、array、json、datasource、dynamic-data、event、 codearea、htmlarea、text-editor(使用说明)、quantity、box-style、padding-margin）
3. 支持拖拽排序
4. 支持删除、复制、高级配置等功能
5. 支持复杂嵌套
6. 支持通过表达式进行配置联动
7. 支持源码模式切换（开启源码模式后可以开启编辑模式）

特别说明

JSONSchema仅用于生成结构化的json数据，需要配合JSONEditor（git地址）渲染其内容。

安装

npm install --save @wibetter/json-schema-editor

使用示例

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

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

    this.state = {
      jsonSchema: {},
    };
  }

  render() {
    const { jsonSchema } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-schema-box">
             <JSONSchemaEditor
                data={jsonSchema}
                onChange={(newJsonSchema) => {
                  this.setState({
                    jsonSchema: newJsonSchema,
                  });
                }}
             />
          </div>
        </div>
      </>
    );
  }
}

JSONSchema 可配置参数说明