图文详解如何在Vue项目中集成Ace代码编辑器

前言

在集成Ace过程中发现网上搜到资料比较零碎，且中文资料比较少，本文主要做一些记录和整理，方便后续查阅

• 在Vue项目中集成Ace代码编辑器
• Ace配置项的中文对照
• 踩坑：解决Ace editor 光标错位问题
• 优化：按需使用ace-builds

简介

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9 IDE的主要编辑器 ，并且是 Mozilla Skywriter (Bespin) 项目的继承者。

• Ace官网
• 在线demo：ace.c9.io/build/kitch…

特性

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

快速开始

• 你也可以直接使用vue2-ace-editor，按照步骤集成即可
• 这里主要记录使用ace-builds，在项目中自己封装Ace组件

安装

npm install ace-builds --save-dev复制代码

安装完的效果如下：

集成

新建文件夹AceEditor

在AceEditor文件，新建index.vue， 代码如下：

关于webpack-resolver.js的优化

在 webpack 环境中需要导入webpack-resolver.js，我们先看下node_modules/ace-builds/webpack-resolver.js文件，里面大部分模块是我们用不到的，直接引入的话，会大大增加项目包的体积，所以这里我们需要做下优化：按需引入在AceEditor文件，新建webpack-resolver.js， 代码如下：

ace.config.setModuleUrl('ace/mode/mysql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-mysql.js')) ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js')) ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js')) ace.config.setModuleUrl('ace/theme/tomorrow', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-tomorrow.js')) ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))

在项目的src目录下，新建registAce.js

import ACE from '@/components/AceEditor' // 这里是你创建的AceEditor文件夹的路径 export default { install(Vue) { Vue.component('ace', ACE) }, }

在 Vue 项目的入口文件 main.js 中引入 Ace 模块，Vue.use()全局注册ace组件

import ace from 'ace-builds' import RegistAce from './registAce' Vue.use(ace) Vue.use(RegistAce)

使用ace组件（全局组件）

以上，就在Vue项目中完成了Ace的简单集成，更多功能可以参考官网：Ace官网

配置项

官网wiki：github.com/ajaxorg/ace…

Core ace components (editor,session,renderer,mouseHandler) implement optionProvider interface

setOption(optionName, optionValue) setOptions({ optionName : optionValue ... }) getOption(optionName) getOptions()

以下是配置选项的列表。除非另有说明，否则选项值为布尔值。

editor.setOption也会修改session/renderer/$mouseHandler与之关联的选项

editor options

renderer options

mouseHandler options

session options

editor options defined by extensions

解决光标错位问题

当在编辑器中输入内容的时候，会出现光标错位的问题，开始看起来是正常的，输入的内容越多，光标错位越多一通排查，发现是因为使用了非等宽字体，导致计算不准确，将编辑框里面的字体设置为等宽字体即可解决问题

⚠️注意：这里还有个小坑,在设置等宽字体时需要区分Mac、Windows

• Mac 下可以使用monospace字体
• Windows 下可以使用Consolas字体

参考网站 / 源码

• Ace官网
• vue2-ace-editor