vue中使用vue2-ace-editor

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{
    //此处设置你高亮文字的颜色
}