阿里產品大大：react項目這塊用aceEditor代碼編輯器吧，小姐姐看完都會的教程，你還不會？？？？

大家好，我是：じ☆ve朽木，開發經驗都是一步一步慢慢積累的，沒有誰生來就具有的，只要我們付出了努力，肯定就會有收穫！進入我的博客，帶你瞭解Java知識，js小技巧，帶你玩轉高端物聯網。博客地址爲：じ☆ve朽木。

react項目中有個需求需要對接一個代碼編輯器，查看了ant design官方社區精選組件提供了兩款代碼編輯器，有一款是微軟推出的，但是代碼提示不是很友好，最後需求又查看了阿里雲的相關信息，發現阿里雲自己使用的是aceEditor，下面我們就介紹一下如果在react項目中使用aceEditor。

不建議去查看aceEditor官方，最好去github查看

安裝命令：

`npm install react-ace` 

引入包：

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-sql'; // sql模式的包
import 'ace-builds/src-noconflict/mode-mysql';// mysql模式的包
import 'ace-builds/src-noconflict/theme-eclipse';// eclipse的主題樣式

界面渲染：

<AceEditor
     mode='mysql'
     theme="eclipse"
     name="app_code_editor"
     fontSize={14}
     showPrintMargin
     showGutter
     onChange={value => {
       console.log(value); // 輸出代碼編輯器內值改變後的值
     }}
     value={props.data.sql}
     wrapEnabled
     highlightActiveLine  //突出活動線
     enableSnippets  //啓用代碼段
     style={{ width: '100%', height: 300 }}
     setOptions={{
       enableBasicAutocompletion: true,   //啓用基本自動完成功能
       enableLiveAutocompletion: true,   //啓用實時自動完成功能 （比如：智能代碼提示）
       enableSnippets: true,  //啓用代碼段
       showLineNumbers: true,
       tabSize: 2,
     }}
   />

操作至此就算完成了，但還存在問題，編輯器引入成功，但是引入的依賴包卻找不到導致主題以及代碼塊無法正常使用。

查閱API後發現安裝的 react-ace依賴包不完整，發現少了一個ace-builds的依賴包，發現問題後就重新安裝了一遍，正確的安裝命令： npm install react-ace ace-builds

已經安裝過react-ace可以只安裝ace-builds，安裝命令：npm install ace-builds

安裝完ace-builds後發現引入的主題以及代碼塊能正常使用了，我們看一下演示效果

雖然已經能正常使用後，但還有一個問題，查看了官方的演示demo，啓用實時自動完成功能後，輸入會有代碼提示塊，但我們這個卻沒有代碼提示。

  本文原創爲：じ☆ve朽木，原文鏈接：react項目加入：aceEditor代碼編輯器，小姐姐看完都會的教程，你還不會？？？？，請大家支持原創，轉載請附上原文出處鏈接，拒絕抄襲。

我們先看一下個官方演示demo吧

檢查我們的代碼以及官方demo展示的代碼，幾乎一模一樣，但就是不提示，經過多次嘗試以及API的查看，發現我們引入的依賴包還不夠，我們還需要引入另外一個ace-builds內的ext-language_tools依賴。

import 'ace-builds/src-noconflict/ext-language_tools';

引入後我們再來看一下效果圖：