记录微信小程序解析富文本碰到的问题 wxParse.md

首先用法就不在这里说明了，附上github地址 https://github.com/icindy/wxParse

1.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>

2. 安卓手机，解析出现错误

错误信息，console.dir is not a function
是因为在html2json.js文件中有console.dir的方法在安卓中不兼容，将其修改为console.log即可

3. 服务端使用vue-quill-editor富文本插件编辑导致样式解析不了

使用vue-quill-editor编辑富文本，查看转换后的html内容，发现使用class来控制文本的样式的，所以在使用wxParse解析的时候需要在wxParse.wxss中将vue-quill-editor的样式引入进去。
获取vue-quill-editor的样式文件的办法

image.png
image.png

在富文本中输入文字后选用large字体，然后检查元素，会发现在标签上加了一个class为ql-size-huge，

image.png

在style窗口里可以找到css的源文件
将源文件引入到wxParse.wxss中就可以顺利解析vue-quill-editor编辑的富文本了