小程序富文本插件对比

场景

日常开发中由于有些服务器返回的数据是富文本，需将富文本转化成html。要求能解析各种html标签和代码块高亮。

官方组件rich-text

优点：

可视化还原度最高，基本上跟在富文本编辑器里看到的一致
全局支持class和style属性，不支持id属性。
支持图文代码块混排
支持块级元素换行
可通过引入hightlight.js实现代码高亮

缺点：

nodes属性推荐使用Array类型，不推荐使用String类型，性能会有所下降。
偶尔会把部分 font-family 设为默认字体
不支持video标签
虽然文档支持section标签，但是实际上还不支持
无法给节点添加事件，只能对此组件整体绑定事件，无法针对图片分别绑定事件
图片都会解析成原始宽高，导致图片撑宽页面。

解决方法在html中设置内联样式：style="width:100%;" 或在wxss中给img的class设置width:100% 或使用正则表达式把获取的img标签设置样式（如下）

使用：

在js中写一个方法针对rich-text不支持的一些情况做预处理

// 富文本预处理
// 在解析前先替换为它允许的标签；比如 <section> 标签
// 删除图片原来的宽高等全部样式以及其它无用属性，添加 width:100% 的样式；
// 图片路径前拼接公网地址。(不需要的话可以注释对应代码；下面的 ${config.imgHost} 表示图片公网位置，比如：https://www.example.com/uploads)
function pretreatRichText(str) {
  return str
      .replace(/\/ueditor\/net/g, `${config.imgHost}/ueditor/net`)
      .replace(/section/g, 'div')
      .replace(/<img([\s\S]*?)(src="[^"]+")[^>]+>/g, function (all, group1, group2) {
          return `<img ${group2} style="width:100%;" />`;
      });
}

let richText = '从数据接口拿到的富文本数据';
richText = pretreatRichText(richText);

在wxml中

<view class="">
    <rich-text nodes="{{ richText }}"></rich-text>
</view>

官方组件editor

优点：

富文本编辑器组件，可以对图片、文字进行编辑，需设置只读模式
多种API可以处理富文本
支持图文混排
支持section标签

缺点：

内联样式仅能设置在行内元素或块级元素上，不能同时设置（这对有复杂样式的富文本非常不友好）。
不支持节点事件绑定

使用：

在wxml中引入组件，设置为只读

<editor 
	id="editor" 
	style="height:auto;" 
	read-only="{{readOnly}}" 
	bindready="onEditorReady">
</editor>

在js中绑定事件

wx.createSelectorQuery().select('#editor').context(res =>{
  res.context.setContents({
    html: this.data.article
  })
}).exec()

wxParse

地址：github.com/icindy/wxPa…

star： 6.9k

优点：

支持video标签
可将HTML、Markdown转为微信小程序WXML
相比rich-text，wxParse把nodes变成template，这可以给节点添加事件，如点击查看图片，rich-text则无法。

缺点：

作者弃坑，已经很长时间不更新维护
在html转wxml过程中，多次调用setData()，影响性能
加载的文件多且大
数据过多需要把数据分段加载
部分嵌套过于复杂的标签会出现不能解析(输出为空)的情况。
安卓手机，解析出现错误信息，console.dir is not a function

解决方法： html2json.js文件console.dir的方法在安卓中不兼容，改为console.log或注释即可

仅适合页面中只有1个HTML或者固定参数的HTML
IOS端富文本滑动不流畅的问题

富文本展示区域的滚动条跟整体页面的滚动条有一定冲突，导致滚动条不流畅

解决方法：

在wxParse.wxss中将

view {
	word-break: break-all; overflow: auto;
}

修改为

.detail view {
  word-break: break-all;
  height: auto;
  overflow: hidden;
}

detial为wxParse解析模板的父节点

<view class='detail'>
  <template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

towxml

地址：github.com/sbfkcel/tow…

star： 923

优点：

不断维护更新
支持图文混排
支持代码高亮，且多种样式可选
支持使用API直接在小程序中转towxml数据
支持在在WePY框架中使用中使用towxml
towxml支持事件绑定，可自行根据需要为内容添加绑定事件（点击页面中的某个元素，更新当前页面内容）
支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……
渲染模版时可选是否显示loading
data属性允许从元素event.target.dataset中获取，towxml提供自定义属性，以便于自行处理交互扩展。

缺点：

使用插件限制vue数据更新时，视图不进行更新
部分嵌套过于复杂的标签会出现不能解析(输出为空)的情况。这点比 WxParse 表现得更严重。

parse

地址：

github.com/jin-yufeng/…

jin-yufeng.github.io/Parser/#/in…

star： 460

优点：

不断更新修复
可通过进入highlight.js设置代码高亮
解析公式复杂结构的效果好

缺点：

因为比较新且比较少人使用，暂时未明坑在哪

总结

优先推荐使用官方的组件rich-text，可解析复杂的富文本，可引入highlight.js实现代码高亮，可在html中设置内联样式或在wxss中给class添加样式。

微信小程序富文本插件对比

小程序富文本插件对比

场景

官方组件rich-text

官方组件editor

wxParse

towxml

parse

总结