Vue2 集成ace-editor实现代码编辑
vue2 集成 ace-editor
·
1024刚刚过去,祝各位程序猿节日愉快呀(虽然我们公司毛活动都没搞…)
参考文章:
1. 插件选取
实现代码编辑的插件有很多,code-mirror
,ace-editor
等。最终选择了ace-editor
。
引入ace-editor
的方式大致有三种:
- 从github下载build好的js,静态引入到项目中。这个我尝试了,但是require插件js的时候一直提示找不到,加上都用vue了还采用这种方式,感觉有点low,该方案就放弃了。
- 使用 vue2-ace-editor
引入方式:
npm install --save-dev vue2-ace-editor
项目的@babel/core
版本与他要求的不一样,安装后项目运行出错,最后也没采用。 - 使用 ace-builds
引入方式:
npm install ace-builds
2. 具体实现
2.1 初始化
<template>
<div class="container">
<div ref="ace" class="ace-editor"></div>
</div>
</template>
<script>
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
// 根据自己的需求按需引入
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/theme-dracula' // 主题
import 'ace-builds/src-noconflict/mode-html' // 语言模式
import 'ace-builds/src-noconflict/snippets/html' //代码提示
export default {
name: 'ace-editor',
data() {
return {
aceEditor: null
}
},
methods: {
initEditor() {
// 初始化
this.aceEditor = ace.edit(this.$refs.ace, {
maxLines: 20, // 最大行数,超过会自动出现滚动条
minLines: 20, // 最小行数,还未到最大行数时,编辑器会自动伸缩大小
fontSize: 14, // 编辑器内字体大小
theme: 'ace/theme/dracula', // 主题
mode: 'ace/mode/html', // 默认设置的语言模式
tabSize: 4, // 制表符设置为 4 个空格大小
})
}
}
</script>
2.2 常用方法
1. 代码提示
this.aceEditor.setOptions({
enableSnippets: true,
enableLiveAutocompletion: true,
enableBasicAutocompletion: true
})
2. 编辑器只读
this.aceEditor.setReadOnly(true)
3. 隐藏打印线
this.aceEditor.setShowPrintMargin(false);
隐藏前:
隐藏后:
4. 编辑器内容相关
- 编辑器内容变化的事件
- 获取编辑器内容
- 设置编辑器内容
// 内容变化的事件:
initEditor(){
this.aceEditor.getSession().on('change', this.change)
},
change () {
// 获取编辑器的内容
this.$emit('input', this.aceEditor.getSession().getValue())
},
setValue(value){
//设置编辑器内容
this.aceEditor.setValue(value)
},
须知少时凌云志,曾许人间第一流。
—— 清·吴庆坻
更多推荐
已为社区贡献5条内容
所有评论(0)