Uni app's uparse rich text parsing perfectly parses rich text!

download uni-app plug-in unit

uparse Download address ：uParse Rich text analysis - DCloud Plug in market

After downloading, there will be  components file  

Basic usage

<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> I am a HTML Code </div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>

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

attribute

name	type	The default value is	describe
loading	Boolean	false	Data loading status
className	String	—	Customize class name
content	String	—	Rendering content
noData	String	Data cannot be empty	Rendering presentation of null data
startHandler	Function	See source code	Customize parser function
endHandler	Function	null	Customize parser function
charsHandler	Function	null	Customize parser function
imageProp	Object	See below	Picture related parameters

Customize parser Function details

• The parameter passed in is the current node  node  Object and parsing result  results  object , for example  startHandler(node, results)
• There is no need to return a value , Complete the required changes by directly operating the passed in parameters
• The custom function will be executed after the processing of the original parsing function

event

name	Parameters	describe
preview	Picture address , Original event	Triggered when a picture is previewed
navigate	Link address , Original event	Trigger when you click a link