一、wangEditor介绍及使用
wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。
- 官网:https://www.wangeditor.com/
- 文档:www.kancloud.cn/wangfupeng/wangeditor3/332599
- 源码:github.com/wangfupeng1988/wangEditor
下载
- 直接下载:Releases · wangeditor-team/wangEditor · GitHub
- 使用
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中稍微变通也可以使用。
其它 还有 富文本 编辑器 :
vue-quill-editor
https://www.kancloud.cn/liuwave/quill/1409423https://www.kancloud.cn/liuwave/quill/1409423
TinyMCE
http://tinymce.ax-z.cn/http://tinymce.ax-z.cn/