【前端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;
}
},其他页面代码和逻辑方法按照个人需求来完善即可