一、wangEditor介绍及使用
wangEditor—— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。
官网:/文档:/wangfupeng/wangeditor3/332599源码:/wangfupeng1988/wangEditor
下载
直接下载:Releases · wangeditor-team/wangEditor · GitHub使用npm
下载:npm install wangeditor
(注意wangeditor
全部是小写字母)使用bower
下载:bower install wangEditor
(前提保证电脑已安装了bower
)使用CDN:///wangeditor/release/wangEditor.min.js使用
二、vue中使用
1.npm install wangeditor
(注意wangeditor
全部是小写字母)
2.引入importEfrom"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需要立即拿到节点这里是重点必须写到$nextTickvar 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中稍微变通也可以使用。
其它 还有 富文本 编辑器 :
vue-quill-editor
/liuwave/quill/1409423/liuwave/quill/1409423
TinyMCE
http://tinymce.ax-/http://tinymce.ax-/