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 <div className="jsoneditor-react-container" ref={(elem) => (this.container = elem)} />;
  }
}

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

declare module 'jsoneditor';

参考

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