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组件

    

3. 使用方式： 

 

第二个问题：使用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"属性