jin-yufeng / mp-html

小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用

mp-html

一个强大的小程序富文本组件

功能介绍

• 支持在多个主流的小程序平台和 uni-app 中使用
• 支持丰富的标签（包括 table、video、svg 等）
• 支持丰富的事件效果（自动预览图片、链接处理等）
• 支持设置占位图（加载中、出错时、预览时）
• 支持锚点跳转、长按复制等丰富功能
• 支持大部分 html 实体
• 丰富的插件（关键词搜索、内容编辑、latex 公式等）
• 效率高、容错性强且轻量化（≈25KB，9KB gzipped）

查看 功能介绍 了解更多

使用方法

原生平台

• npm 方式

  1. 在项目目录下安装组件包

     npm install mp-html

  2. 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm

  3. 在需要使用页面的 json 文件中添加

     {
       "usingComponents": {
         "mp-html": "mp-html"
       }
     }

  4. 在需要使用页面的 wxml 文件中添加

     <mp-html content="{{html}}" />

  5. 在需要使用页面的 js 文件中添加

     Page({
       onLoad () {
         this.setData({
           html: '<div>Hello World!</div>'
         })
       }
     })

• 源码方式

  1. 将源码中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html

  2. 在需要使用页面的 json 文件中添加

     {
       "usingComponents": {
         "mp-html": "/components/mp-html/index"
       }
     }

  后续步骤同上

查看 快速开始 了解更多

uni-app

• 源码方式

  1. 将源码中 dist/uni-app 内的内容拷贝到项目根目录下
     可以直接通过 插件市场 引入

  2. 在需要使用页面的 vue 文件中添加

     <template>
       <view>
         <mp-html :content="html" />
       </view>
     </template>
     <script>
       import mpHtml from '@/components/mp-html/mp-html'
       export default {
         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
         components: {
           mpHtml
         },
         data () {
           return {
             html: '<div>Hello World!</div>'
           }
         }
       }
     </script>

• npm 方式

  1. 在项目目录下安装组件包

     npm install mp-html

  2. 在需要使用页面的 vue 文件中添加

     <template>
       <view>
         <mp-html :content="html" />
       </view>
     </template>
     <script>
       import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
       export default {
         // 不可省略
         components: {
           mpHtml
         },
         data () {
           return {
             html: '<div>Hello World!</div>'
           }
         }
       }
     </script>

  使用 cli 方式运行的项目，通过 npm 方式引入时，需要在 vue.config.js 中配置 transpileDependencies，详情可见 #330
  如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行

查看 快速开始 了解更多

组件属性

属性	类型	默认值	说明
container-style	String		容器的样式（2.1.0+）
content	String		用于渲染的 html 字符串
copy-link	Boolean	true	是否允许外部链接被点击时自动复制
domain	String		主域名（用于链接拼接）
error-img	String		图片出错时的占位图链接
lazy-load	Boolean	false	是否开启图片懒加载
loading-img	String		图片加载过程中的占位图链接
pause-video	Boolean	true	是否在播放一个视频时自动暂停其他视频
preview-img	Boolean	true	是否允许图片被点击时自动预览
scroll-table	Boolean	false	是否给每个表格添加一个滚动层使其能单独横向滚动
selectable	Boolean	false	是否开启文本长按复制
set-title	Boolean	true	是否将 title 标签的内容设置到页面标题
show-img-menu	Boolean	true	是否允许图片被长按时显示菜单
tag-style	Object		设置标签的默认样式
use-anchor	Boolean	false	是否使用锚点链接

查看 属性 了解更多

组件事件

名称	触发时机
load	dom 树加载完毕时
ready	图片加载完毕时
error	发生渲染错误时
imgtap	图片被点击时
linktap	链接被点击时

查看 事件 了解更多

api

组件实例上提供了一些 api 方法可供调用

名称	作用
in	将锚点跳转的范围限定在一个 scroll-view 内
navigateTo	锚点跳转
getText	获取文本内容
getRect	获取富文本内容的位置和大小
setContent	设置富文本内容
imgList	获取所有图片的数组
pauseMedia	暂停播放音视频（2.2.2+）
setPlaybackRate	设置音视频播放速率（2.4.0+）

