阿里产品大大:react项目这块用aceEditor代码编辑器吧,小姐姐看完都会的教程,你还不会????

阿里产品大大:react项目这块用aceEditor代码编辑器吧,小姐姐看完都会的教程,你还不会????大家好,我是:じ☆ve朽木,开发经验都是一步一步慢慢积累的,没有谁生来就具有的,只要我们付出了努力,肯定就会有收获!进入我的博客,带你了解Java知识,js小技巧,带你玩转高端物联网。博客地址为:じ☆ve朽木。react项目中有个需求需要对接一个代码编辑器,查看了antdesign官方社区精选组件提供了两款代码编辑器,有一款是微软推出的,但是代码提示不是很友好,最后需求又查看了阿里云的相关…

大家好,又见面了,我是你们的朋友全栈君。

阿里产品大大: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后发现引入的主题以及代码块能正常使用了,我们看一下演示效果
aceEditor演示效果
虽然已经能正常使用后,但还有一个问题,查看了官方的演示demo,启用实时自动完成功能后,输入会有代码提示块,但我们这个却没有代码提示。

  本文原创为:じ☆ve朽木,原文链接:react项目加入:aceEditor代码编辑器,小姐姐看完都会的教程,你还不会????,请大家支持原创,转载请附上原文出处链接,拒绝抄袭。

我们先看一下个官方演示demo吧
aceEditor官方demo演示效果图
检查我们的代码以及官方demo展示的代码,几乎一模一样,但就是不提示,经过多次尝试以及API的查看,发现我们引入的依赖包还不够,我们还需要引入另外一个ace-builds内的ext-language_tools依赖。

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

在这里插入图片描述
引入后我们再来看一下效果图:

最终效果图

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148175.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • SQL中的聚合函数介绍

    SQL中的聚合函数介绍  什么是聚合函数(aggregatefunction)?聚合函数对一组值执行计算并返回单一的值。 聚合函数有什么特点?除了COUNT以外,聚合函数忽略空值。 聚合函数经常与SELECT语句的GROUPBY子句一同使用。 所有聚合函数都具有确定性。任何时候用一组给定的输入值调用它们时,都返回相同的值。 标量函数:只能对单个的数字或值进行计算。主…

  • 【福利】JVM系列学习资源无套路赠送「建议收藏」

    这段时间一直整理并输出JVM相关的内容,每次发文后,后台也总有小伙伴留言说不知道如何学习JVM,看书太枯燥,很难坚持下去,并且看了很多时候用不上,也都忘记的差不多了,究竟要怎么学习JVM的知识呢?其实我也是去年才开始意识到自己到学一下JVM了,自己买了一些书然后在网上找了一些相关的视频资源! 通过先看一遍书,大致整个JVM相关的内容体系,然后在通过视频的学习快速的对核心的知识进行熟悉。最后在过一…

  • 选择器的结构关系「建议收藏」

    选择器的结构关系「建议收藏」选择器的结构关系

  • GridView利用CheckBox复选框列实现单选功能

    GridView利用CheckBox复选框列实现单选功能自Dev13.2开始,GridView提供了自带的复选框列,该功能能实现多选操作,方便了不少,那如果想把这个自带的复选框列做成单选,那就需要单独处理了。先补充一下,GridView的复选框列怎么设置,如下代码片段,只要设置前面两个属性即可在GridView看到有一列复选框(BandedGridView较老版本不支持这个功能,应该得在19.2或者20之后的版本才支持,具体可以看看自己的版本,如果设置无效,那么说明不支持)://设置显示复选框列gridview.Option

  • Flow Control(流控)

    Flow Control(流控)Backpressure(背压)只是解决FlowControl的其中一个方案。就像小学做的那道数学题:一个水池,有一个进水管和一个出水管。如果进水管水流更大,过一段时间水池就会满(溢出)。这就是没有FlowControl导致的结果。而解决FlowControl有几种思路呢?(1)Backpressure,就是消费者需要多少,生产者就生产多少。这有点类似于TCP里的流量控制,接收方根据自己的…

  • Layui弹出层 加载 做编辑页面「建议收藏」

    Layui弹出层 加载 做编辑页面「建议收藏」先上效果图基本准备,引入layui的layui.css,layui.js文件&lt;linkrel="stylesheet"href="../../../Publics/others/layui/css/layui.css"media="all"&gt;&lt;scriptsrc="../../../Publics/others/layui/layui.js"&gt;&a

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号