【超详细】 对 AceEditor 二次封装 及 自定义扩展语言实现

置顶 已于 2023-04-25 09:37:37 修改
阅读量2.9k 收藏 16
点赞数 5
分类专栏： 前端框架&库 文章标签： vue.js javascript 前端 编辑器
于 2023-04-24 22:37:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Centenario_0/article/details/130332072
版权

📢 前言

最近调研前端代码编辑器，选中了 Ace editor，其本身功能丰富，扩展性也极强，插件目前更新稳定。ace 本身支持上百种语言的语法，然鹅日常项目中总有些奇葩的需求，以致我们需要去了解更多的技术研究。
技术支持： Vue3 + Vite ，基于 ace-builds 进行二次扩展封装。

📄 Ace 简介

1、什么是 Ace editor ?

Ace（Ajax.org Cloud9 Editor）是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime，Vim 和 TextMate 等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和 JavaScript 应用程序中。

2、特征
  • 超过 110 种语言的语法高亮显示（可以导入 TextMate/Sublime Text.tmlanguage 文件）
  • 超过 20 个主题（可以导入 TextMate/Sublime Text .tmtheme 文件）
  • 自动缩进和缩进
  • 可选的命令行
  • 处理大型文档（四百万行似乎是极限！
  • 完全可定制的键绑定，包括 vim 和 Emacs 模式
  • 搜索并替换为正则表达式
  • 突出显示匹配的括号
  • 在软标签和真实标签之间切换
  • 显示隐藏字符
  • 使用鼠标拖放文本
  • 换行
  • 代码折叠
  • 多个光标和选择
  • 实时语法检查器（目前为 JavaScript/CoffeeScript/CSS/XQuery）
  • 剪切、复制和粘贴功能

✒️ Ace 使用及封装

1、安装

使用 pnpm 包管理器，引入 ace-builds 库

	pnpm i ace-builds -D
	pnpm i vue-loader-v16 -D // 引入 ace 报错时需安装
2、引入

引入基础模块，测试ace编辑器基础功能

	<template>
	  <div class="aceEditor" ref="aceEditor"></div>
	</template>
	
	<script lang="ts" setup>
	import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
	import * as ace from 'ace-builds';
	
	import "ace-builds/src-noconflict/mode-javascript"; // 语言模式
	import "ace-builds/src-noconflict/theme-monokai" // 主题
	import "ace-builds/src-noconflict/ext-language_tools"; // 语法提示
	import "ace-builds/src-noconflict/snippets/javascript"; // 语法段提示模块
	</script>
3、配置
	const options = {
	  theme: 'ace/theme/monokai', // 设置语法高亮主题
	  mode: 'ace/mode/javascript', // 设置语法 mode
	  tabSize: 1,
	  maxLines: 25,
	  minLines: 25,
	  showPrintMargin: false,
	  fontSize: 14,
	  printMarginColumn: 20,
	  useWorker: false,
	  showLineNumbers: true, // 显示行号
	  showGutter: true, // 显示行号区域
	  highlightActiveLine: false,
	  highlightSelectedWord: false, // 高亮选中文本
	  readOnly: false, // 控制编辑器是否只读
	  enableSnippets: true, // 启用代码段提示
	  enableLiveAutocompletion: true, // 启用实时自动完成
	  enableBasicAutocompletion: true,  // 启用基本自动完成
	}
4、初始化
	const initEditor = () => {
	  if (editor) editor.destroy();
	
	  // 初始化
	  editor = ace.edit(aceEditor.value, options);
	
	  // 切换自动换行
	  editor.getSession().setUseWrapMode(true);
	}
	
	onMounted(() => {
	  initEditor()
	});

测试 aceEditor 基础封装是否功能正常，方便后续扩展开发。

🔧 Ace 自定义语言扩展

