React專案接入程式碼編輯器aceEditor

jory發表於2024-08-23
React

不建議去檢視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
安裝完ace-builds後發現引入的主題以及程式碼塊能正常使用了，我們看一下演示效果
image
雖然已經能正常使用後，但還有一個問題，檢視了官方的演示demo，啟用實時自動完成功能後，輸入會有程式碼提示塊，但我們這個卻沒有程式碼提示。
我們先看一下個官方演示demo吧
image
檢查我們的程式碼以及官方demo展示的程式碼，幾乎一模一樣，但就是不提示，經過多次嘗試以及API的檢視，發現我們引入的依賴包還不夠，我們還需要引入另外一個ace-builds內的ext-language_tools依賴。

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

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

相關文章