taro_rich_text

项目地址: https://github.com/SunnyQjm/taro_rich_text

taro_rich_text 是Taro小程序框架下使用的跨端的Markdown解析组件，目前测试在微信小程序端和H5端的Markdown解析的正常的

注意

• 如果希望使用本组件在微信小程序端使用wxParse解析HTML

  如果需要在微信小程序端使用wxParse解析HTML，则需要在开发者中心添加wxParse插件，添加方式参考wxParse-plugin

• 如果只想使用本组件的Markdown解析功能，不希望添加wxParse插件

  本组件提供了不包含wxParse插件的版本，则可引用 TaroRichTextNoWxParse 组件，使用方式和参数同 TaroRichText 此时会默认使用RichText来解析HTML富文本

  import {
   TaroRichTextNoWxParse
   } from 'taro_rich_text';

• Taro 1.3.0-beta.5 版本 前后差异

  在Taro 1.3.0-beta.5之前包括1.3.0-beta.5的版本，在解析函数式组件的分支逻辑的时候存在bug，所以taro_rich_text 1.0.4包括1.0.4之前的版本对此做了特殊处理，所以

  • Taro版本 > 1.3.0-beta.5 则对应使用 taro_rich_text > 1.0.4
  • Taro版本 <= 1.3.0-beta.5 则对应使用 taro_rich_text <= 1.0.4
  • 如果想在 Taro 1.3.0-beta.5 之前的版本使用 > 1.0.4 版本的本组件，参考该commit进行修改

使用方式

• 首先用npm安装

  npm install --save taro_rich_text

• 引入组件库

  import {
    TaroRichText
  } from 'taro_rich_text';

• 在项目配置文件 config/index.js 中添加如下配置

  h5: {
      esnextModules: ['taro_rich_text']
  }

  该配置的作用是，在H5端使用本库的时候，对应的单位会进行转换（px => rem）

• 在代码中使用

  <TaroRichText
    raw={false}
    type='markdown'
    richText={richText}
  />

参数说明

| 参数名 | 参数类型 | 参数说明 | | ------ | ------ | ------ | | richText | string | 富文本（Markdown文本） | | raw | boolean | 是否显示无格式文本(如果为true，则组件显示的内容会只包含文字，不包含格式，一般用于显示Markdown富文本的简介) | | rawMaxLength | number | raw为true时本参数有效，表示最多显示多少个文字，超出部分显示成省略号（...） | | type | 'markdown' | 'html' | 富文本类型，Markdown支持跨端，目前html主要是针对微信小程序端，使用微信小程插件wxParse来实现 | | omImageClick | (image: XbRichTextImageClickCallbackData) => void | Markdown中图片被点击的回调 | | onLinkClick | (src: string) => void | Markdown中链接被点击的回调 |

效果展示

赞赏

如果用起来觉得不错，那就，“打发点咯”