查看 api 了解更多

插件扩展

除基本功能外，本组件还提供了丰富的扩展，可按照需要选用

名称	作用
audio	音乐播放器
editable	富文本编辑
emoji	解析 emoji
highlight	代码块高亮显示
markdown	渲染 markdown
search	关键词搜索
style	匹配 style 标签中的样式
txv-video	使用腾讯视频
img-cache	图片缓存 by @PentaTea
latex	渲染 latex 公式 by @Zeng-J
card	卡片展示 by @whoooami

查看 插件 了解更多

使用案例

官方示例	欢喜商城	多么生活	食法查	微慕	古典文学名著阅读

科学复习	程序员技术之旅	典典博客	优秀笔记	365 刷题	同城共享书

技术源 share	你的代码写的真棒	谛否	小莫唐尼	模版演示	AI瓦力

以上排名不分先后，更多可见 使用案例收集（欢迎添加）

许可与支持

• 许可
  您可以免费的使用（包括商用）、复制或修改本组件 MIT License
  在用于生产环境前务必经过充分测试，由插件 bug 带来的损失概不负责（可以自行修改源码）

• 联系
  欢迎加入 QQ 交流群：
  群1（已满）：699734691
  群2（已满）：778239129
  群3：960265313
  

• 支持
  

更新日志

• v2.5.0 (20240422)

  1. U play 事件增加返回 src 等信息 详细
  2. U preview-img 属性支持设置为 all 开启 base64 图片预览 详细
  3. U editable 插件增加简易模式（点击文字直接编辑）
  4. U latex 插件支持块级公式 详细
  5. F 修复了表格部分情况下背景丢失的问题 详细
  6. F 修复了部分 svg 无法显示的问题 详细
  7. F 修复了 uni-app 包 h5 和 app 端部分情况下样式无法识别的问题 详细
  8. F 修复了 latex 插件部分情况下显示不正确的问题 详细
  9. F 修复了 editable 插件表格无法删除的问题
  10. F 修复了 editable 插件 uni-app 包 vue3 h5 端点击图片报错的问题
  11. F 修复了 editable 插件 uni-app 包点击表格没有菜单栏的问题

• v2.4.3 (20240121)

  1. A 增加 card 插件 详细 by @whoooami
  2. F 修复了 svg 中包含 foreignobject 可能不显示的问题 详细
  3. F 修复了合并单元格的表格部分情况下显示不正确的问题 详细
  4. F 修复了 img 标签设置 object-fit 无效的问题 详细
  5. F 修复了 latex 插件公式会换行的问题 详细
  6. F 修复了 uni-app 包 editable 和 audio 插件共用时点击 audio 无法编辑的问题 详细 by @whoooami
  7. F 修复了支付宝小程序设置了宽高的图片可能显示不正常的问题 详细
  8. F 修复了 uni-app 包微信小程序部分情况下图片会报错 replace of undefined 的问题
  9. F 修复了 uni-app 包快手小程序图片不显示的问题 详细

  从 1.x 的升级方法可见 更新指南

查看 更新日志 了解更多

mp-html's Issues

相对路径的图片无法正常

可以搞个支持百度小程序的吗

图片撑开了页面可以左右滑动，有什么办法吗

data:{ tagStyle:{ img:"height:auto !important" } } 请教一下就是我设置上面这个，仍旧有一些`图片撑开了页面可以左右滑动，有什么办法吗`

vedio 没有controls属性无法播放

问题描述
请详细描述遇到的问题（可附图）

预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码（或附件），例如：

<div>Hello World!</div>

出现横向滚动条

