大家好,我是:じ☆ve朽木,开发经验都是一步一步慢慢积累的,没有谁生来就具有的,只要我们付出了努力,肯定就会有收获!进入我的博客,带你了解Java知识,js小技巧,带你玩转高端物联网。博客地址为:じ☆ve朽木。 react项目中有个需求需要对接一个代码编辑器,查看了ant design官方社区精选组件提供了两款代码编辑器,有一款是 不建议去查看 操作至此就算完成了,但还存在问题,编辑器引入成功,但是引入的依赖包却找不到导致主题以及代码块无法正常使用。 查阅API后发现安装的 已经安装过 安装完 本文原创为:じ☆ve朽木,原文链接:react项目加入:aceEditor代码编辑器,小姐姐看完都会的教程,你还不会????,请大家支持原创,转载请附上原文出处链接,拒绝抄袭。 我们先看一下个官方演示demo吧微软
推出的,但是代码提示
不是很友好,最后需求又查看了阿里云的相关信息,发现阿里云自己使用的是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, }} />
react-ace
依赖包不完整,发现少了一个ace-builds
的依赖包,发现问题后就重新安装了一遍,正确的安装命令: npm install react-ace ace-builds
react-ace
可以只安装ace-builds
,安装命令:npm install ace-builds
ace-builds
后发现引入的主题以及代码块能正常使用了,我们看一下演示效果
虽然已经能正常使用后,但还有一个问题,查看了官方的演示demo,启用实时自动完成功能后,输入会有代码提示块,但我们这个却没有代码提示。
检查我们的代码以及官方demo展示的代码,几乎一模一样,但就是不提示,经过多次尝试以及API的查看,发现我们引入的依赖包还不够,我们还需要引入另外一个ace-builds
内的ext-language_tools
依赖。import 'ace-builds/src-noconflict/ext-language_tools';
引入后我们再来看一下效果图:
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算