vue 使用ace编辑器

1、引入
"vue2-ace-editor": "^0.0.15",

2、实例代码
<template>
  <!--    <editor v-model="content" @init="editorInit" lang="html" style="min-height: 88vh;overflow:scroll" :options="options"
              theme="chrome"/>-->
  <editor v-model="content" @init="editorInit" lang="text" style="overflow:scroll" :options="options"
          theme="chrome"/>
</template>

<script>
import {decode} from 'js-base64';

export default {
  components: {
    editor: require('vue2-ace-editor')
  },
  props: {
    fileId: {type: String},
    filePath: {type: String},
    data: {type: String}
  },
  data() {
    return {
      content: '', options: {
        // enableBasicAutocompletion: true, // 启用基本自动完成
        // enableSnippets: true, // 启用代码段
        // enableLiveAutocompletion: true, // 启用实时自动完成
        printMargin: false,//显示设置页边距
        printMarginColumn: 30,//设置页边距
        showPrintMargin: false, //去除编辑器里的竖线
        highlightGutterLine: false,//高亮边线
        // displayIndentGuides: false, // 显示参考线
        enableEmmet: true, // 启用Emmet
        tabSize: 6, // 标签大小
        fontSize: 14, // 设置字号
        useWorker: true, // 使用辅助对象
        enableMultiselect: true, //     选中多处
        readOnly: true, // 是否只读
        showFoldWidgets: true, // 显示折叠部件
        fadeFoldWidgets: true, // 淡入折叠部件
        wrap: true, //换行
        animatedScroll: true//滚动动画
      }
    }
  },
  methods: {
    $init() {
      if (this.data === undefined) {
        this.getXml()
      } else {
        this.content = this.data
      }
    },
    editorInit: function () {
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/html')
      require('brace/mode/javascript')    //language
      require('brace/mode/less')
      require('brace/theme/chrome')
      require('brace/snippets/javascript') //snippet
    },
    async getXml() {
      const {data} = await this.$http.post('fileView/getXml', {
        fileId: this.fileId,
        filePath: this.filePath,
      })
      if (data.success) {
        this.content = decode(data.data)
      }
    }
  },
  computed: {
    listenChange() {
      const {fileId, filePath} = this
      return {fileId, filePath}
    },
  },
  watch: {
    listenChange() {
      this.getXml()
    }
  }
}
</script>
<style scoped>
</style>

3、引用组件

<ace v-else-if="fileType==='xmlType'" style="height: 100%;width: 100%"
     :fileId="`${currentNode.data}`" :filePath="`${currentNode.id}`"/>

或者

<ace :data="data"/>