antd 集成第三方js控件

主思路

使用js集成原始的jsoneditor

详情

集成第三方js控件 jsoneditor，有两个选择 原始的 jsoneditor

GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON

已经包装为 react 的 jsoneditor-react

GitHub - vankop/jsoneditor-react: react wrapper implementation for https://github.com/josdejong/jsoneditor

后来还是选择用原始jsoneditor，可控性大一点，而且直接集成了ace比较方便。jsoneditor-react里不包括ace，需要另外引入。

ScriptEditor 就是为了换个名字, mode其实是可以引入参数的，这段来自官方的example

import React, { Component } from 'react';import JSONEditor from 'jsoneditor';import 'jsoneditor/dist/jsoneditor.css';import './index.less';export default class ScriptEditor extends Component {  componentDidMount() {    const options = {      mode: 'code',      onChangeJSON: this.props.onChangeJSON,    };    this.jsoneditor = new JSONEditor(this.container, options);    this.jsoneditor.set(this.props.json);  }  componentWillUnmount() {    if (this.jsoneditor) {      this.jsoneditor.destroy();    }  }  componentDidUpdate() {    this.jsoneditor.update(this.props.json);  }  render() {    return 
 (this.container = elem)} />;  }}

遇到 ide的报警问题，可以简单地在 typing.d.ts 里定义一下。

declare module 'jsoneditor';

参考

官方 GitHub - josdejong/jsoneditor: A web-based tool to view, edit, format, and validate JSON