大家好,我是:じ☆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';
引入後我們再來看一下效果圖: