700字范文 > vue中使用wangEditor富文本编辑器（踩坑）

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

时间：2019-09-26 13:29:41

一、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><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><style scoped></style>

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