vue封装的百度编辑器

Editor.vue

<template>
    <div>
        <script ref="editor" type="text/plain"></script>
    </div>
</template>
<script>
/*文件放在static里面*/
  import '../../../static/umeditor/umeditor.config'
  import '../../../static/umeditor/umeditor'
  import '../../../static/umeditor/lang/zh-cn/zh-cn'
  export default {
    name: 'UM',
    data () {
      return {
        id: Math.random().toString(16).substring(2) + 'umeditorId',
        editor: null
      }
    },
    props: {
      content: {
        type: String,
      },
      config: {
        type:Object
      },
      defaultMsg:{
        type: String
      }
    },
    },
    mounted() {
      this.$refs.editor.id = this.id;
      const _this = this;
      this.editor = UM.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    },
  }
</script>
<style>
/*引入css样式*/
@import "../../../static/umeditor/themes/default/css/umeditor.css";
</style>

使用方式

<template>
     <div>
          <editor :defaultMsg = defaultMsg :config=config></editor>
      </div>
</template>
<script>
  import Editor from 'Editor.vue'
  export default{
    data(){
        return{
          defaultMsg: '',
          config:'',
          
        }
    },
    components{
        Editor
      }
  }
</script>

注释：本文档只用用于借鉴，还存在一些bug