@wibetter/json-schema-editor

json-schema-editor

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

技术栈

React/Mobx/Ant Design

特点

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

特别说明

SchemaEditor仅用于生成结构化的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 可配置参数说明

name	type	default	desc
data	object	{}	必填项，json schema（带结构的json数据）
onChange	function	() => {}	schemaData内容变动时会触发onChange

如何添加自定义类型？

从 v7.0.0 起，支持通过 SchemaDescriptor 描述文件注册自定义 Schema 类型。注册后，自定义类型会出现在类型选择下拉列表中，并在编辑区以自定义渲染器或通用渲染器呈现。

SchemaDescriptor 字段说明

字段	类型	必填	说明
type	string		类型唯一标识，与 JSONSchema 中的 type 字段对应
label	string		在类型选择下拉中展示的名称
isContainer	boolean		是否为容器类型（支持添加子元素）
defaultSchema	object		新建该类型时的初始 schema 数据
propsSchema	PropsSchema		高级配置面板的 schema，由 buildPropsSchema 构建
renderer	(props: any) => ReactNode		自定义渲染函数，不提供则降级使用通用渲染器
isFixed	boolean		元素是否固定（不可复制/拖拽/删除）
keyIsFixed	boolean		key 字段是否不可编辑
typeIsFixed	boolean		type 字段是否不可编辑
readOnly	boolean		是否只读（不可编辑）
hideOperaBtn	boolean		是否隐藏操作按钮（增删复制拖拽）

注册自定义类型 示例

以下示例展示如何注册一个 color-picker（颜色选择器）类型的自定义类型：

第一步：创建描述文件 colorPickerPlugin.ts

import JSONSchemaEditor, { registerSchema, buildPropsSchema } from '@wibetter/json-schema-editor';

// 定义 ColorPicker 类型描述文件
const colorPickerDescriptor = {
  type: 'color-picker',
  label: '颜色选择器',
  isContainer: false,

  // 新建该类型时的初始 schema
  defaultSchema: {
    type: 'color-picker',
    title: '颜色选择器'
  },

  // 高级配置面板的 schema（由 buildPropsSchema 构建，会自动合并通用配置项）
  propsSchema: buildPropsSchema(),
};

// 注册成 json-schema-editor 可用配置项
registerSchema(colorPickerDescriptor);

第二步：在入口文件中引入插件（确保注册在 JSONSchemaEditor 渲染前执行）

import './colorPickerPlugin'; // 引入即触发注册
import JSONSchemaEditor from '@wibetter/json-schema-editor';

button-group-select 类型说明

button-group-select 是按钮组单选类型，在 JSONEditor 中以按钮切换形式进行单击选中，交互体验类似 amis button-group-select。

schema 结构

button-group-select 的 schema 结构与 radio（单选）类型完全一致，支持 options 选项列表：

{
  "type": "button-group-select",
  "title": "布局方向",
  "options": [
    { "label": "水平", "value": "horizontal" },
    { "label": "垂直", "value": "vertical" },
    { "label": "自适应", "value": "auto" }
  ],
  "default": "horizontal",
  "description": "请选择布局方向"
}

高级配置项

配置项	类型	默认值	说明
vertical	boolean	false	垂直模式，开启后按钮组垂直方向排列
readOnly	boolean	false	只读模式
isRequired	boolean	false	是否必填
defaultActiveFirstOption	boolean	false	是否默认高亮第一个选项
default	string	''	默认选中项的 value 值

使用示例

{
  "type": "object",
  "properties": {
    "direction": {
      "type": "button-group-select",
      "title": "排列方向",
      "options": [
        { "label": "水平", "value": "horizontal" },
        { "label": "垂直", "value": "vertical" }
      ],
      "default": "horizontal",
      "vertical": false
    },
    "align": {
      "type": "button-group-select",
      "title": "对齐方式（垂直）",
      "options": [
        { "label": "左对齐", "value": "left" },
        { "label": "居中", "value": "center" },
        { "label": "右对齐", "value": "right" }
      ],
      "default": "left",
      "vertical": true
    }
  },
  "propertyOrder": ["direction", "align"]
}

---

访问 schemaRegistry

可通过 schemaRegistry 查询已注册的所有 Schema 类型：

import JSONSchemaEditor, { schemaRegistry } from '@wibetter/json-schema-editor';

// 获取某个类型的描述文件
const colorPickerDescriptor = schemaRegistry.get('color-picker');

// 获取所有已注册类型
const allTypes = Array.from(schemaRegistry.keys());