<section style="background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_jpg/Ljib4So7yuWg7a9PAmMjiaT076OLfiaqKT3ZWDbCf6Tcd7jNWToeuKOsOYuujjibtxQ0ABxZr2tcuicJOPolFGmqiayQ/640?wx_fmt=jpeg&quot;);background-position: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100%;"><section data-width="92%" style="margin-right: auto;margin-left: auto;padding: 5px;box-sizing: border-box;width: 513.359px;"><section style="color: rgb(135, 173, 109);letter-spacing: 1.5px;line-height: 22px;text-align: justify;"><p class="">&nbsp; &nbsp;&nbsp;</p><p class="">&nbsp; &nbsp; 肇庆砚坑紫云谷位于广东省肇庆市东南郊烂柯山，西江羚羊峡省级自然保护区内。砚坑拥有端砚开采、加工的悠久历史，**品质最好的端砚都出自于紫云谷的老坑、坑子、麻子坑三大名坑。这里有唐朝年间开采砚石的千年老坑洞，并可观赏到一年一度盛开的烂柯仙钟之称的吊钟花，铁索桥，户外拓展基地，绿色长廓，古磨群遗址，沟谷雨林品氧谷、侗族歌舞表演，沿着脚下的小溪，就开始进入风景如画的山谷。只见脚下流水淙淙，溪水清澈见底，两旁长满青苔的石壁背后，一会儿是竹林，一会儿是开满野花的山坡。巨石、流水、光影、蝉鸣、鸟声、醉人的清风<span class="">……</span>清幽的画面不断切换，让人目不暇接。分布着众多的水潭、怪石，珍珠水叠群，独特的自然风光。涉溪探险、觅玉寻金，溯流而上途经多处天然山水乐园、瀑布群。天青潭，天下第一砚，跳涧潭，紫背天葵保护区，神龟潭，冰纹潭与大自然融为一体。凤凰岩、古塔岩、宣德岩、朝天岩，麻子坑更是青山环抱，苍翠蜿蜒，绿水环绕，宛如一幅天然图画。</p></section></section></section>

这个也会超过宽度，在小程序里出现横向滚动条，盼复

关于支持解析<style>标签中的全局样式

问题描述
我是将<style>XXXXXX</style> 的样式加在 里面的body变量里面，body是 自身的一些样式，再加后台的富文本html，一起的 字符串。

预期的表现
想<style>里面的一些class样式 作用于 富文本

实际的表现
但是实际不起作用

请问是我使用的方式问题吗？还是哪里出错了？

<p>&nbsp;</p>没有独占一行

摄像头调用及拍照

请教个问题，有什么办法实现摄像头拍照并上传。

关于 view 递归问题

您好，是这样的，之前在官网论坛发了同样的帖子
是 view 递归问题

当时您回答说，自定义组件支持这种递归
请问可以给一个用例吗？

非常感谢！

富文本自带样式宽度超出手机屏幕，出现横向滚动条怎么解决呢？

问题描述
请详细描述遇到的问题（可附图）

预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码（或附件），例如：

<div>Hello World!</div>

希望可以支持markdown解析

如题

能实现一页解析多条html吗

图片样式统一支持自适应大小

新功能描述
图片样式统一支持自适应大小

应用场景
对图片数据不统一的处理

多个img标签排列会出现间隙？

多个img标签默认会有间隙。怎么去掉？
例如：

<div>
    <img src='' />
    <img src='' />
    <img src='' />
    <img src='' />
</div>

或者：

<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>
<div>
    <img src='' />
</div>

请问在 Mpvue 中如何使用，能否给个例子？

问题描述
Taro 都有 demo了，MPVUE 没有吗 = =!
预期的表现
请描述预期的表现

实际的表现
请描述实际的表现

html代码
请附上出现问题的html代码，例如：
<div>Hello World!</div>

图片预览支持索引吗

问题描述
图片预览支持索引吗？比如富文本里有多张图片，能否定位到所点击图片索引，展示当前点击的图片？

小程序中解析video有声音无画面

问题描述
请问小程序 加入视频 有声音没画面是什么问题呢? PS:直接使用video是可以播放的

预期的表现
解析视频并实现播放

实际的表现
视频为自动播放时有声音无画面,非自动播放时为不可操作

html代码
请附上出现问题的html代码（或附件），例如：

<template>
  <view class="support">
    <view class="support-details">
      <video src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]" controls></video>
      <view class="detail"><parser :html="html" @parser="pas" @ready="red" @error="err"></parser></view>
    </view>
  </view>
</template>

