1.下载
npm install vue2-ace-editor
2.引入到项目中
import editor from "vue2-ace-editor"
<editor
v-model="content"
@init="editorInit"
:options="options"
:width="width"
:height="height"
:theme="themeSet"
lang="java"
ref="myTextEditor">
</editor>
@init引用主题 语言 按需加载
editorInit() {
require("brace/theme/chrome");
require("brace/theme/solarized_light");
require("brace/ext/language_tools");
require("brace/mode/yaml");
require("brace/mode/javascript");
require("brace/mode/java");
require("brace/mode/less");
require("brace/mode/json");
require("brace/theme/tomorrow_night_blue");
require("brace/theme/monokai");
require("brace/theme/tomorrow_night_eighties");
require("brace/theme/ambiance");
require("brace/theme/tomorrow_night");
require("brace/theme/chaos");
require("brace/theme/tomorrow");
require("brace/snippets/javascript");
require("brace/snippets/java");
require("brace/ext/emmet");
require("brace/ext/searchbox");
require("brace/mode/json");
require("brace/snippets/json");
},
options: {
/*vue2-ace-editor编辑器配置自动补全等*/
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true /*自动补全*/,
wrap: true, //自动换行
},
区域宽度:width
区域高度:height
脚本使用语言:lang=“java”
一般常用操作
设置字号
this.$refs.myTextEditor.editor.setFontSize(this.size);
代码只读
this.$refs.myTextEditor.editor.setReadOnly(true);
区域适配
this.$refs.myTextEditor.editor.resize();
搜索
this.$refs.myTextEditor.editor.find();
替换
this.$refs.myTextEditor.editor.replaceAll()
跳转到某行
this.$refs.myTextEditor.editor.gotoLine()
获取总行数
this.$refs.myTextEditor.editor.session.getLength();
光标所在位置
this.$refs.myTextEditor.editor.selection.getCursor().column;
this.$refs.myTextEditor.editor.selection.getCursor().row;
监听选择事件
this.$refs.myTextEditor.editor.getSession().selection.on("changeSelection", function(e) {
...
});
获取鼠标框选内容
this.$refs.myTextEditor.editor.getSession().selection.on("changeCursor", function(e) {
_this.value = _this.editor.session.getTextRange(
_this.editor.getSelectionRange()
);
});
监听脚本改变
this.$refs.myTextEditor.editor.getSession().on("change", function(e) {
...
});
在光标处插入指定内容
this.$refs.myTextEditor.editor.insert(添加内容);
自定义高亮内容
const session = this.$refs.myTextEditor.editor.session;
session.setMode('ace/mode/java', function () {
const rules = session.$mode.$highlightRules.getRules();
for (const stateName in rules) {
//regex 匹配文字 也可以是正则表达式
//token 为满足条件的添加class名字
rules[stateName].unshift({
token: 'transaction',
regex: 'jl_start_transaction',
});
}
session.$mode.$tokenizer = null;
session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
session.bgTokenizer.start(0);
});
//css
.ace_transaction{
//此处设置你高亮文字的颜色
}