【前端Vue】如何优雅地在vue中引入ace-editor编辑器 - 指南

首先附上两个网址：

ace官网

ace官方在线demo

​

首先在项目代码中找到你需要嵌入ace插件的部分，加入以下部分：

 editorContent = val"
width="100%"
height="100%"
:lang="editorMode"
theme="chrome"
:options="editorOptions"
>

也可以这样写：

使用v-if来控制该插件是否显示，使用布尔值实现控制

:value需要搭配@input一起使用，手动实现双向绑定，通过 value 属性传递值，并通过 @input 事件更新值，

:value="editorContent" 将编辑器的内容绑定到组件的 editorContent 数据属性上，@input="val => editorContent = val" 监听输入事件，当用户输入时将新值赋给 editorContent，实现数据的实时更新

当然也可以使用vue中的语法糖v-model，使用v-model可以直接实现数据的双向绑定，代码会更简洁易维护

mode是编辑器模式，如果不需要设置:lang动态绑定来根据文件类型动态设置编辑器模式，就可以直接用mode指定一个编辑器模式，mode和:lang只需要存在一个即可

width和height是宽度和高度，这里设置为100%，可以根据实际情况设置或在其他地方设置样式

theme是编辑器主题不同主题拥有不同配色风格，可以按需选择，查看所有主题

https://github.com/ajaxorg/ace/tree/master/src/theme
以下是brace引入方式下比较常用的主题：

• chrome
• clouds
• crimson_editor
• dawn
• dreamweaver
• eclipse
• github
• iplastic
• solarized_light
• textmate
• tomorrow
• xcode
• kuroir
• katzenmilch
• sqlserver
• ambiance
• chaos
• clouds_midnight
• dracula
• cobalt
• gruvbox
• gob
• idle_fingers
• kr_theme
• merbivore
• merbivore_soft
• mono_industrial
• monokai
• pastel_on_dark
• solarized_dark
• terminal
• tomorrow_night
• tomorrow_night_blue
• tomorrow_night_bright
• tomorrow_night_eighties
• twilight
• vibrant_ink

随后对ace-editor插件相关的模块进行引入并在data中进行插件配置：

import 'brace'; //必须引入，否则无法引入编辑器模式和主题
import 'brace/mode/javascript'; //JavaScript编辑器模式，按需引入
import 'brace/mode/python'; //Python编辑器模式，按需引入
import 'brace/mode/sh'; //sh编辑器模式，按需引入
import 'brace/theme/chrome'; //编辑器主题
import AceEditor from 'vue2-ace-editor'; //插件模块，必须引入

引入要记得用npm安装下：

npm install brace vue2-ace-editor --save

也可以使用ace-builds方式引入，使用该方式引入可以使用更多预设主题：

引入要记得用npm安装下：

npm install ace-builds --save-dev

安装完的效果，可以看到有 4 个版本 ACE，分别是 src、src-min、src-min-noconflict、src-noconflict，这里统一使用最后一个，即 src-noconflict 版本，也就是前面import引入的路径：

​

export default {
name: '',
components: {
AceEditor
},
data() {
return {
editorOptions: {
//ace-editor插件配置项
},
editorVisible: false,  // 控制编辑器弹窗显示
editorContent: '',     // 编辑器内容
editingFile: null,     // 当前编辑的文件
editorMode: 'text',    // 编辑器模式
}
}
}

editorOptions是你引入插件的其中一类配置项，可以配置的内容如下：

• editor options

选项名	值类型	默认值	可选值	功能
selectionStyle	String	text	line | text	选中样式
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace | slim | smooth | wide	光标样式
mergeUndoDeltas	String | Boolean	false	always	合并撤销
behavioursEnabled	Boolean	true	-	启用行为
wrapBehavioursEnabled	Boolean	true	-	启用换行
autoScrollEditorIntoView	Boolean	false	-	启用滚动
copyWithEmptySelection	Boolean	true	-	复制空格
useSoftTabs	Boolean	false	-	使用软标签
navigateWithinSoftTabs	Boolean	false	-	软标签跳转
enableMultiselect	Boolean	false	-	选中多处

• renderer options

选项名	值类型	默认值	可选值	功能
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean	true	-	显示打印边距
printMarginColumn	Number	80	-	设置页边距
printMargin	Boolean | Number	false	-	显示并设置页边距
fadeFoldWidgets	Boolean	false	-	淡入折叠部件
showFoldWidgets	Boolean	true	-	显示折叠部件
showLineNumbers	Boolean	true	-	显示行号
showGutter	Boolean	true	-	显示行号区域
displayIndentGuides	Boolean	true	-	显示参考线
fontSize	Number | String	inherit	-	设置字号
fontFamily	String	inherit		设置字体
maxLines	Number	-	-	至多行数
minLines	Number	-	-	至少行数
scrollPastEnd	Boolean | Number	0	-	滚动位置
fixedWidthGutter	Boolean	false	-	固定行号区域宽度
theme	String	-	-	主题引用路径，例如"ace/theme/textmate"

• mouseHandler options

选项名	值类型	默认值	可选值	备注
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示

• session options

选项名	值类型	默认值	可选值	备注
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto | unix | windows	新开行模式
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin | markbeginend | manual	折叠样式
mode	String	-	-	代码匹配模式，例如“ace/mode/text"

• editor options defined by extensions

选项名	值类型	默认值	可选值	备注
enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
enableSnippets	Boolean	-	-	启用代码段
enableEmmet	Boolean	-	-	启用Emmet
useElasticTabstops	Boolean	-	-	使用弹性制表位

我没做什么配置，打开Python文件的chrome主题效果如下：

​

想要实现图中效果还要继续完善method方法部分的代码：

// 编辑文件方法
editFile() {
//可以加入判断文件是否可编辑的方法
const file = this.selectFiles[0];
this.editingFile = file;
// 根据文件扩展名设置编辑器模式
const ext = file.name.split('.').pop().toLowerCase();
const modeMap = { //按需引入，不需要用到的模式不需要写，这里是举例
'js': 'javascript',
'json': 'json',
'html': 'html',
'css': 'css',
'md': 'markdown',
'xml': 'xml',
'java': 'java',
'py': 'python',
'cpp': 'c_cpp',
'c': 'c_cpp',
'h': 'c_cpp',
'sh': 'sh',
'yaml': 'yaml',
'yml': 'yaml'
};
this.editorMode = modeMap[ext] || 'text';
// 获取文件内容
this.loadFileContent(file.absolutePath);
},
// 加载文件内容方法
async loadFileContent(filePath) {
this.loading = true;
try {
const response = await getFileContent(filePath);//按实际情况对接后端接口
this.editorContent = response.data || '';
this.editorVisible = true;
} catch (error) {
this.$message.error('加载文件内容失败: ' + error.message);
} finally {
this.loading = false;
}
},

其他页面代码和逻辑方法按照个人需求来完善即可