uParse 适用于 uni-app/mpvue 的富文本解析组件

支持 Html、Markdown 解析,Fork自: mpvue-wxParse

插件市场有三方基于本插件再次优化,提供了更多功能,可在插件市场搜索uparser

属性

名称 类型 默认值 描述
loading Boolean false 数据加载状态
className String 自定义 class 名称
content String 渲染内容
noData String 数据不能为空 空数据时的渲染展示
startHandler Function 见源码 自定义 parser 函数
endHandler Function null 自定义 parser 函数
charsHandler Function null 自定义 parser 函数
imageProp Object 见下文 图片相关参数

自定义 parser 函数具体介绍

  • 传入的参数为当前节点 node 对象及解析结果 results 对象,例如 startHandler(node, results)
  • 无需返回值,通过对传入的参数直接操作来完成需要的改动
  • 自定义函数会在原解析函数处理之后执行

imageProp 对象具体属性

名称 类型 默认值 描述
mode String 'aspectFit' 图片裁剪、缩放的模式
padding Number 0 图片内边距
lazyLoad Boolean false 图片懒加载
domain String '' 图片服务域名

事件

名称 参数 描述
preview 图片地址,原始事件 预览图片时触发
navigate 链接地址,原始事件 点击链接时触发

基本使用方法

<template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse>
  </div>
</template>


import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: '<div>我是HTML代码</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}


<style>
@import url("@/components/u-parse/u-parse.css");
</style>

渲染 Markdown

先将 markdown 转换为 html 即可

npm install marked
import marked from 'marked'
import uParse from '@/components/u-parse/u-parse.vue'

export default {
  components: {
    uParse
  },
  data () {
    return {
      article: marked(`#hello, markdown!`)
    }
  }
}

建议HBuilderX升级到1.9+,在manifest.json配置"usingComponents": true, 且对整个项目完整测试

{
    "app-plus": {
        "usingComponents": true
    }
}

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问