Ace 编辑器本身不支持直接自定义语言，但支持通过扩展语言模式的方式实现对自定义语言的支持。在 Ace 中，语言模式是指将文本分解为标记，定义了每个标记的样式和语法高亮规则，以此来实现语法高亮、代码折叠、自动完成等功能。
想要自定义新增语言模型，首先需要了解如何定义一个 mode （语言模式），可参考官方文档 Ace - The High Performance Code Editor for the Web (c9.io
1、在 node_modules\ace-builds\src-noconflict 下新增一个 mode-mylang.js 的文件，定义语言模式、语言高亮规则及代码提示。

	ace.define('ace/mode/mylang', ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/custom_highlight_rules'], (require, exports, module) => {
	  const oop = require('ace/lib/oop');
	  const TextMode = require('ace/mode/text').Mode;
	  const { MyLangHighlightRules } = require('ace/mode/mylang_highlight_rules');
	  const { Tokenizer } = require('ace/tokenizer');
	
	  const Mode = function () {
	    this.HighlightRules = MyLangHighlightRules;
	    this.$tokenizer = new Tokenizer(new MyLangHighlightRules().getRules());
	  };
	
	  oop.inherits(Mode, TextMode);
	
	  (function () {
	    // 加载css 样式设置，以便控制自定义语言关键词高亮颜色
	    const dom = require('ace/lib/dom');
	    dom.importCssString(exports.cssText, exports.cssClass);
	  }).call(Mode.prototype);
	
	  (function () {
	    // 添加代码提示
	    this.completer = {
	      getCompletions(editor, session, pos, prefix, callback) {
	        const wordList = [
	          'hello',
	          'world',
	          'AceEditor',
	          'hello world this is AceEditor',
	        ];
	        callback(
	          null,
	          wordList.map((word) => ({
	            caption: word,
	            value: word,
	            meta: 'mylang', // 自定义语言标识
	          })),
	        );
	      },
	    };
	  }.call(Mode.prototype));
	
	  exports.Mode = Mode;
	});

2、接着定于语法高亮规则， 高亮规则里面定义一系列的规则（Rules）， 每个规则描述了如何处理输入文本中的单个字符序列。Ace Editor 中的规则是由 Tokenizer 对象处理的。Tokenizer 是 Ace Editor 内置的一种基于正则表达式的解析器，用于将输入文本转换为标记（Token）流。标记是 Ace Editor 中的基本元素，它们由不同类型的 token 组成，例如：keyword、comment、string 等等。

	ace.define(
	  'ace/mode/mylang_highlight_rules',
	  ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
	  (require, exports, module) => {
	    const oop = require('ace/lib/oop');
	    const { TextHighlightRules } = require('ace/mode/text_highlight_rules');
	
	    const MyLangHighlightRules = function () {
	      // 定义高亮规则
	      const keywordList = 'let|const|function|world'; // 高亮关键词
	      this.$rules = {
	        start: [
	          {
	            token: 'keyword',
	            regex: `\\b(?:${keywordList})\\b`,
	          },
	          {
	            token: 'string',
	            regex: '".*?"',
	          },
	          {
	            token: 'constant',
	            regex: /\b(true|false|null)\b/,
	          },
	          {
	            token: 'comment',
	            regex: /\/\/.*$/,
	          },
	          {
	            token: 'comment',
	            start: '/\\*',
	            end: '\\*/',
	          },
	          {
	            token: 'mylang',
	            regex: '\\b(?:hello|world|AceEditor)\\b',
	          },
	        ],
	      };
	    };
	
	    oop.inherits(MyLangHighlightRules, TextHighlightRules);
	
	    exports.MyLangHighlightRules = MyLangHighlightRules;
	  },
	);

3、自定义特殊高亮颜色，比如我们想对 true | false | null 进行特殊颜色高亮，只需更具规则中 “token” 属性值，以 .ace_[属性值] 形式定义css。
例：

	/* 自定义语言，匹配不同类型关键词高亮颜色 */
	.ace_constant {
	  color: #FF00FF;
	  font-weight: bold;
	}

4、最后引入我们自定义语言即可，可直接在option中配置即可

	mode: 'ace/mode/mylang',

🏁 源码

