阿里产品大大：react项目这块用aceEditor代码编辑器吧，小姐姐看完都会的教程，你还不会？？？？
163 浏览量
2021-01-06
05:31:03
上传
评论
收藏 270KB PDF 举报
阿里产品大大：阿里产品大大：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的主题样式
界面渲染：界面渲染：
{
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吧
资源评论
