【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能。中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看。
1.安装
yarn add react-ace //或 npm install react-ace
2.在项目中引入
import AceEditor from 'react-ace';
3.在组件中使用
<AceEditor
ref="editor"
mode="mysql"
theme="xcode"
onChange={this.onChange.bind(this)}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
enableBasicAutocompletion={true}
enableLiveAutocompletion={true}
enableSnippets={true}
style={{ width: "100%", height: "100%", fontSize: "18px" }}
onLoad={this.complete.bind(this)}
/>
4.API
- mode:代码语言,可选类型如下
- theme:主题,可选类型如下
- enableBasicAutocompletion 普通自动完成,可选类型(true/false)
- enableLiveAutocompletion 实时自动完成,可选类型(true/false)
- enableSnippets 代码自动补全,可选类型(true/false)
- onLoad:加载完成后执行的函数,第一个参数是编辑器的实例
这里主要说一下自定义代码提示列表,实现的功能示例如下
1.首先定义自定义提示列表,如下
const completers = [
{
name: 'name',
value: 'one',
score: 100,
meta: '手动添加1'
},
{
name: 'name',
value: 'two',
score: 100,
meta: '手动添加2'
},
{
name: 'name',
value: 'three',
score: 100,
meta: '手动添加3'
}
];
2.接着在onLoad函数里执行如下方法即可
complete(editor) {
//向编辑器中添加自动补全列表
editor.completers.push({
getCompletions: function (callback) {
callback(null, completers);
}
});
}
以上。
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
扫二维码加为好友就完事了!安排~
【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)的更多相关文章
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- vue踩坑记,持续更新中......
1.运行项目报错 you may use special comments to disable some waring. use //eslint-disable-next-line.....吧啦吧 ...
- 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能
常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...
- 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)
同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- 【React踩坑记二】react项目实现JS路由跳转
这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...
- React踩坑记
一: Support for the experimental syntax 'classProperties' isn't currently enabled ERROR in ./src/inde ...
- react 踩坑记
yarn node-sass 安装失败 yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass yarn i ...
随机推荐
- 使用Putty登录亚马逊云主机
亚马逊云主机配置之后会提示 提供一个 pem证书, 打开 SSH 客户端.(了解操作方法 使用 PuTTY 连接) 找到您的私有密钥文件(test001.pem).向导会自动检测您用于启动实例的密钥. ...
- 用最新的版本,蹦最野的迪~~~IDE写大数据程序避坑指南
文章更新于:2020-04-05 注:本次实验使用的操作系统及各个程序版本号 类别 版本号 说明 操作系统 Ubuntu 16.04.6 LTS 代号 xenial jdk java version ...
- Android 添加键值并上报从驱动到上层
转载:https://blog.csdn.net/weixin_43854010/article/details/94390803 Android 添加键值并上报从驱动到上层 平台 :RK3288 O ...
- MTK Android 预置APK
[FAQ03038] 如何预置APK [DESCRIPTION]1, 如何将带源码的 APK 预置进系统?2, 如何将无源码的APK预置进系统?3, 如何预制APK使得用户可以卸载?4, 如何使得用户 ...
- idea运行gradle项目报错,找不到符号符号,方向xxxx类未知
报错: 解决:把build和run设置为idea
- Array(数组)对象-->shift() 方法
1.定义和用法 shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值. 语法: array.shift() 注意: 此方法改变数组的长度! 举例: var arr = [1,2, ...
- matplotlib PyQt5 nivigationBar 中pan和zoom功能的探索
为matplotlib生成的图添加编辑条,我们导入NavigationToolbar2QT from matplotlib.backends.backend_qt5agg import Navigat ...
- L19深度学习中的优化问题和凸性介绍
优化与深度学习 优化与估计 尽管优化方法可以最小化深度学习中的损失函数值,但本质上优化方法达到的目标与深度学习的目标并不相同. 优化方法目标:训练集损失函数值 深度学习目标:测试集损失函数值(泛化性) ...
- idea ------- 源码调试运行
1.创建一个 想学 的 ,使用单步调试进行一步步学习 调整系统资源 单步调试 (F7) ,进入不了源码,调整idea 让我们可以进入底层学习 想要在源码里面添加注释,要将引用的源文件指向,我们刚才复制 ...
- 简谈” Top K“
Top K 快速选择和堆排序都可以求解 Kth Element 和 TopK Elements 问题. 题见215. Kth Largest Element in an Array (Medium) ...