<script>
import parser from '@/components/jyf-Parser/index'; //富文本
export default {
  components: { parser },
  data() {
    return {
      html:
        '<div class="video"><video style="width:100%;height:100%" controls="controls" src="https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]"></video></div>'
    };
  },
  created() {},
  computed: {},
  methods: {
    red: e => {
      console.log(e);
    },
    pas: e => {
      console.log(e);
    },
    err: e => {
      console.log(e);
    }
  }
};
</script>

请问可以屏蔽一些标签吗？

如题，在nodejs后端使用这个包的时候，需要解析一些不标准的html，希望可以屏蔽一些标签（不合法的图片）。谢谢！

        const res = await parser(htmlStr);
        let nodes = res.nodes;
        let i = nodes.length;
        while (i--) {
            let node = nodes[i];
            if (node.name === 'div') {
                let j = node.children.length;
                while (j--) {
                    let childEle = node.children[j];
                    if (childEle.name === 'img' && childEle.children.length === 0 && childEle.attrs.src.includes('data:image/svg+xml')) {
                        node.children.splice(j, 1)
                    }
                }
            }
        }

目前是这样去掉不规范的svg图片的，用的是原生rich-text组件，如果用您的组件，或许还要修改下imgList。

另外想请问一下，如何给图片设置padding？

子元素里有样式超过100%则会出现横向滚动条

<section class="" style="font-size: 16px;"><section style="margin-top: 10px;margin-bottom: 10px;box-sizing: border-box;"><section data-width="96%" style="display: inline-block;width: 535.672px;vertical-align: top;box-shadow: rgb(0, 0, 0) 0px 0px 0px;box-sizing: border-box;"><section style="box-sizing: border-box;"><section style="background-image: linear-gradient(135deg, rgb(163, 241, 142) 0%, rgb(57, 186, 121) 100%);box-sizing: border-box;"><section style="padding: 4px;box-sizing: border-box;"><section style="text-align: right;box-sizing: border-box;"><section data-width="100%" style="padding-top: 10px;padding-bottom: 10px;display: inline-block;width: 527.672px;vertical-align: top;background-color: rgb(254, 255, 255);box-sizing: border-box;"><section style="text-align: center;box-sizing: border-box;transform: translate3d(12px, 0px, 0px);"><section style="max-width: 100%;vertical-align: middle;display: inline-block;box-sizing: border-box;overflow: hidden !important;"><img class="" data-copyright="0" data-cropselx1="0" data-cropselx2="528" data-cropsely1="0" data-cropsely2="293" data-ratio="0.667" data-src="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg" data-type="jpeg" data-w="1000" data-backw="528" data-backh="352" data-before-oversubscription-url="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg" style="vertical-align: middle; box-sizing: border-box; width: 527.672px !important; height: auto !important; visibility: visible !important;" _width="527.672px" src="https://mmbiz.qpic.cn/mmbiz_jpg/SiaRjbGUeWDNibwWNsIicQLF8UE1kXp3psFYgoFbYdvKxUlP8tepItnn4icBCrUqNAibs8AGo4QbyHk4WbDiaiaHFEKEQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" crossorigin="anonymous" data-fail="0"></section></section></section></section></section></section></section></section></section></section>

以上代码在小程序上跑会有横向滚动条，估计是宽超过100%，transform: translate3d(12px, 0px, 0px);
这个样式导致，盼完善

后续会支持外部class吗？

后续会支持外部class吗？

图片变形

解析出来html图片明显比原图高

微信小程序中出现滚动条

问题描述
在微信小程序中滑动时，界面会出现滚动条，导致文章滚动不了
/Users/fei/Desktop/[email protected]
是否可以去掉index.vue的最后的样式
/* #ifndef MP-BAIDU /
:host {
display: block;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
/ #endif */

苹果手机无法全部渲染，卡死问题

在iphone7,系统12.3.1，会出现页面渲染一部分，或者卡死的情况，这是什么问题的。。。，代码是用的示例代码，这会和返回的html字符串有关吗？

使用案例收集

欢迎使用了本插件的开发者们来这里分享一下
之后可以展示在首页上

请问图片如何懒加载？

正在使用中...其他一切都好，但请问图片如何懒加载？

