【React踩坑記五】React項目中引入並使用react-ace代碼編輯插件(自定義列表提示)

最近有一個引入sql編輯器插件的需求，要求代碼高亮顯示，代碼智能提示，以及支持自定義代碼提示列表等功能。中途在自定義代碼提示列表中由於沒有相關demo，所以踩了一些坑，遂將其整理如下，以便日后查看。

1.安裝

yarn add react-ace //或 npm install react-ace

2.在項目中引入

import AceEditor from 'react-ace';

3.在組件中使用

<AceEditor
  ref="editor"
  mode="mysql"
  theme="xcode"
  onChange={this.onChange.bind(this)}
  name="UNIQUE_ID_OF_DIV"
  editorProps={{ $blockScrolling: true }}
  enableBasicAutocompletion={true}
  enableLiveAutocompletion={true}
  enableSnippets={true}
  style={{ width: "100%", height: "100%", fontSize: "18px" }}
  onLoad={this.complete.bind(this)}
/>

4.API

• mode：代碼語言，可選類型如下
  
• theme:主題，可選類型如下
  
• enableBasicAutocompletion 普通自動完成，可選類型(true/false)
• enableLiveAutocompletion 實時自動完成，可選類型(true/false)
• enableSnippets 代碼自動補全，可選類型(true/false)
• onLoad:加載完成后執行的函數，第一個參數是編輯器的實例

這里主要說一下自定義代碼提示列表，實現的功能示例如下

1.首先定義自定義提示列表，如下

const completers = [
  {
    name: 'name',
    value: 'one',
    score: 100,
    meta: '手動添加1'
  },
  {
    name: 'name',
    value: 'two',
    score: 100,
    meta: '手動添加2'
  },
  {
    name: 'name',
    value: 'three',
    score: 100,
    meta: '手動添加3'
  }
];

2.接着在onLoad函數里執行如下方法即可

complete(editor) {
    //向編輯器中添加自動補全列表
    editor.completers.push({
      getCompletions: function (callback) {
        callback(null, completers);
      }
    });
  }

以上。

這里有324.57GB的修仙資料。嘿嘿嘿你懂得。/手動狗頭

那么問題來了，如果你也想入坑前端或者學習更多技術，廣交天下朋友(基友)，認識更多有趣的靈魂的話，歡迎加入前端交流群鴨~

掃二維碼加為好友就完事了！安排~