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

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