阿里产品大大: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)
blank

相关推荐

  • javascript中function用法_年终总结反思不足之处

    javascript中function用法_年终总结反思不足之处整理了JavaScript中函数Function的各种,感觉函数就是一大对象啊,各种知识点都能牵扯进来,不单单是 Function 这个本身原生的引用类型的各种用法,还包含执行环境

  • python语法(二)——截取字符串的方法详解

    python语法(二)——截取字符串的方法详解下面是基于python2+版本;python3+print输出的内容要加括号str=’0123456789’printstr[0:3]#截取第一位到第三位的字符printstr[:]#截取字符串的全部字符printstr[6:]#截取第七个字符到结尾printstr[:-3]#截取从头开始到倒数第三个字符之前printstr[2]#截取第三个字符printstr[-1]…

  • 关于quotename的用法[通俗易懂]

    关于quotename的用法[通俗易懂]首先,sqlserver里的标识符有一定的规则,比如你 createtableabc123(…) 那么中间含有空格,它不是符合规则的。 你会写做create

  • SCTP简介

    SCTP简介SCTP(StreamControlTransmissionProtocol)是一种传输协议,在TCP/IP协议栈中所处的位置和TCP、UDP类似,兼有TCP/UDP两者特征。SCTP是可以确保数据传输的,和TCP类似,也是通过确认机制来实现的。和TCP不同的是:1.TCP是以字节为单位传输的,SCTP是以数据块为单位传输的TCP接收端确认的是收到的字节数,SCTP接收端确认

  • Linux-nmap命令使用

    Linux-nmap命令使用用namp对局域网扫描一遍,然后查看arp缓存表就可以知道局域内ip-mac的对应了namp比较强大也可以直接扫描mac地址和端口进行ping扫描,打印出对扫描做出响应的主机:  nmap-sP192.168.1.0/24仅列出指定网络上的每台主机,不发送任何报文到目标主机:  nmap-sL192.168.1.0/24  探测目标主机开放的端口,可以指定一个以…

  • 山东大学舆情研究中心_舆情系统

    山东大学舆情研究中心_舆情系统项目结题总结一、项目背景二、技术要点三、功能介绍1、服务器端(1)启动服务器一、项目背景对于一所高校来说一个好的风评有着十分重要的作用,拥有一个良好的口碑,能吸引更多的生源、引进更多的人才,学校的综合素质能力也会因此提升,因此我们小组选择了《山东大学舆情分析系统》这一题目,通过搜集百度新闻、央视新闻、今日头条、齐鲁网、新浪、网易新闻、微博、知乎等网站的有关信息,对搜集到的文本信息所进行的分词、统计处理,将结果绘制成可视化的热度词条、情感倾向变化图,并实时展示在网站上,以此来更直观的了解山大的实时风评。

发表回复

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

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