vue中使用wangEditor富文本编辑器（踩坑）

一、wangEditor介绍及使用

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

• 官网：www.wangEditor.com
• 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
• 源码：github.com/wangfupeng1988/wangEditor 

 

下载

• 直接下载：https://github.com/wangfupeng1988/wangEditor/releases
• 使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母）
• 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
• 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

使用

二、vue中使用

1.npm install wangeditor （注意 wangeditor 全部是小写字母）

2.引入import E from "wangeditor"; //引入富文本插件

3.创建实例

var editor = new E('#editor')
// 或者 var editor = new E(document.getElementById('editor'))
//事实上传入类名也是可以的var editor = new E(document.getElementsByClassName(editor))
//应该document.getElement开头的都可以但是一般没人这么干
 editor.create()

new E()传入挂载的地方

create（）创建

一个页面有多个

 var editor1 = new E('#div1', '#div2')
 editor1.create()

更多说明以及API请看wangEditor官方文档

三、踩坑即报错

1.可能会遇到的报错

这个错说明你实例要挂载的dom还不存在

2.当你需要让这个富文本显示与隐藏（v-show）时可能会存在创建多个实例

其实这个只需要清除让当前挂载元素的innerHtml清空即可。 

四、循环创建富文本以及多个富文本实例叠加解决方案

场景：比如评论列表点击回复出在下面出现一个富文本框

1.如果使用v-show来实现

重点是要清除

 ele.innerHTML = "";

2.v-if实现

重点是创建需要在this.$nextTick里创建

可以根据你的需求来选择实现方式。

五、总结

wangEditor是一个轻量级的富文本编辑器插件，不仅能在vue中使用还可以在react/Angular中使用。并且以上方法在react中稍微变通也可以使用。