Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use WeChat Mini Programs content component rich-text. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Rich-text

The basic library 1.4.0 is supported, and the lower version needs to be compatible.

Rich text.

Attribute type default value description minimum version nodesArray / String [] node list / HTML String1.4.0

Default events are supported, including: tap, touchstart, touchmove, touchcancel, touchend and longtap

The nodes property recommends using the Array type, and performance degrades because the component converts the String type to the Array type

Nodes

Now two kinds of nodes are supported, which are distinguished by type, which are element nodes and text nodes. The default is the element node and the HTML node displayed in the rich text area

Element node: type = node

Attribute description type required remarks name signature String is supported partially trusted HTML node attrs attribute Object does not support partially trusted attribute, follow Pascal nomenclature children child node list Array No structure is consistent with nodes

Text node: type = text

Attribute description type required remarks text text String supports entities

Trusted HTML nodes and attributes

The class and style attributes are supported globally, but the id attribute is not supported.

Node attribute aabbrbblockquotebrcodecolspan,widthcolgroupspan,widthdddeldivdldtemfieldseth2h3h4h5h6h7hriimgalt,src,height,widthinslabellegendliolstart,typepqspanstrongsubsuptablewidthtbodytdcolspan,height,rowspan,widthtfootthcolspan,height,rowspan,widththeadtrul

Example:

/ / rich-text.jsPage ({data: {nodes: [{name: 'div', attrs: {class:' div_class', style: 'line-height: 60px; color: red '}, children: [{type:' text', text: 'Hello wordings'}]}}, tap () {console.log ('tap')}}) Bug & Tip

Tip: the String type is not recommended for nodes, and performance will be degraded.

Events of all nodes are shielded within the tip:rich-text component.

Tip: the attrs attribute does not support id, but supports class.

Tip: the name property is case-insensitive.

Tip: if an untrusted HTML node is used, that node and all its children will be removed.

Tip: the img tag only supports web images.

These are all the contents of this article entitled "how to use WeChat Mini Programs content component rich-text". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.