插件本身还有很多配置和 api , 感兴趣的可以继续探索，本文旨在对初阶自定义功能实现讲解，后续会慢慢更新更深层次自定义方案。

	<template>
	  <div class="aceEditor" ref="aceEditor"></div>
	</template>
	
	<script lang="ts" setup>
	import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
	import * as ace from 'ace-builds';
	
	import "ace-builds/src-noconflict/mode-javascript"; // 语言模式
	import "ace-builds/src-noconflict/theme-monokai" // 主题
	import "ace-builds/src-noconflict/ext-language_tools"; // 语法提示
	import "ace-builds/src-noconflict/snippets/javascript"; // 语法段提示模块
	
	// 自定义语言
	import "ace-builds/src-noconflict/mode-mylang"; // 此模块需对应目录创建
	
	const props = withDefaults(defineProps<{
	  value: string,
	}>(), {
	})
	
	const emits = defineEmits(['update:value']);
	
	let editor: any = null;
	const aceEditor = ref<string | Element>('')
	
	// 编辑器默认配置项
	const options = {
	  theme: 'ace/theme/monokai',
	  //mode: 'ace/mode/javascript',
	  mode: 'ace/mode/mylang',
	  tabSize: 1,
	  maxLines: 25,
	  minLines: 25,
	  showPrintMargin: false,
	  fontSize: 14,
	  printMarginColumn: 20,
	  useWorker: false,
	  showLineNumbers: true, // 显示行号
	  showGutter: true, // 显示行号区域
	  highlightActiveLine: false,
	  highlightSelectedWord: false, // 高亮选中文本
	  readOnly: false, // 控制编辑器是否只读
	  enableSnippets: true, // 启用代码段
	  enableLiveAutocompletion: true, // 启用实时自动完成
	  enableBasicAutocompletion: true,  // 启用基本自动完成
	}
	
	// 初始化编辑器
	const initEditor = () => {
	  if (editor) editor.destroy();
	
	  // 初始化
	  editor = ace.edit(aceEditor.value, options);
	
	  // 切换自动换行
	  editor.getSession().setUseWrapMode(true);
	
	  // 支持双向绑定
	  editor.setValue(props.value ? props.value : "");
	  editor.on("change", () => {
	    emits("update:value", editor.getValue());
	  })
	}
	
	watch(
	  () => props.value,
	  (newProps) => {
	    //解决光标移动问题
	    const position = editor.getCursorPosition();
	    editor.getSession().setValue(newProps);
	    editor.clearSelection();
	    editor.moveCursorToPosition(position);
	  }
	);
	
	onMounted(() => {
	  initEditor()
	});
	
	onBeforeUnmount(() => {
	  editor.destroy();
	});
	
	</script>
	<style>
	.aceEditor {
	  width: 500px;
	  height: 500px;
	}
	
	/* 自定义语言，匹配不同类型关键词高亮颜色 */
	.ace_constant {
	  color: #FF00FF;
	  font-weight: bold;
	}
	</style>

📖 相关文档及网站

官网： https://ace.c9.io
GitHub: https://github.com/ajaxorg/ace
Vue3 ace组件： https://github.com/CarterLi/vue3-ace-editor
在线测试： https://ace.c9.io/build/kitchen-sink.html

创作不易，如果本篇文章你觉得还不错的话求个赞😜😜😜

