Vue富文本编辑器vue-trix和wangEditor爬坑指南

[heyach]

前言

---

最近项目中有需要用到富文本编辑的功能，就简单了解了一下相关内容，主要试了一下vue-trix（对trix的一个封装组件）和wangEditor的安装使用，通过实际功能的使用来对比两者的优缺点。

安装接入

都可以通过npm安装并且直接在页面中使用

npm i vue-trix -S
npm i wangeditor -S

不同的是vue-trix通过组件方式直接引入

import VueTrix form "vue-trix"
components: {
   VueTrix
}
<VueTrix></VueTrix>

而wangEditor是通过构造的方式创建编辑器

<div id="editor"></div>
import E from "wangeditor"
editor = new E("#editor")
editor.create()

两者异同点

1，菜单栏

vue-trix的菜单栏比较简洁，且没有提供配置功能（文档较少，反正我没找到）

wangeditor的菜单栏功能稍多一点，且可以通过配置方式配置想要的功能

editor.config.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
    ];

2，上传文件

vue-trix和wangeditor都需要提供后台接口来处理文件的上传
不过wangeditor只提供了上传图片的功能，根据文档要求，返回的图片url规则为

[img1Url, img2Url, ...]

会自动将图片预览到编辑器里。可以设置图片的大小和居中，图片两侧可以添加文本信息。

而trix可以上传各类文件，如果是图片可以直接预览在编辑器里，其他类型文件只显示文件名和相关信息，需要在上传返回函数里设置文件的url和href。

attachment.setAttributes({
  href: res.fullPath,
  url: res.fullPath
});

图片文件类型前后不能添加内容，其他类型文件前后可以添加文本信息。

3，编辑器v-model内容

编辑好内容后，vue-trix和wangeditor的model内容稍有区别，上传的图片处理方式，wangeditor直接通过返回的url预览图片，所以model里的内容就是img url。

<p><strike>111111111</strike></p><p><strike><br/></strike></p><p><img src="http://127.0.0.1:5000/upload/png/404.png" style="max-width:100%;"/>djlajdslajdklajdla<br/></p><p>slajldajlsdada</p>

而vue-trix对上传的文件会有一个包装，增加了一些进度条，删除等操作。

<div><del>11111</del><figure data-trix-attachment="{&quot;contentType&quot;:&quot;text/plain&quot;,&quot;filename&quot;:&quot;装机必备.txt&quot;,&quot;filesize&quot;:79,&quot;url&quot;:&quot;http://kaifa.hc-yun.com:31018/group1/M00/4C/F4/wKgCfmBPJkuAdlb8AAAAT7L2S0c246.txt&quot;}" data-trix-content-type="text/plain" class="attachment attachment--file attachment--txt"><figcaption class="attachment__caption"><span class="attachment__name">装机必备.txt</span> <span class="attachment__size">79 Bytes</span></figcaption></figure><figure data-trix-attachment="{&quot;contentType&quot;:&quot;application/vnd.ms-excel&quot;,&quot;filename&quot;:&quot;2222.xls&quot;,&quot;filesize&quot;:0,&quot;url&quot;:&quot;http://kaifa.hc-yun.com:31018/group1/M00/4C/F4/wKgCfmBPJsaAHkwfAAAAAAAAAAA118.xls&quot;}" data-trix-content-type="application/vnd.ms-excel" class="attachment attachment--file attachment--xls"><figcaption class="attachment__caption"><span class="attachment__name">2222.xls</span> <span class="attachment__size">0 Bytes</span></figcaption></figure><figure data-trix-attachment="{&quot;contentType&quot;:&quot;&quot;,&quot;filename&quot;:&quot;11111.doc&quot;,&quot;filesize&quot;:0,&quot;url&quot;:&quot;http://kaifa.hc-yun.com:31018/group1/M00/4C/F4/wKgCfmBPJsuAVHAcAAAAAAAAAAA041.doc&quot;}" data-trix-content-type="" class="attachment attachment--file attachment--doc"><figcaption class="attachment__caption"><span class="attachment__name">11111.doc</span> <span class="attachment__size">0 Bytes</span></figcaption></figure></div>