react-monaco-editor官方git地址

這是我寫的一個demo(最新版)

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

• 支持光標(biāo)處插入
• 支持提示語 輸入 sin cos tan 會出現(xiàn)提示語 輸入冒號 : 會出現(xiàn)支持的所有提示語

bug描述

• 遇到一個坑，解決了很久，結(jié)果用最蠢的方式，sessionStorage解決的，如果有好的方式請留言

• 尋找過的解決方案，但是未果，比如在組件componentWillUnmount的時候銷毀這個editor，比如react-monaco-editor的api里，源碼里尋找editor自帶的銷毀的方法，銷毀的方法有，但是react-monaco-editor并沒有封裝提供，給我的感覺就是react-monaco-editor 提供的api太少，可能也是我源碼看得不夠徹底，希望有大神可以指導(dǎo)一下

• 以下是bug的截圖，在使用react-monaco-editor 的自定義按鍵代碼提示時，出現(xiàn)了重復(fù)的數(shù)據(jù)，每一次路由變動，再次進(jìn)入這個頁面時，我的自定義按鍵提示就會多push一次，數(shù)據(jù)重復(fù)兩次

  
  

• 每一次路由變動，我的按鍵提示就會多push一次，數(shù)據(jù)重復(fù)三次

  
  

• 實(shí)現(xiàn)自定義按鍵提示的方法 以及 bug的解決方式

editorDidMountHandle = async (editor, monaco) => {
    // sessionStorage記錄當(dāng)前我是否來過這個頁面 也就是說 是否加載執(zhí)行過  monaco.languages.registerCompletionItemProvider 
   // 執(zhí)行過就不再執(zhí)行 當(dāng)頁面關(guān)閉就重新記錄 因?yàn)槎啻螆?zhí)行了這個方法導(dǎo)致重復(fù)數(shù)據(jù)
    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('這個地方，每一次路由變動，就會多執(zhí)行一次，導(dǎo)致我的按鍵提示重復(fù)展示')
            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: [],     // 儲存計(jì)算框提示語的首字母
      suggestions: [], // 儲存提示語
      calculateValue: '',
    };
  }

  componentWillMount() {
    // 攔截判斷是否離開當(dāng)前頁面
    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');
  }

  // 自定義按鍵提示的數(shù)據(jù)請求
  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記錄當(dāng)前我是否來過這個頁面 也就是說 是否加載執(zhí)行過  monaco.languages.registerCompletionItemProvider 
    // 執(zhí)行過就不再執(zhí)行 當(dāng)頁面關(guān)閉就重新記錄 因?yàn)槎啻螆?zhí)行了這個方法導(dǎo)致重復(fù)數(shù)據(jù)
    const isLoadDEditor = sessionStorage.getItem('isLoadDEditor');
    // console.log(isLoadDEditor)
    if (isLoadDEditor !== '1') {
      // console.log('如果沒有加載過，就執(zhí)行一次，加載過就不會再進(jìn)入')
      sessionStorage.setItem('isLoadDEditor', '1');
      await this.requestList();
      const { suggestions, tipList } = this.state;
      if (suggestions.length) {
        monaco.languages.registerCompletionItemProvider('plaintext', {
          provideCompletionItems() {
            // console.log('這個地方，每一次路由變動，就會多執(zhí)行一次，導(dǎo)致我的按鍵提示重復(fù)展示')
            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沖突 不得進(jìn)行如下配置

  
  

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

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