mp-html

mp-html provides the following capabilities:

• Multi-platform support: Works in mainstream mini-program platforms and uni-app.
• Rich tag support: Handles table, video, svg, and more.
• Interactive events: Supports automatic image preview, link handling, anchor jumping, and long-press to copy.
• Placeholder support: Allows setting placeholder images for loading, error states, and preview modes.
• HTML Entity support: Handles most HTML entities.
• Extensibility: Supports various plugins such as keyword search, content editing, and latex formulas.
• Lightweight: Approximately 25KB (9KB gzipped).

When performing secondary development, make all modifications within the src directory. The project uses a single source code base (primarily following WeChat Mini Program syntax) that is automatically converted to other platforms during the build process.

Important Note on Property Access: To ensure compatibility across platforms (specifically for Alipay), always access component properties via this.properties instead of this.data.

Because nvue uses native rendering, mp-html renders via web-view to achieve similar effects to HTML. This has performance implications and specific limitations:

Limitations:

1. lazy-load property is not supported.
2. Video does not support fullscreen playback.
3. If used inside a container with flex-direction: row, you must set a width for the component or set flex: 1 to fill the remaining width.

Note on Installation: Prior to certain fixes, nvue mode did not support uni_modules and required local installation (copying dist/uni-app to your project root).

To use mp-html in a uni-app project via the uni_modules method:

1. Click the 使用 HBuilder X 导入插件 (Import plugin using HBuilder X) button in the plugin market to import directly, or download the ZIP and extract it to your project's uni_modules/mp-html directory.
2. Use the component in your (n)vue files without manual imports:

<!-- No import required, can be used directly -->
<mp-html :content="html" />

export default {
  data() {
    return {
      html: '<div>Hello World!</div>'
    }
  }
}

3. To update, right-click the uni_modules/mp-html directory in HBuilderX and select 从插件市场更新 (Update from plugin market).

The component handles tables using three different rendering methods depending on complexity:

1. rich-text: Best performance for tables without links or images.
2. table layout: Used for tables with special tags but no merged cells.
3. grid layout: Used for complex tables with merged cells.

Key Features:

• Horizontal Scrolling: Enable scroll-table to allow tables to scroll horizontally independently of the main content.
• Attributes: Supports border, cellspacing, cellpadding, and align.

Copy the contents of dist/uni-app from the source into your project root.

<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
import mpHtml from '@/components/mp-html/mp-html'
export default {
  // HBuilderX 2.5.5+ can use easycom for automatic import
  components: {
    mpHtml
  },
  data () {
    return {
      html: '<div>Hello World!</div>'
    }
  }
}
</script>

The latex plugin enables the rendering of LaTeX math formulas within mp-html. Once the plugin is included, any text wrapped in single dollar signs (e.g., $xxx$) will be parsed and rendered according to LaTeX rules.

Key Behaviors:

• Editing Mode: If used in conjunction with the editable plugin, formulas will not render while in editing mode, allowing users to directly modify the raw LaTeX text.
• Implementation: This plugin uses katex-mini for parsing.
• Fonts: It is recommended to host the required KaTeX font files yourself for optimal performance and reliability.

Apply styles to the rendered HTML using three priority levels:

1. Inline Styles (Highest Priority): Use the style attribute directly on HTML tags.
2. tag-style: Use the tag-style prop to set default styles for specific tag names.
3. External Styles (Lowest Priority): Add styles to the externStyle field in tools/config.js. This supports class selectors (and tag name selectors since v2.1.0).

Note: You can use !important to override lower-priority styles. Additionally, the style plugin can be used to match styles defined within <style> tags in the HTML content.

You can install the mp-html package using npm or yarn to manage it as a dependency in your project.

# 通过 npm 获取
npm install mp-html
# 或通过 yarn 获取
yarn add mp-html

You can use the native mini-program packages in Taro.

Important Notes:

• Taro 2: Use the non-compressed component package from the demo project to avoid issues.
• Taro 3 (Vue 3): You must use camelCase for property names (e.g., copy-link becomes copyLink) or use the setContent method to set content.