如何解决长内容的渲染问题？

问题描述

当长内容并且节点复杂情况下，渲染会特别卡。
使用节点array方式只能提升渲染部分效率。但是内容长了，占用内存太多，还是会卡。

长内容卡的主要原因：

• 内容太多，节点太多，占用内容太多，如长内容，通过array方式引入，开发工具会直接报setdata内存占用过大
• 长内容，图片太多，需要解析的时间太久，递归太多内容导致资源占用过大，时间比较久。

如果无法解决效率问题，我感觉内容页面用webview还更加流畅些。

预期的表现

希望能有一个类似于懒加载的按需解析功能。

比如array下面，比如有3个节点。
那么优先解析第一个，如果第一个占满了屏幕，则后面的先不解析；如果屏幕没占满，则解析第二个array
当滚动往下，触发继续解析操作。

希望能有方案解决长内容渲染效率问题

实际的表现
希望能有方案解决长内容渲染效率问题

这里有一篇样式有误的文章

文章预期是下面样子（PC端，左右排列）

在小程序是这个样子的

富文本html：
测试文章.txt

后端解析包parser-wxapp使用

根据您的建议，我们现在想在服务端解析富文本，目前的方案是用VUE写每个小程序所需的页面，但是不知道怎么跟parser-wxapp整合。按照我们的理解，小程序端请求了一个网址后就会返回HTML富文本，这时怎么在返回富文本之前用parser-wxapp转换，麻烦您给解答一下，谢谢！

a标签解析报错

如果a标签没有href属性，解析的时候会报错
should have url attribute when using navigateTo, redirectTo or switchTab

部分行内标签换行

问题描述
部分行内标签，比如粗体A粗体A粗体A粗体A粗体，后面几个粗体被换行了

在Parser.js的71行是否可以换成continue，这样？

@keyframes

问题描述
style标签中使用@Keyframes是解析不了的吗

预期的表现
style标签中使用@Keyframes能解析，这样就可以操作动画

实际的表现
style标签中使用@Keyframes带上后，动画无效果

html代码
请附上出现问题的html代码（或附件），例如：

<style>
    @keyframes avatar_animation {
        0% {
            transform: rotate(30deg);
        }
        50% {
            transform: rotate(-30deg);
        }
        100% {
            transform: rotate(30deg);
        }
    }
    .avatar_img {
        animation-name: avatar_animation;
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(0, 0, 1, 0.5, 0, 0, 1, 0.5);
        animation-iteration-count: infinite;
    }
