摩纳哥编辑器 monaco editor 中文示范 react 版本

最新推荐文章于 2024-08-08 08:12:01 发布

ITer_hua

最新推荐文章于 2024-08-08 08:12:01 发布

阅读量6.7k

点赞数

分类专栏： react js 文章标签： monaco editor

本文链接：https://blog.csdn.net/ITer_hua/article/details/88980048

版权

react 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1、网上react 版本的样例很少，更多的是使用 react-monaco-editor 的react版本，担心封装的不够强大，于是在react 里用的原生组件

代码示例如下，可供参考

class Index extends React.Component {

  componentDidMount() {
    const { path, value, language, onValueChange } = this.props;
    const model = monaco.editor.createModel(value, language, path);
    const options = {
      suggestLineHeight: 20,
      lineHeight: 20,
      lineNumbers: "on"
    };
    this._editor = monaco.editor.create(this._node, options);
    this._editor.setModel(model);
    this._subscription = model.onDidChangeContent(() => {
      console.log(model.getValue());
      // this.props.onValueChange(model.getValue());
      this.props.service.call('setState', {ddlInfo: model.getValue()});
    });
  }

  componentDidUpdate(prevProps: Props) {
    const { path, value, language, onValueChange, dataSourceManage, ...options } = this.props;
    const { ddlInfo } = dataSourceManage;
    this._editor.updateOptions(options);
  
    const model = this._editor.getModel();

    if (ddlInfo !== model.getValue()) {
      model.pushEditOperations(
        [],
        [
          {
            range: model.getFullModelRange(),
            text: ddlInfo,
          },
        ]
      );
    }
  }

  componentWillUnmount() {
    this._editor && this._editor.dispose();
    this._subscription && this._subscription.dispose();
  }

  render() {
    const { info = '' } = this.props;
    return (
      <div>
        <div style={{height: 200}} ref={c => this._node = c} />
      </div>
    );
  }
}