WeChat applet rich text component mp-html

Features

• uni-app Supports use on multiple mainstream mini program platforms and 
• Supports rich tags (including  table, video,, svg etc.)
• Supports rich event effects (automatic preview of pictures, link processing, etc.)
• Supports setting placeholder images (when loading, when an error occurs, when previewing)
• Supports rich functions such as anchor point jump and long press copy.
• Supports most  html  entities
• Rich plug-ins (keyword search, content  editing  , etc.)
• High efficiency, fault tolerance and lightweight ( ≈24.5KB, 9KB gzipped)

View  the feature introduction  to learn more

Instructions

native platform

• npm Way

  1. Install the component package in the project directory

     npm install mp-html
     

     使用 npm 模块 Check and click  on Developer Tools 工具 - 构建 npm

  2. json Add in the file that needs to use the page 

  3. {
       "usingComponents": {
         "mp-html": "mp-html"
       }
     }

  4. wxml Add in the file that needs to use the page 

     <mp-html content="{
            
            {html}}" />

  5. js Add in the file that needs to use the page 

     Page({
       onLoad() {
         this.setData({
           html: '<div>Hello World!</div>'
         })
       }
     })

• Source code method

  1. dist/platformCopy the code package ( )  corresponding to the platform in the source code to components the directory and rename it mp-html

  2.  json Add in the file that needs to use the page 

  3. {

       "usingComponents": {

         "mp-html": "/components/mp-html/index"

       }

     } 

  Next steps are the same as above

Check out  Quick Start  to learn more

uni-app

• Source code method

  1. Copy the content in the source code  dist/uni-app to the project root directory and  introduce it
     directly through  the plug-in market

  2. vue Add in the file that needs to use the page 

     <template>
       <view>
         <mp-html :content="html" />
       </view>
     </template>
     <script>
       import mpHtml from '@/components/mp-html/mp-html'
       export default {
         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
         components: {
           mpHtml
         },
         data() {
           return {
             html: '<div>Hello World!</div>'
           }
         }
       }
     </script>

• npm Way

  1. Install the component package in the project directory

     npm install mp-html

  2. vue Add in the file that needs to use the page 

     <template>
       <view>
         <mp-html :content="html" />
       </view>
     </template>
     <script>
       import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
       export default {
         // 不可省略
         components: {
           mpHtml
         },
         data() {
           return {
             html: '<div>Hello World!</div>'
           }
         }
       }
     </script>

     

  If  nvue you use it in the project, you also need to  dist/uni-app/static copy the contents of the directory to the project  static directory, otherwise it will not run.

Check out  Quick Start  to learn more

Component properties

Attributes	type	default value	illustrate
container-style	String		Container style ( 2.1.0+ )
content	String		html string for rendering
copy-link	Boolean	true	Whether to allow automatic copying of external links when clicked
domain	String		Primary domain name (used for link splicing)
error-img	String		Placeholder image link when image error occurs
lazy-load	Boolean	false	Whether to enable lazy loading of images
loading-img	String		Placeholder image link during image loading
pause-video	Boolean	true	Whether to automatically pause other videos while playing one video
preview-img	Boolean	true	Whether to allow automatic preview of images when clicked
scroll-table	Boolean	false	Whether to add a scroll layer to each table so that it can be scrolled horizontally independently
selectable	Boolean	false	Whether to enable long press copy of text
set-title	Boolean	true	Whether to set the content of the title tag to the page title
show-img-menu	Boolean	true	Whether to allow the menu to be displayed when the picture is long pressed
tag-style	Object		Set the default style of labels
use-anchor	Boolean	false	Whether to use anchor links

View  properties  to learn more

Component events

name	Trigger time
load	When the dom tree is loaded
ready	When the image is loaded
error	When a rendering error occurs
imgtap	When the picture is clicked
linktap	When the link is clicked

View  events  to learn more

api

api There are some methods provided on the component instance  that can be called

name	effect
in	Limit the scope of anchor point jump to a scroll-view
navigateTo	Anchor jump
getText	Get text content
getRect	Get the position and size of rich text content
setContent	Set up rich text content
imgList	Get an array of all images

Check out  the API  to learn more

Plug-in extension

In addition to basic functions, this component also provides a wealth of extensions, which can be selected as needed.

name	effect
audio	music player
editable	Rich text editing
emoji	Parse emoji
highlight	Code block highlighting
markdown	Render markdown
search	keyword search
style	Match the style in the style tag
txv-video	Use Tencent Video

Check out  the plugin  to learn more

official address

Mobile resources