react-monaco-editor官方git地址

这是我写的一个demo(最新版)

https://github.com/ysk1991/react-monaco-editor

• 支持光标处插入
• 支持提示语 输入 sin cos tan 会出现提示语 输入冒号 : 会出现支持的所有提示语

bug描述

• 遇到一个坑，解决了很久，结果用最蠢的方式，sessionStorage解决的，如果有好的方式请留言

• 寻找过的解决方案，但是未果，比如在组件componentWillUnmount的时候销毁这个editor，比如react-monaco-editor的api里，源码里寻找editor自带的销毁的方法，销毁的方法有，但是react-monaco-editor并没有封装提供，给我的感觉就是react-monaco-editor 提供的api太少，可能也是我源码看得不够彻底，希望有大神可以指导一下

• 以下是bug的截图，在使用react-monaco-editor 的自定义按键代码提示时，出现了重复的数据，每一次路由变动，再次进入这个页面时，我的自定义按键提示就会多push一次，数据重复两次

  
  

• 每一次路由变动，我的按键提示就会多push一次，数据重复三次

  
  

• 实现自定义按键提示的方法 以及 bug的解决方式

editorDidMountHandle = async (editor, monaco) => {
    // sessionStorage记录当前我是否来过这个页面 也就是说 是否加载执行过  monaco.languages.registerCompletionItemProvider 
   // 执行过就不再执行 当页面关闭就重新记录 因为多次执行了这个方法导致重复数据
    const isLoadDEditor = sessionStorage.getItem('isLoadDEditor');
    if (!isLoadDEditor) {
      sessionStorage.setItem('isLoadDEditor', true);
      await this.requestList();
      const { suggestions, tipList } = this.state;
      if (suggestions.length) {
        monaco.languages.registerCompletionItemProvider('plaintext', {
          provideCompletionItems() {
           console.log('这个地方，每一次路由变动，就会多执行一次，导致我的按键提示重复展示')
            return {
              suggestions: suggestions.map(item => ({ ...item, kind: monaco.languages.CompletionItemKind.Variable }))
            };
          },
          triggerCharacters: tipList
        });
      }
      this.timeouter = setTimeout(() => {
        editor.getAction('editor.action.formatDocument').run();
      }, 300);
    }
  };

• 提供以下完整代码

import React from 'react';
import MonacoEditor from 'react-monaco-editor';
import { get_rule_function } from '../../services/api.js';


class DEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tipList: [],     // 储存计算框提示语的首字母
      suggestions: [], // 储存提示语
      calculateValue: '',
    };
  }

  componentWillMount() {
    // 拦截判断是否离开当前页面
    window.addEventListener('beforeunload', this.beforeunload);
  }

  componentDidMount() {
    this.setState({
      calculateValue: this.props.calculateValue
    })
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.calculateValue !== nextProps.calculateValue) {
      this.setState({
        calculateValue: nextProps.calculateValue,
      })
    }
  }

  beforeunload() {
    // 如果是刷新页面 清空sessionStorage
    sessionStorage.removeItem('isLoadDEditor');
  }

  // 自定义按键提示的数据请求
  requestList = async () => {
    const list = [];
    const tipList = [':'];
    const res = await get_rule_function()
    if (res.data.responseCode) return
    const responseData = res.data.responseData;
    responseData.map(item => {
      const obj = {};
      obj.label = item.content;
      obj.insertText = item.content;
      obj.detail = item.symbolName;
      list.push(obj);
      tipList.push(item.content.substring(0, 1));
      return null;
    })
    this.setState({
      suggestions: list,
      tipList: tipList
    }) 
  }

  onBlur = () => {
    const { calculateValue } = this.state;
    this.props.value(calculateValue);
    if (calculateValue) {
      this.props.isEditorErrFn(false);
    }
  };

  onChangeHandle = (value, e) => {
    this.setState({
      calculateValue: value
    });
  }

  editorDidMountHandle = async (editor, monaco) => {
    // sessionStorage记录当前我是否来过这个页面 也就是说 是否加载执行过  monaco.languages.registerCompletionItemProvider 
    // 执行过就不再执行 当页面关闭就重新记录 因为多次执行了这个方法导致重复数据
    const isLoadDEditor = sessionStorage.getItem('isLoadDEditor');
    // console.log(isLoadDEditor)
    if (isLoadDEditor !== '1') {
      // console.log('如果没有加载过，就执行一次，加载过就不会再进入')
      sessionStorage.setItem('isLoadDEditor', '1');
      await this.requestList();
      const { suggestions, tipList } = this.state;
      if (suggestions.length) {
        monaco.languages.registerCompletionItemProvider('plaintext', {
          provideCompletionItems() {
            // console.log('这个地方，每一次路由变动，就会多执行一次，导致我的按键提示重复展示')
            return {
              suggestions: suggestions.map(item => ({ ...item, kind: monaco.languages.CompletionItemKind.Variable }))
            };
          },
          triggerCharacters: tipList
        });
      }
      this.timeouter = setTimeout(() => {
        editor.getAction('editor.action.formatDocument').run();
      }, 300);
    }
  };

  options = {
    selectOnLineNumbers: true,
    renderSideBySide: false
  };

  render() {
    return (
      <div onBlur={this.onBlur}>
        <MonacoEditor
          ref="monaco"
          width="900"
          height="200"
          language="plaintext"
          theme="vs-dark"
          value={this.state.calculateValue}
          options={this.options}
          onChange={this.onChangeHandle}
          editorDidMount={this.editorDidMountHandle}
        />
      </div>
    )
  }
}

export default DEditor;

以下是react-monaco-editor 代码高亮配置 webpack配置：

• 安装monaco-editor-webpack-plugin依赖

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
       new MonacoWebpackPlugin(['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']),
  ]
};

一个坑

• 与antd冲突 不得进行如下配置

  
  

• package.json里面的scripts配置不得改动：

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },