vue+element+Ueditor部署百度富文本框的那些坑

前言：这段时间在用Ueditor富文本编辑器，出现了一些坑，在网上找了很多，都没怎么解决，主要问题是将Ueditor封装成组件后，放在element-ui的el-dialog里时，内容写不进去，原因大概就是组件没有加载完成，就调用了方法，用了this.$nextTick()同样报错，后来用了感觉最笨的方法setTimeout虽然可以解决，但感觉不太好，后来重新封装了一下，大概思路就是等待组件加载完成将组件传过来，然后直接调用方法将内容set进去。

 

1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹，里面包含的内容如下：

使用vue-cli构建项目的话通常都是把外部插件放到static文件夹中，所以目录就会呈现如下：

2、配置Ueditor.config.js主要的还是

···var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';···

其他的配置大可看看官方文档设置一下，常用的默认宽高、默认功能按钮、层级(zIndex,我就遇到过这个坑。。)

1. 创建components，在main.js引入ueditor的主要文件

   //百度富文本框
   import '../static/ueditor-1.4.3.3/ueditor.config.js'
   import '../static/ueditor-1.4.3.3/ueditor.all.js'
   import '../static/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js'

    

2. 在components中创建基础的vue组件模板，封装ueditor组件

   <template>
     <div>
       <!--下面通过传递进来的id完成初始化-->
       <script :id="randomId" type="text/plain"></script>
     </div>
   </template>
   
   <script>
   export default {
     name: "UE",
     props: {
       value: {
         default: function() {
           return "";
         }
       },
       //配置可以传递进来
       ueditorConfig: {}
     },
     data() {
       return {
         //每个编辑器生成不同的id,以防止冲突
         randomId: "editor_" + Math.random() * 100000000000000000,
         //编辑器实例
         instance: null,
         ready: false
       };
     },
     watch: {
       value: function(val, oldVal) {
         if (val != null && this.ready) {
           this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
           this.instance.setContent(val);
         }
       }
     },
     //此时--el挂载到实例上去了,可以初始化对应的编辑器了
     mounted() {
       this.initEditor();
     },
   
     beforeDestroy() {
       // 组件销毁的时候，要销毁 UEditor 实例
       if (this.instance !== null && this.instance.destroy) {
         this.instance.destroy();
       }
     },
     methods: {
       initEditor() {
         const _this = this;
         //dom元素已经挂载上去了
         this.$nextTick(() => {
           this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
           // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
           this.instance.addListener("ready", () => {
             this.ready = true;
             this.$emit("ready", this.instance);
           });
         });
       },
       getUEContent() { // 获取内容方法
           return this.instance.getContent()
       },
       setText(con) {
         this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
         this.instance.setContent(con);
       }
     }
   };
   </script>

    

3. 使用方式： 

<template>
    <div class="box-container">
        <Ueditor @ready="editorReady" ref="ue" :value="defaultMSG" :ueditorConfig="config" style="width:100%;"></Ueditor>
    </div>
</template>
<script>
    import Ueditor from '@/components/Ueditor';
    export default {
        data() {
          return {
            defaultMSG: null,
            form: {
                content: ''
            },
            config: {
                initialFrameHeight: 500
            }
          };
        },
        created() {
            this.getInfo();
        },
        components: {
            Ueditor
        },
        methods: {
            getInfo() {
                getCategoryInfo(this.form.cateId).then(res => {
                    if (res.message =='SUCCESS') {
                        this.form = Object.assign({}, res.data);
                        this.defaultMSG = this.form.content;
                    } else {
                        this.$message({
                          message: res.message,
                          type: 'error',
                          duration: 5 * 1000
                        });
                    }
                })
            },

            editorReady(instance) {
                instance.setContent(this.form.content);
                instance.addListener('contentChange', () => {
                    this.form.content = instance.getContent();
                });
            },

        }
    }
</script>
<style scoped lang="scss">
    
</style>

 

第二个问题：使用watch添加默认值的时候，在watch触发时，ueditor却还没有ready，会导致报错，各种奇葩的错，所以呢， 

添加一个ready属性，在initEditor的时候监听ready事件，在其中赋值 this.ready = true;就可以避免那些乱七八糟的错误了。

第三个问题：在一个没有默认值的时候，需要清空content的内容时，设置defaultMSG为空是不行的，如下效果，要再切换时清空content。

这时候就要用到我们在组件内添加的setText method了，使用的是vue的$refs.组件ref名来获取组件实例，并可以使用methods中的方法

this.$refs.ue.setText(''); //ue是父级在组件上加的 ref="ue"属性