Json Schema 可视化编辑器（Antd）

Antd Design 风格的 Json Schema 可视化编辑器。

Arco Design 风格：https://github.com/lin-mt/json-schema-editor-arco

快速开始

# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync

示例

npm install @quiet-front-end/json-schema-editor-antd

import { useState } from "react";
import JsonSchemaEditor from '@quiet-front-end/json-schema-editor-antd';
import '@quiet-front-end/json-schema-editor-antd/dist/css/index.css';

export default () => {

  const [jsonData, setJsonData] = useState({});

  return (
    <JsonSchemaEditor
      mock={true}
      data={jsonData}
      onChange={(data) => {
        setJsonData(data);
      }}
    />
  )
}

离线使用编辑器

项目中的代码编辑器用的是在线加载 cdn 的方式，离线使用需自行添加以下内容

npm install monaco-editor

import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';

loader.config({ monaco });