一、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 = “”;
<template> <div class=”hello”> <div v-for=”item in items” :key=”item.id” v-if=”first”> <p>{{item.message}}</p> <button @click=”a(item)”>回复</button> <div :id=”item.id” v-show=”item.show”></div> </div> </div></template><script>import E from “wangeditor”; //引入富文本插件export default { name: “HelloWorld”, data() { return { items: [ //原数组 { message: “Foo”, show: false, id: 1 }, { message: “Bar”, show: false, id: 2 }, ] }; }, methods: { a(i) { //循环遍历 var arr = this.items.map((item, index) => { //点击获取的id和原来的数据比较 if (item.id == i.id) { //获取富文本挂再节点 var ele = document.getElementById(item.id); //创建富文本 var editor = new E(ele); if (i.show) { item.show = false; if (ele) { //清空挂载节点 ele.innerHTML = “”; } } else { editor.create(); item.show = true; } } return item; }); //赋值 this.items = arr; }, },};</script><!– Add “scoped” attribute to limit CSS to this component only –><style scoped></style>
2.v-if实现
重点是创建需要在this.$nextTick里创建
<template> <div class=”hello”> <div v-for=”item in items” :key=”item.id” v-if=”first”> <p>{{item.message}}</p> <button @click=”a(item)”>回复</button> <div :id=”item.id” v-if=”item.show”></div> </div> </div></template><script>import E from “wangeditor”; //引入富文本插件export default { name: “HelloWorld”, data() { return { items: [ //原数组 { message: “Foo”, show: false, id: 1 }, { message: “Bar”, show: false, id: 2 }, ] }; }, methods: { a(i) { var arr = this.items.map((item, index) => { if (item.id == i.id) { if (i.show) { item.show = false; } else { item.show = true; this.$nextTick(() => { //因为v-if需要立即拿到节点这里是重点必须写到$nextTick var ele = document.getElementById(item.id); var editor = new E(ele); editor.create(); }); } } return item; }); this.items = arr; }, },};</script><!– Add “scoped” attribute to limit CSS to this component only –><style scoped></style>
可以根据你的需求来选择实现方式。
五、总结
wangEditor是一个轻量级的富文本编辑器插件，不仅能在vue中使用还可以在react/Angular中使用。并且以上方法在react中稍微变通也可以使用。
36553555
