Vue_New/src/components/Editor/index.vue

<template>
  <div>
    <div :id="this.id"></div>
  </div>
</template>

<script>


  export default {
    name: 'Editor',
    props: ['id', 'r_content'],
    data() {
      return {
        ue: '', //ueditor实例
        content: '' //编辑器内容
      }
    },
    methods: {
      //初始化编辑器
      initEditor() {
        this.ue = UE.getEditor(this.id, {
          initialFrameWidth: '100%',
          initialFrameHeight: '350',
          topOffset: '110',
          toolbars: [[
            'bold', //加粗
            'underline', //下划线
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'formatmatch', //格式刷
            'fontsize', //字体大小
            'fontfamily', //字体
            'forecolor', //字体颜色
            'table',
          ]]
          // scaleEnabled: true,
        })
        //编辑器准备就绪后会触发该事件
        this.ue.addListener('ready', () => {
          //设置可以编辑
          this.ue.setEnabled()
          this.ue.setContent(this.r_content)
        })
        //编辑器内容修改时
        this.selectionchange()
      },

      //编辑器内容修改时
      selectionchange() {
        this.ue.addListener('selectionchange', () => {
          this.content = this.ue.getContent()
        })
      }

    },

    activated() {
      //初始化编辑器
      this.initEditor()
    },
    deactivated() {
      //销毁编辑器实例，使用textarea代替
      this.ue.destroy()
      //重置编辑器，可用来做多个tab使用同一个编辑器实例
      //this.ue.reset()
      //如果要使用同一个实例,请注释destroy()方法
    },

    computed: {
      // 利用计算属性返回prop里传过来的内容
      revecive: function() {
        return this.r_content
      }
    },

    watch: {
      // !!! 这里需要注意，需要一个watch来实时更新编辑器的内容
      revecive: function() {
        this.ue.setContent(this.r_content)
      }
    }
  }
</script>


<style>
  .edui-editor {
    z-index: 60 !important;
  }
  #edui_fixedlayer{
    z-index: 5000 !important;
  }
</style>