1. 引入组件
components: {
editor: require('vue2-ace-editor'),
},
2. 页面上
<editor ref="aaa" v-model="responseData" @init="editorInit" :options="options" :lang="responseDataLang"
theme="chrome" width="100%" height="500" ></editor>
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);
_this.$refs.aaa.editor.setShowFoldWidgets(true); showFoldWidgets是vue2-ace-editor里面的折叠属性,就是下图标注的这玩意哈,所有的外观显示属性设置方法基本如此了
_this.$refs.aaa.editor.getSession().setMode('ace/mode/html');
编辑框的mode,可以直接这样塞值,但也可以:lang="responseDataLang"直接这样动态赋值,很方便的。
突然控制台报这个错别怕,咱有解决办法,找到路径少啥咱导入啥,当前报错的json.js路径找到了,如下在@init方法里面加上require(‘brace/snippets/json’) 就okay了。
关于格式化
不管是用的哪种模式,给编辑器赋值时预先得格式化好。