安装

• npm install --save-dev vue2-ace-editor

引用

components: {
      // eslint-disable-next-line vue/no-unused-components
      editor: require('vue2-ace-editor')
    },

html

 <editor v-model="bodyRequestTable[0].reqDesc" @init="editorInit" lang="json"
 :options= editorOptions theme="chrome" width="100%" height="200"></editor>

插件配置

data() {
	return {
		editorOptions: {  // 设置代码编辑器的样式
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 2,
          fontSize: 20,
          showPrintMargin: false   //去除编辑器里的竖线
        }
	}
},
methods: {
      editorInit: function() {
        require('brace/theme/chrome')
        require('brace/ext/language_tools') //language extension prerequsite...
        require('brace/mode/yaml')
        require('brace/mode/json')
        require('brace/mode/less')
        require('brace/snippets/json')
      }
}

关于格式化

• 后端常常传过来的是一串JSON字符串,vue2-ace-editor中不管什么模式都无法帮你格式化代码，所以需要使用JS代码将字符串提前格式化。
• 格式化前的效果：
• 格式化代码：
  jsonText = JSON.stringify(jsonStr, null, 2)
• 格式化后效果: