vue2-ace-editor的基本用法

1. 引入组件

components: {
      editor: require('vue2-ace-editor'),
    },
1
2
3

2. 页面上

<editor ref="aaa" v-model="responseData" @init="editorInit" :options="options" :lang="responseDataLang"
              theme="chrome" width="100%" height="500" ></editor>
1
2

3.@init方法内

var ace = require('brace');
        require('brace/theme/chrome')
        require('brace/ext/language_tools') //language extension prerequsite...
        require('brace/mode/html')
        require('brace/mode/json')
        require('brace/snippets/json')
        require('brace/snippets/html')
        /* require('brace/mode/javascript')    //language*/
        /* require('brace/mode/less')*/
        /*  require('brace/theme/tomorrow_night.js')*/
        /*  require('brace/snippets/javascript') *///snippet*/
        let _this = this;
        _this.$refs.aaa.editor.setShowFoldWidgets(true);  
1
2
3
4
5
6
7
8
9
10
11
12
13

_this.$refs.aaa.editor.setShowFoldWidgets(true); showFoldWidgets是vue2-ace-editor里面的折叠属性，就是下图标注的这玩意哈，所有的外观显示属性设置方法基本如此了

 _this.$refs.aaa.editor.getSession().setMode('ace/mode/html');
 编辑框的mode,可以直接这样塞值，但也可以:lang="responseDataLang"直接这样动态赋值，很方便的。
1
2

突然控制台报这个错别怕，咱有解决办法，找到路径少啥咱导入啥，当前报错的json.js路径找到了，如下在@init方法里面加上require(‘brace/snippets/json’) 就okay了。

关于格式化

 不管是用的哪种模式，给编辑器赋值时预先得格式化好。
1