怎么在Vue项目中集成Ace代码编辑器

简介

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

特性

• 超过 110 种语言的语法高亮显示（可以导入TextMate/Sublime Text .tmlanguage文件）

• 超过 20 个主题（可以导入TextMate/Sublime Text .tmtheme文件）

• 自动缩进和升级

• 一个可选的命令行

• 处理巨大的文档（四百万行似乎是极限！）

• 完全可定制的键绑定，包括 vim 和 Emacs 模式

• 使用正则表达式搜索和替换

• 突出显示匹配的括号

• 在软选项卡和真实选项卡之间切换

• 显示隐藏字符

• 使用鼠标拖放文本

• 换行

• 代码折叠

• 多个光标和选择

• 实时语法检查器（当前为 JavaScript/CoffeeScript/CSS/XQuery）

• 剪切、复制和粘贴功能

快速开始

• 你也可以直接使用vue2-ace-editor ，按照步骤集成即可

• 这里主要记录使用ace-builds，在项目中自己封装Ace组件

安装

npminstallace-builds--save-dev复制代码

安装完的效果如下：

集成

新建文件夹AceEditor

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

template>
    
div
ref="editorform"

style="height:250px"
>
    
/div>
    
/template>
    

script>

importacefrom'ace-builds'
import'./webpack-resolver'//自定义webpack-resolver，按需引入
import'ace-builds/src-noconflict/mode-json'
import'ace-builds/src-noconflict/mode-mysql'
import'ace-builds/src-noconflict/mode-text'
import'ace-builds/src-noconflict/theme-tomorrow'
import'ace-builds/src-min-noconflict/ext-language_tools'
import{
onMounted,onBeforeUnmount,ref,watch}
from'@vue/composition-api'

exportdefault{

name:'AceEditor',
emits:['onChange'],
props:{

value:{

type:String,
default:'',
}
,
//这里可以接收更多组件传递的参数，做一些自定义效果
}
,
setup(props,vm){

leteditor=null
consteditorform=ref(null)
letoptions={

theme:'ace/theme/tomorrow',//主题
mode:'ace/mode/mysql',//代码匹配模式
tabSize:2,//标签大小
fontSize:14,//设置字号
wrap:true,//用户输入的sql语句，自动换行
enableSnippets:true,//启用代码段
showLineNumbers:true,//显示行号
enableLiveAutocompletion:true,//启用实时自动完成功能（比如：智能代码提示）
enableBasicAutocompletion:true,//启用基本自动完成功能
scrollPastEnd:true,//滚动位置
highlightActiveLine:true,//高亮当前行
}
    

constinit=()=>
{

if(editor){

//实例销毁
editor.destroy()
}
    
//初始化
editor=ace.edit(editorform.value,options)
editor.setValue(props.value?props.value:'')//设置内容
editor.on('change',()=>
{

vm.emit('onChange',editor.getValue())
}
)
}
    

onMounted(()=>
{

init()
}
    )

onBeforeUnmount(()=>
{

editor.destroy()
editor.container.remove()
}
)
return{

editorform
}

}
,
}
    
/script>
    

style>
    
@import'~ace-builds/css/ace.css';
    
/style>
    

关于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

importACEfrom'@/components/AceEditor'//这里是你创建的AceEditor文件夹的路径

exportdefault{

install(Vue){

Vue.component('ace',ACE)
}
,
}
    

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

importacefrom'ace-builds'
importRegistAcefrom'./registAce'

Vue.use(ace)
Vue.use(RegistAce)

使用ace组件（全局组件）

acev-model="content"@onChange="onChange">
    /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 字体

关于“怎么在Vue项目中集成Ace代码编辑器”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！