tui-richtext 富文本解析 开源组件

介绍

uni-app以及微信小程序框架下富文本解析。注：uni-app下需全局引入css文件，@import '/.../wxParse.css'

该组件来源于第三方开源组件，支持markdown和html解析。

详细使用参考：uni-app (opens new window) ，微信小程序 (opens new window)

引入

uni-app引入

import marked from '@/components/uni/marked'
import uParse from '@/components/uni/uParse/src/wxParse'
export default {
	components:{
		uParse
	}
}

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "wxParse": "/components/parse/wxParse/wxParse"
  }
}

代码演示

部分功能演示，具体可参考示例程序。

uni-app使用

<!--markdown渲染(table表格)-->
<uParse :content="markdown || ''"/>

<!--html渲染(table表格)-->
<uParse :content="nodes.join('') || ''" />

//data数据
{
	nodes:[
		'<table>',
		' <thead>',
		 ' <tr>',
		   '<th>Android</th>',
		  ' <th>IOS</th>',
		 '  <th>支付宝小程序</th>',
		 '  <th>头条小程序</th>',
		  '</tr>',
		 '</thead>',
		 '<tbody>',
		 ' <tr>',
		   '<td >微信小程序</td>',
		  ' <td>H5二维码</td>',
		   '<td>QQ小程序</td>',
		   '<td>百度小程序</td>',
		 ' </tr>',
		 '</tbody>',
		'</table>'
	] ,
	markdown:marked("| ![微信小程序](https://thorui.cn/img/applets.jpg) |![H5二维码](https://thorui.cn/img/h5_qrcode.png)  |![QQ小程序](https://thorui.cn/img/qq_applets.png)  |![Android](https://thorui.cn/img/thorui_apk.png)  |\r\n| ------------ | ------------ | ------------ | ------------ |\r\n|  微信小程序 |H5二维码  | QQ小程序  | Android App  |")
}

微信小程序使用

<!--markdown渲染(table表格)-->
<wxParse nodes="{{mdText}}" language="md"></wxParse>

<!--html渲染(table表格)-->
<wxParse nodes="{{htmlText}}" language="html"></wxParse>

//data数据
{
	htmlText:`<table>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
      <th>标题4</th>
      <th>标题5</th>
    </tr>
    <tr>
      <td>cell1</td>
      <td>cell2</td>
      <td>cell3</td>
      <td>cell4</td>
      <td>cell5</td>
    </tr>
    <tr>
      <td>cell1</td>
      <td>cell2</td>
      <td>cell3</td>
      <td>cell4</td>
      <td>cell5</td>
    </tr>
  </table>`,
	mdText:"| ![微信小程序](https://thorui.cn/img/applets.jpg) |![H5二维码](https://thorui.cn/img/h5_qrcode.png)  |![QQ小程序](https://thorui.cn/img/qq_applets.png)  |![Android](https://thorui.cn/img/thorui_apk.png)  |\r\n| ------------ | ------------ | ------------ | ------------ |\r\n|  微信小程序 |H5二维码  | QQ小程序  | Android App  |"
}

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码