平台兼容性

uni-app(4.07)

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

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

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

属性

自定义 parser 函数具体介绍

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

imageProp 对象具体属性

事件

基本使用方法

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

<script>
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
    }
  }
}
</script>

<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
    }
}