</style>
<p>xxxxxxx</p>
"""

图片预览当一页中解析多条html时会出现只能预览最后一条的问题

就像这样有两条html 当预览后第二张再预览第一张就会出现只能预览第二张的情况.

样式解析问题

样式问题，具体代码如下：

当把样式写成：
.container .processing时无法解析
如果没有前后关系，写成：
.container{}
.processing{}
就可以解析

空格不解析啊

你好，空格不解析啊，怎么让文字首行缩进两个字，我在我的样式中加入text-indent，图片也一块缩进了

使用后台方法有错误

小程序端解析表格的时候，单位是pt，无法正常解析

问题描述
在解析富文本的时候，由于后端传过来的数据，携带的单位是pt，无法正常解析，自己写了一个单位转换的方式，但是也无法正常解析

预期的表现
希望即使是携带的样式单位是pt，也能够这个正常解析
在线等，急

实际的表现
无法正常解析，表格展示错乱

html代码
请附上出现问题的html代码（或附件），例如：

<table style='border:1pt solid #ccc'></table>
就是类似这样的，代码正常，就是单位是pt

可以加个表情解析么？

img标签的 alt属性里面是一段视频的地址，该怎么播放

测试后，有些地方没达到预期效果

问题描述
文字换行，图片尺寸不对，我用过wxparse，在代码转换上也多多少少有点问题，不过问题基本都是出在图片尺寸上，你代码会好很多，不过还是没达到我想要的效果，请问还能优化吗

预期的表现

实际的表现

html代码
请附上出现问题的html代码，例如：

<div>Hello World!</div>

预览图片大图。触发onShow函数

问题描述
预览图片大图。触发onShow函数

此方法能否向外暴露。为了拦截onshow函数出触发

wepy如何使用您的组件

请问在wepy1.X框架中如何使用您的组件

Web端Vue中怎么使用此插件解析website内容

问题描述
我想在vue里面使用这个插件解析另外一个网站的内容，但是有些插件一直报错。
背景
因为我们服务端代码使用java写的，如果仅仅只为了这个功能而去搭建服务端node环境，是没有必要的，而且服务端node 我们也不熟悉。因此，想在vue中使用此插件 去解析另外一个已发布的网站。
预期的表现
本想 都是npm插件，应该可以适配且正常解析。我的最终目标就是 通过一个vue项目解析另一个vue项目，最后将整个项目解析结果传递给微信小程序。
实际的表现
但实际情况就是：
第一次尝试：报找不到puppeteer插件，于是我手动安装了puppeteer插件。
第二次尝试：报找不到phantom 和ws，于是我分别安装了。
第三~N次尝试：依然报找不到ws，最后不得已，我安装了我们平时用的vue-native-websocket
并在报错位置引入：

然后是不报错了。
第N+1次尝试：1、解析html代码段正常了，2、使用文件模式解析html文件时报找不到这个文件（可能是我文件路径写的有问题，这里有个疑问就是：这个文件模式是单文件模式还是说也可以解析这个页面中引入的外部js以及超链接指向的外部html页面？），3、使用website模式解析时，报fs插件有错误（fs插件web端我不知道能不能使用，但我还是npm install 安装了一下，结果是没有任何效果）：

另外 使用website解析时报了跨域问题，我本地使用了跨域浏览器先初步跳过的这个报错。
期望您能够在百忙之中为晚辈指点迷津，我的这种思路是否可行，如果不可行 那么有没有什么可行之策呢？
冒昧叨扰，晚辈深表歉意，万望前辈海涵。承蒙不弃，教诲之恩无以为报，拜谢，再拜谢。
html代码
请附上出现问题的html代码（或附件），例如：

<template>
  <div id="app">
    aaaaaaaaaaaaaaaa
  </div>
</template>
<script>
import parser from 'parser-wxapp';

export default {
  name: 'app',
  components: {},
  created() {
    var promise = parser('http://127.0.0.1:8888/home', 'website');
    promise.then(function(response) {
      console.log(response);
    });
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

公众号文章直接复制的html代码，图片无法解析出来

比如这个，也可能是嵌套比较深？
<img class="rich_pages" data-copyright="0" data-ratio="0.9795918367346939" data-s="300,640" data-src="https://mmbiz.qpic.cn/mmbiz_png/a1HupTryX2wRibph6FWHPMQDMXuA17Zu03pBEB3GKBDpjSTiaoPZ0SUPbOV4Fr22uQBAGr92wDF4OiaibvW8UWoic2g/640?wx_fmt=png" data-type="png" data-w="147" style="">

文章页面如下：
https://mp.weixin.qq.com/s?__biz=MzA3MTA0ODYyOA==&mid=2651155714&idx=1&sn=e2a8aeb4c22b8d8be284431c509fe304&chksm=84c241d9b3b5c8cf59ad83a79d8845fe63e4ef1d6aa4d09579cd4c5fe24cf2ce636aa133fdaa&scene=21#wechat_redirect

无法渲染&#39;等字符

问题描述
html转义后在经过组件渲染，无法正常显示，直接为空

预期的表现
正常显示，如 你好&#39； 显示 你好 '

实际的表现
直接为空，连你好也不显示

html代码
请附上出现问题的html代码，例如：

const html = '你好''
render () {
  return <ParserRichText html={html} />
}

项目一旦加上这个插件 打包就报node内存溢出

即使调整内存大小的使用限制node --max-old-space-size=8192 也不行

挺好用的，目前没发现问题

样式

大佬，你们后台用的什么。

请问在taro中如何使用，能否给个例子

9月17日版本，a标签解析出现问题

问题描述
您好，升级到9月17日版本，a标签解析出现问题：

9月15日版本没有问题

辛苦！

.