| 图文详解如何在Vue项目中集成Ace代码编辑器 | 您所在的位置：网站首页 › emacs设置中文 › 图文详解如何在Vue项目中集成Ace代码编辑器 |
图文详解如何在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， 代码如下： import ace from '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' export default { name: 'AceEditor', emits: ['onChange'], props: { value: { type: String, default: '', }, // 这里可以接收更多组件传递的参数，做一些自定义效果 }, setup(props, vm) { let editor = null const editorform = ref(null) let options = { 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, // 高亮当前行 } const init = () => { 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 } }, } @import '~ace-builds/css/ace.css'; 登录后复制关于webpack-resolver.js的优化 在 webpack 环境中需要导入webpack-resolver.js，我们先看下node_modules/ace-builds/webpack-resolver.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选项名值类型默认值可选值功能selectionStyleStringtextline | text选中样式highlightActiveLineBooleantrue-高亮当前行highlightSelectedWordBooleantrue-高亮选中文本readOnlyBooleanfalse-是否只读cursorStyleStringaceace | slim | smooth | wide光标样式mergeUndoDeltasString | Booleanfalsealways合并撤销behavioursEnabledBooleantrue-启用行为wrapBehavioursEnabledBooleantrue-启用换行autoScrollEditorIntoViewBooleanfalse-启用滚动copyWithEmptySelectionBooleantrue-复制空格useSoftTabsBooleanfalse-使用软标签navigateWithinSoftTabsBooleanfalse-软标签跳转enableMultiselectBooleanfalse-选中多处renderer options选项名值类型默认值可选值功能hScrollBarAlwaysVisibleBooleanfalse-纵向滚动条始终可见vScrollBarAlwaysVisibleBooleanfalse-横向滚动条始终可见highlightGutterLineBooleantrue-高亮边线animatedScrollBooleanfalse-滚动动画showInvisiblesBooleanfalse-显示不可见字符showPrintMarginBooleantrue-显示打印边距printMarginColumnNumber80-设置页边距printMarginBoolean | Numberfalse-显示并设置页边距fadeFoldWidgetsBooleanfalse-淡入折叠部件showFoldWidgetsBooleantrue-显示折叠部件showLineNumbersBooleantrue-显示行号showGutterBooleantrue-显示行号区域displayIndentGuidesBooleantrue-显示参考线fontSizeNumber | Stringinherit-设置字号fontFamilyStringinherit设置字体maxLinesNumber--至多行数minLinesNumber--至少行数scrollPastEndBoolean | Number0-滚动位置fixedWidthGutterBooleanfalse-固定行号区域宽度themeString--主题引用路径，例如"ace/theme/textmate"mouseHandler options选项名值类型默认值可选值备注scrollSpeedNumber--滚动速度dragDelayNumber--拖拽延时dragEnabledBooleantrue-是否启用拖动focusTimoutNumber--聚焦超时tooltipFollowsMouseBooleanfalse-鼠标提示session options选项名值类型默认值可选值备注firstLineNumberNumber1-起始行号overwriteBoolean--重做newLineModeStringautoauto | unix | windows新开行模式useWorkerBoolean--使用辅助对象useSoftTabsBoolean--使用软标签tabSizeNumber--标签大小wrapBoolean--换行foldStyleString-markbegin | markbeginend | manual折叠样式modeString--代码匹配模式，例如“ace/mode/text"editor options defined by extensions选项名值类型默认值可选值备注enableBasicAutocompletionBoolean--启用基本自动完成enableLiveAutocompletionBoolean--启用实时自动完成enableSnippetsBoolean--启用代码段enableEmmetBoolean--启用EmmetuseElasticTabstopsBoolean--使用弹性制表位解决光标错位问题当在编辑器中输入内容的时候，会出现光标错位的问题，开始看起来是正常的，输入的内容越多，光标错位越多 ⚠️注意：这里还有个小坑,在设置等宽字体时需要区分Mac、Windows Mac 下可以使用monospace字体Windows 下可以使用 Consolas 字体参考网站 / 源码Ace官网vue2-ace-editor |
在AceEditor文件，新建webpack-resolver.js， 代码如下：
一通排查，发现是因为使用了非等宽字体，导致计算不准确，将编辑框里面的字体设置为等宽字体即可解决问题【本文地址】
公司简介
联系我们