詹姆斯bind
关注
  • 5
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
爬虫教程（ 6 ） --- 爬虫 进阶、扩展
墨鱼菜鸡
07-11 6734
1. 前言 1. 先看一个最简单的爬虫。 import requests url = "http://www.cricode.com" r = requests.get(url) print(r.text) 2. 一个正常的爬虫程序 上面那个最简单的爬虫，是一个不完整的残疾的爬虫。因为爬虫程序通常需要做的事情如下： 1)给定的种子 URLs，...
C++ rapidjson 对类序列化(完美二次封装)下载
02-02
本工程源码，基于rapidjson实现二次封装，使C++序列化一个类的变得代码非常小，耦合性非常低，且不损失原有序列化性能。详细使用可关联本人博客:http://blog.csdn.net/lightspear/article/details/54836656
ACEeditor使用手册（二）
球球不吃虾WHR2349博客
01-19 1618
如果ACEeditor的内置语言模式不能满足需求，用户还可以通过定义自己的语言模式来实现语法高亮。这通常涉及到编写一个描述语言语法的TM语言文件，并将其加载到编辑器中。除了内置的补全规则外，ACEeditor还支持自定义补全规则。用户可以通过扩展补全提供器来实现更智能的补全逻辑。// ... 其他补全项});除了预定义的代码片段外，用户还可以自定义代码片段，并在需要时快速插入。");',});
vue3+ts 使用vue3-ace-editor实现Json编辑器
x_nweBorder01k的博客
06-19 810
vue3+ts 使用vue3-ace-editor实现Json编辑器
使用动画曲线编辑器打造炫酷的3D可视化ACE
葡萄城技术团队博客
12-14 970
在制作3D可视化看板时，除了精细的模型结构外，炫酷的动画效果也是必不可少的。然而，在实际情况下，当我们对动画精细程度的要求不是特别高时，仍然可以借助一些外部工具来实现一些常见的动画效果，例如巡检、移动和旋转等。正常情况下，指定了动画属性值和播放模式之后，就可以点击创建 关键 key 来设定关键动画值，一方面可以在 inspector 中手动拖动网格对象，让新建key来获取指定 value, 另一方面也可以在 动画播放面板反复查看修改动画属性，制作好动画之后，就可以使用保存按钮来将制作好的动画导入了。
自然语言处理
can903154417的博客
01-23 5474
原文链接：https://github.com/fighting41love/funNLP Skip to content NLP民工的乐园 The Most Powerful NLP-Weapon Arsenal NLP民工的乐园: 几乎最全的中文NLP资源库 词库 工具包 学习资料 在入门到熟悉NLP的过程中，用到了很多github上的包，遂整理了一下，分享在这里。 很多包非常有趣，值得收藏，满足大家的收集癖！ 如果觉得有用，请分享并star，谢谢！ 长期不定时更新，欢迎watc.
Element没更新了？基于El的扩展库更新
ch123256085的专栏
03-28 1207
think-vuele 基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便于2B软件开发的一些控件 demo：http://vuele.tennetcn.com github：https://github.com/chfree/think-vuele element-ui的控件库是el+控件名的方式进行使用。tennet...
android安卓源码海量项目合集大全打包6000套-2续
热门推荐
chenhao0568的专栏
06-13 1万+
文章太长，接上一篇。 │ Android应用源码之HTMLViewer.zip │ Android应用源码之http 演示Demo.zip │ Android应用源码之http.zip │ Android应用源码之http1.zip │ Android应用源码之IA...
cad.net 利用win32api实现一个命令开关参照面板
weixin_30682415的博客
02-12 422
首先我要判断是否已经打开了参照面板. 然而cad自己没有相关的系统变量.这时我就需要利用到win32api来判断程序是否打开了参照面板了. 首先学习的是https://blog.csdn.net/bcbobo21cn/article/details/50930221这篇文章很好的说明了c#如何调用win32api,以及大家可能遇到的各种问题. 我来存一下: ...
语雀、在线文档与知识库的陈年往事
曲折旅程，艰难人生
12-11 3627
关于语雀的架构分析以及富文本编辑器研发的体会
利用Vivado进行MicroBlaze处理器应用教程
一个早起的程序员
12-04 1万+
目录 一、创建带有MicroBlaze处理器的IP设计 二、开始IP综合设计（步骤） 三、MicroBlaze配置窗口（配置窗口说明） 第一页（Welcome Page） 第二页（General） 第三页（异常） 第四页（缓存） 第五页（MMU） 第六页（调试） 第七页（总线） 四、MicroBlaze处理器的交叉触发特性 五、自定义逻辑 六、完成连接（Completing Connections） 一、创建带有MicroBlaze处理器的IP设计 使用Vivado进行Micr
基于Vue+element-ui 的Table二次封装的实现
10-18
当我们需要对表格进行定制化或者复用时，进行二次封装是常见的做法。 首先，二次封装的目标是为了提高代码的可维护性和重用性，减少重复工作。在本例中，作者创建了一个名为`com-table`的自定义组件，用于替代...
element-ui表格二次封装.zip
12-21
然而，在实际项目中，为了提高开发效率和代码复用性，开发者往往需要对原生的 Element UI 表格进行二次封装，以实现更灵活的配置和功能。"element-ui表格二次封装.zip" 就是这样一个针对 Element UI 表格组件的定制...
aceadmin tree二次封装
04-25
aceadmin tree二次封装几行代码实现一个树结构加载 var tree = $.treeView.init({ url: "<%=basePath%>/menu/selectTree.html", element: "#tree"//默认ID可以不写 });支持一次加载数据支持参数传递，具体可下载看...
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
01-21
　自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现，而不是只在 .vue文件。 1、实现toast插件封装（类似简易版的elementUi的message） 　先书写一个toast组件 ...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 724
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 308
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
最新发布
KEEP CODING
07-25 1268
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
vue3-ace-editor 配置cypher
04-04
要配置Cypher语言支持，需要使用ace编辑器的语言模型。以下是一些步骤： 1. 安装vue3-ace-editor和ace-builds库 ```shell npm install vue3-ace-editor ace-builds ``` 2. 在Vue组件中引入ace-editor和语言模型 ```vue <template> <div> <ace-editor :mode="'ace/mode/cypher'" :theme="'ace/theme/monokai'" :height="'500px'" :width="'100%'" v-model="code" ></ace-editor> </div> </template> <script> import AceEditor from 'vue3-ace-editor' import 'ace-builds/src-noconflict/mode-cypher' import 'ace-builds/src-noconflict/theme-monokai' export default { components: { AceEditor, }, data() { return { code: '', } }, } </script> ``` 3. 现在您可以在ace-editor中使用Cypher语言模型了。 ```cypher MATCH (n) RETURN n ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值