mp html

mp-html

A powerful applet rich text component

Functional introduction

• Supports use in multiple mainstream applet platforms and uni-app
• Supports rich tags (including table , video , svg , etc.)
• Supports rich event effects (automatic preview of pictures, link processing, etc.)
• Support setting of placeholder maps (loading, errors, previews)
• Supports rich functions such as anchor point jump, long press and copy
• Supports most html entities
• Rich plug-ins (keyword search, content editing, latex formulas, etc.)
• High efficiency, strong fault tolerance and lightweight ( ≈25KB , 9KB gzipped )

View the function introduction to learn more

How to use

Native Platform

• npm method

  1. Install component packages in the project directory

     npm install mp-html

  2. Check使用npm 模块in the developer tool (if there is no option, it is not needed) and click工具- 构建npm

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

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

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

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

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

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

• Source code method

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

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

     {
       "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 dist/uni-app in the source code to the project root directory and can be directly introduced through the plug-in market.

  2. Add in vue 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 method

  1. Install component packages in the project directory

     npm install mp-html

  2. Add in vue 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 >

  When introducing projects running using cli method through npm , you need to configure transpileDependencies in vue.config.js . For details, see #330
  If used in nvue , copy the contents in dist/uni-app/static directory to the project's static directory, otherwise it will not run

Check out Quick Start to learn more

Component properties

property	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		Main domain name (for link stitching)
error-img	String		Placeholder link when an image error occurs
lazy-load	Boolean	false	Whether to enable lazy loading of pictures
loading-img	String		Placeholder links during image loading
pause-video	Boolean	true	Whether to automatically pause other videos when playing a video
preview-img	Boolean	true	Whether to allow the image to be automatically previewed when clicked
scroll-table	Boolean	false	Whether to add a scrolling layer to each table so that it can scroll horizontally alone
selectable	Boolean	false	Whether to enable text long press to copy
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 image to be pressed for a long time to display the menu
tag-style	Object		Set the default style of the tag
use-anchor	Boolean	false	Whether to use anchor links

View properties to learn more

Component Events

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

See events to learn more

api

Some api methods are provided on component instances for call

name	effect
in	Limit the range of anchor jumps to a scroll-view
navigateTo	Anchor jump
getText	Get text content
getRect	Get the location and size of rich text content
setContent	Set rich text content
imgList	Get an array of all images
pauseMedia	Pause audio and video playback (2.2.2+)
setPlaybackRate	Set audio and video playback rate (2.4.0+)

Check out the API to learn more

Plugin extensions

In addition to basic functions, this component also provides rich extensions and can be selected as needed.

name	effect
audio	Music player
editable	Rich text editing
emoji	Analyze emoji
Highlight	Code block highlighting
markdown	Render markdown
Search	Keyword search
style	Match styles in style tags
txv-video	Using Tencent Video
img-cache	Image cache by @PentaTea
latex	Render latex formula by @Zeng-J
card	Card display by @whoooami

Check out the plugin to learn more

Use Cases

Official example	Happy Mall	What a life	Food method check	Weimu	Read classical literature

Science Review	Programmer's Technology Journey	Diandian Blog	Excellent notes	365 Questions	Shared books in the same city

Technology source share	Your code is awesome	True	Mottoni	Template demo	AI Wali

The above rankings are in no particular order, and more visible use cases are collected (please add it)

License and support

• License for free (including commercial use), copying or modifying this component MIT License
  It is necessary to undergo sufficient testing before being used in a production environment. You are not responsible for any losses caused by plug-in bug (you can modify the source code yourself)

• Contact us and welcome to join the QQ communication group:
  Group 1 (full): 699734691
  Group 2 (full): 778239129
  Group 3: 960265313
  

• support
  

Update log

• v2.5.0 (20240422)

  1. U play event adds src and other information details
  2. U preview-img attribute supports setting to all to enable base64 image preview details
  3. U editable plug-in adds simple mode (click text to edit it directly)
  4. U latex plug-in supports block-level formula details
  5. F fixed the problem of background loss in some cases of the table.
  6. F fixed some issues that svg cannot be displayed in detail
  7. F fixed the problem that the style cannot be recognized in uni-app package h5 and app ends.
  8. F fixed the problem of incorrect display in the latex plug-in in some cases.
  9. F fixed the issue that editable plugin table cannot be deleted
  10. F fixed the problem of editable plug-in uni-app package vue3 h5 clicking image error
  11. F fixed the issue where editable plugin uni-app package clicks on the table without a menu bar

• v2.4.3 (20240121)

  1. A card plugin details by @whoooami
  2. F fixed the issue that foreignobject may not be displayed in svg details
  3. F fixed the problem of incorrect display in the case of merged cells in the table part of the detailed
  4. F fixed the issue of setting object-fit in img tags for invalid
  5. F fixed the problem that the latex plug-in formula will wrap the line details
  6. F fixed the problem that clicking audio cannot be edited when uni-app package editable and audio plug-in is shared. Details by @whoooami
  7. F fixed the problem that the Alipay applet has set the width and height pictures that may display abnormally.
  8. F fixed the problem that uni-app package WeChat applet will report an error in the image replace of undefined in some cases.
  9. F fixed the problem that uni-app package Kuaishou mini program does not display detailed

  The update guide can be seen from the upgrade method of 1.x

Check out the update log to learn more