### Install Dependencies

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Install project dependencies using npm or yarn.

```bash
npm install
```

```bash
yarn
```

--------------------------------

### Install mp-html via npm

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Use npm or yarn to install the mp-html package. Run the update command to get the latest version.

```bash
# Through npm
npm install mp-html
# Or through yarn
yarn add mp-html
```

```bash
# Through npm update
npm update mp-html
# Or through yarn upgrade
yarn upgrade mp-html
```

--------------------------------

### getSrc Method Example

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/plugin.md

Example implementation of the `getSrc` method, required for handling media and link insertions/modifications.

```APIDOC
## getSrc Method Example

This method is called when the component needs a source URL for images, audio, video, or links. It should return a Promise that resolves with the online URL.

```javascript
Page({
  onLoad () {
    // ctx is the component instance
    this.ctx.getSrc = (type, value) => {
      return new Promise((resolve, reject) => {
        if (type === 'img') {
          wx.chooseImage({
            count: value === undefined ? 9 : 1, // Allows multiple images for insertion, single for modification (v2.2.0+)
            success: res => {
              wx.showLoading({ title: 'Uploading' });
              (async () => {
                const arr = [];
                for (const item of res.tempFilePaths) {
                  const src = await upload(item); // Replace with your upload logic
                  arr.push(src);
                }
                return arr;
              })().then(uploadedSrcs => {
                wx.hideLoading();
                resolve(uploadedSrcs);
              });
            },
            fail: reject
          });
        }
        // Handle other types (video, audio, link) similarly
      });
    };
  },
  finishEdit () {
    // Use setTimeout to ensure content is captured after potential blur events
    setTimeout(() => {
      const html = this.ctx.getContent(); // Get edited HTML
      // Upload HTML or perform other actions
      wx.request({
        url: 'YOUR_UPLOAD_URL',
        data: { html },
        success: () => {
          this.setData({ editable: false }); // End editing
        }
      });
    }, 50);
  }
});
```
```

--------------------------------

### Install mp-html via npm

Source: https://github.com/jin-yufeng/mp-html/blob/master/README.md

Install the mp-html component package using npm. This is the first step for using the component in your project.

```bash
npm install mp-html
```

--------------------------------

### Basic Usage in Uni-App (Source)

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

Shows how to use the mp-html component in a Uni-App page when installed via source code. It includes component registration, which can be automatic with easycom.

```html
<mp-html :content="html" />
```

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

--------------------------------

### Basic Usage in Uni-App (uni_modules)

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

Demonstrates the basic integration of the mp-html component in a Uni-App page using the uni_modules installation method. No explicit import is needed.

```html
<mp-html :content="html" />
```

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

--------------------------------

### Basic Usage in Uni-App (npm)

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

Illustrates the basic usage of the mp-html component installed via npm. It requires explicit import and component registration.

```html
<mp-html :content="html" />
```

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

--------------------------------

### Get Component Instance in Alipay Mini Program

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Get the component instance in Alipay mini programs by enabling `component2` mode and using `this.$refs`.

```axml
<mp-html ref="article">

```

```javascript
Page({
  article (ctx) {
    // 获得组件实例
  } 
})
```

--------------------------------

### Get Component Instance in Uni-App

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Obtain the component instance using `this.$refs` in Uni-App.

```vue
<template>
  <view>
    <mp-html ref="article" />
  </view>
</template>
<script>
  export default {
    onLoad () {
      var ctx = this.$refs.article
    }
  }
</script>
```

--------------------------------

### Link Tap Event Handling for Downloads and Navigation

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/basic/event.md

Handle the 'linktap' event to customize link click behavior. This example demonstrates downloading .doc files, navigating to webviews, and opening other mini programs based on link attributes.

```javascript
Page({
  linktap (e) {
    if (e.detail.href.includes('.doc')) {
      // 下载 doc 文件
      wx.downloadFile({
        url: e.detail.href,
        success (res) {
          wx.hideLoading()
          wx.openDocument({
            filePath: res.tempFilePath
          })
        },
        fail (err) {
          wx.hideLoading()
          wx.showModal({
            title: '失败',
            content: err.errMsg,
            showCancel: false
          })
        }
      })
    } else if (e.detail.href.includes('xxx.com')) {
      // 跳转到 webview
      wx.navigateTo({
        url: 'pages/webview/webview?url=' + e.detail.href,
      })
    } else if (e.detail['data-appid']) {
      // 跳转其他小程序
      wx.navigateToMiniProgram({
        appId: e.detail['data-appid']
      })
    }
  }
})
```

--------------------------------

### Get Component Instance in Other Mini Programs

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Retrieve the component instance in other mini programs like WeChat, QQ, Baidu, or Toutiao using `this.selectComponent`.

```wxml
<mp-html id="article" />

```

```javascript
Page({
  onLoad () {
    // 微信、QQ、百度
    var ctx = this.selectComponent('#article')
    // 头条
    this.selectComponent('#article', ctx => {

    })
  }
})
```

--------------------------------

### Use mp-html in uni-app Vue Component (npm import)

Source: https://github.com/jin-yufeng/mp-html/blob/master/README.md

When using the npm installation method in uni-app, import the component from the 'mp-html/dist/uni-app/components/mp-html/mp-html' path. Manual component registration is required.

```vue
<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>
```

--------------------------------

### HTML Parsing Stability Examples

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/feature.md

Demonstrates the component's ability to handle various HTML formatting inconsistencies and errors, including different attribute formats, mismatched or unclosed tags, and case-insensitive tag and attribute names.

```html
<!-- 不同的属性格式 -->
<font face="宋体" color='green' size=7>Hello</font>
```

```html
<!-- 标签首尾不匹配或未闭合 -->
<div> World</section>
```

```html
<!-- 大小写搭配 -->
<dIv StYle="color:green">!</DIv>
```

--------------------------------

### Custom Elements Configuration

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Configure custom elements to use specific mini-program components within your HTML content. This example shows how to register an 'ad' component with a 'unit-id' attribute.

```javascript
customElements: [{
  name: 'ad',
  attrs: ['unit-id']
}]
```

--------------------------------

### Use mp-html in uni-app (npm)

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Install the mp-html package via npm and import the component in your page's script. Ensure to configure transpileDependencies in vue.config.js for CLI projects.

```vue
<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
  export default {
    // Cannot be omitted
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>
```

--------------------------------

### Configure mp-html in WeChat Mini Program JSON

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Add the mp-html component to your page's JSON configuration file when using the npm installation method or source code import.

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

```json
{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}
```

--------------------------------

### Image Tap Event Handling

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/basic/event.md

Handle the 'imgtap' event to customize image click behavior. By default, images are previewed. This example shows how to conditionally preview images based on a 'data-flag' attribute.

```javascript
Page({
  imgtap (e) {
    // 对做了某种标记的图片进行预览
    if (e.detail['data-flag']) {
      wx.previewImage({
        urls: [e.detail.src] // 仅预览单张图片
      })
    }
  }
})
```

--------------------------------

### Generate Demo Projects

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Generate demo projects for different platforms like WeChat, QQ, Baidu, Alipay, Toutiao, and uni-app.

```bash
npm run dev:weixin
```

```bash
npm run dev:qq
```

```bash
npm run dev:baidu
```

```bash
npm run dev:alipay
```

```bash
npm run dev:toutiao
```

```bash
npm run dev:uni-app
```

--------------------------------

### Build Uni-App Component with Plugins

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

After selecting desired plugins in `tools/config.js`, navigate to the `node_modules/mp-html` directory and run these commands to generate a new Uni-App component package.

```bash
npm install
npm run build:uni-app
```

--------------------------------

### Get Text Content

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Retrieve the plain text content of the rendered HTML. This method must be called after the `load` event.

```javascript
// ctx 为组件实例
// var text = ctx.getText()
```

--------------------------------

### 生成组件包

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/develop.md

执行相应的 npm 脚本来生成特定平台的代码包到 `dist` 文件夹。`npm run build` 可生成所有平台包。

```bash
# 生成微信包到 dist/mp-weixin
npm run build:weixin
# 生成 qq 包到 dist/mp-qq
npm run build:qq
# 生成百度包到 dist/mp-baidu
npm run build:baidu
# 生成支付宝包到 dist/mp-alipay
npm run build:alipay
# 生成头条包到 dist/mp-toutiao
npm run build:toutiao
# 生成 uni-app 包到 dist/uni-app
npm run build:uni-app
# 生成所有包
npm run build
```

--------------------------------

### Watch and Recompile Demo Projects

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Monitor changes in the demo project and automatically recompile them to the dev directory for real-time updates.

```bash
npm run watch:weixin
```

```bash
npm run watch:qq
```

```bash
npm run watch:baidu
```

```bash
npm run watch:alipay
```

```bash
npm run watch:toutiao
```

--------------------------------

### 安装依赖

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/develop.md

在组件包根目录下执行此命令来安装项目所需的依赖。支持 npm 和 yarn。

```bash
# 通过 npm 安装
npm install
# 或通过 yarn 安装
yarn
```

--------------------------------

### Other Mini Program Platforms Event Binding

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/basic/event.md

For other mini program platforms, use 'bind' followed by the event name. Event data is accessed from 'event.detail'.

```wxml
<mp-html bindready="ready" />

```

```javascript
Page({
  ready (e) {
    console.log(e.detail)
  }
})
```

--------------------------------

### Configure Docsify

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/index.html

Sets up the Docsify documentation generator with specific options like repository link, cover page, sidebar, and search functionality.

```javascript
window.$docsify = {
  name: 'mp-html',
  repo: 'https://github.com/jin-yufeng/mp-html',
  coverpage: true,
  loadSidebar: true,
  subMaxLevel: 3,
  auto2top: true,
  search: {
    placeholder: '搜索',
    noData: '找不到结果'
  }
}
```

--------------------------------

### HTML Structure for Highlighted Code

Source: https://github.com/jin-yufeng/mp-html/blob/master/plugins/highlight/README.md

Code blocks in HTML will be highlighted if they are within a 'pre' tag that contains a 'code' tag, and either the 'pre' or 'code' tag has a class starting with 'language-'.

```html
<pre><code class="language-css">p { color: red }</code></pre>
```

--------------------------------

### Configure mp-html in Native Mini-Program JSON

Source: https://github.com/jin-yufeng/mp-html/blob/master/README.md

Add the mp-html component to your page's JSON configuration file. Ensure 'using npm modules' is checked and run 'Tool - Build npm' in the developer tools.

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

--------------------------------

### 代码检查和测试命令

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/develop.md

提供用于代码检查（ESLint, Stylelint）和测试（Jest）的 npm 脚本。`--fix` 参数可自动修复部分 Stylelint 问题。

```bash
npm run lint           # eslint 检查
npm run lintcss        # stylelint 检查
npm run lintcss --fix  # 检查并修复
npm run test           # 执行 jest 测试
npm run coverage       # 测试代码覆盖率
```

--------------------------------

### Get Element Rect

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Obtain the real-time position and size of the rich text content. This is particularly useful if `lazy-load` is enabled, as the `ready` event may not provide the final dimensions. Error handling is recommended due to a small chance of failure.

```javascript
Page({
  getRect () {
    // ctx 为组件实例
    ctx.getRect().then(rect => {
      console.log(rect) // boundingClientRect 信息
    }).catch(err => {
      console.log('获取失败', err)
    })
  }
})
```

--------------------------------

### Alipay Mini Program Event Binding

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/basic/event.md

For Alipay mini programs, use 'on' followed by the capitalized event name. Event data is accessed from the 'event' object.

```axml
<mp-html onReady="ready">

```

```javascript
Page({
  ready (e) {
    console.log(e)
  }
})
```

--------------------------------

### Access and Modify Image List

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

The `imgList` property provides an array of image sources used in the content. Modifying this array, for example, to update image URLs to high-resolution versions or convert them to base64, can affect the automatic preview functionality. Do not add or remove elements from this array.

```javascript
Page({
  load () {
    // ctx 为组件实例
    var cover = ctx.imgList[0] // 首张图可以作为转发封面图
    ctx.imgList.forEach((src, i, array) => {
      console.log(src)

      // 替换为高清图链接
      array[i] = src.replace('thumb', '')

      // 转存 base64 便于预览
      var fs = wx.getFileSystemManager && wx.getFileSystemManager()
      var info = src.match(/data:image\/(\S+?);(\S+?),(.+)/)
      if (!info) return
      var filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`
      fs && fs.writeFile({
        filePath,
        data: info[3],
        encoding: info[2],
        success: () => array[i] = filePath
      })
    })
  }
})
```

--------------------------------

### 使用container-style属性全局设置white-space

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/faq.md

从2.1.2版本开始，可以通过container-style属性全局设置white-space的值，例如设置为'pre-wrap'以保留空格和换行符。

```html
<mp-html container-style="white-space:pre-wrap" />
```

--------------------------------

### navigateTo

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Performs anchor jumps. This method requires the `use-anchor` property to be true and should be called after the `load` event, preferably after the `ready` event for accuracy.

```APIDOC
## navigateTo

### Description
Performs anchor jumps. This method requires the `use-anchor` property to be true and should be called after the `load` event, preferably after the `ready` event for accuracy.

The `offset` parameter has higher priority than the `use-anchor` property.

### Parameters
#### Path Parameters
- **id** (string) - Optional - The ID of the anchor to jump to. If empty, it jumps to the beginning.
- **offset** (number) - Optional - An offset value for the jump position. Defaults to 0.

### Return Value
- **Promise**

### Request Example
```javascript
// ctx is the component instance
ctx.navigateTo('anchor').then(() => {
  console.log('Jump successful')
}).catch(err => {
  console.log('Jump failed: ', err)
})
```
```

--------------------------------

### Clone mp-html from Git

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Obtain the source code by cloning the repository from GitHub or Gitee.

```bash
# Through github
git clone https://github.com/jin-yufeng/mp-html.git
# Or through gitee
git clone https://gitee.com/jin-yufeng/mp-html.git
```

--------------------------------

### Component Instance API Methods

Source: https://github.com/jin-yufeng/mp-html/blob/master/README.md

The component instance provides several API methods that can be called directly to control its behavior and retrieve information.

```APIDOC
## Component Instance API Methods

### `in(scrollNode)`

**Description**: Limits the scope of anchor jumps to within a scroll-view.

### `navigateTo(id)`

**Description**: Performs anchor jumps.

### `getText()`

**Description**: Retrieves the text content.

### `getRect()`

**Description**: Gets the position and size of the rich text content.

### `setContent(content)`

**Description**: Sets the rich text content.

### `imgList()`

**Description**: Retrieves an array of all images.

### `pauseMedia()`

**Description**: Pauses audio and video playback. (Available since v2.2.2)

### `setPlaybackRate(rate)`

**Description**: Sets the playback rate for audio and video. (Available since v2.4.0)
```

--------------------------------

### Use mp-html in uni-app (Source Import)

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Copy the dist/uni-app content into your project's root directory and import the component in your page's script. Automatic import via easycom is supported for HBuilderX 2.5.5+.

```vue
<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from '@/components/mp-html/mp-html'
  export default {
    // Can be automatically imported via easycom for HBuilderX 2.5.5+
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>
```

--------------------------------

### Using Parser in a Plugin

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/plugin.md

Demonstrates how to instantiate and use the `Parser` class within a custom plugin to parse HTML content into nodes. Ensure the component instance is passed correctly during instantiation.

```javascript
const Parser = require('../parser.js')
var instance = new Parser(vm) // 实例化解析器，传入组件实例将自动获取相关配置
var nodes = instance.parse(content) // 解析完成
```

--------------------------------

### 条件编译示例 (WXML)

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/develop.md

在 WXML 文件中，可以通过在属性名前添加平台名称（如 `mp-weixin:`）来指定该属性仅在特定平台生效。

```wxml
<!-- show-menu-by-longpress 属性将仅被生成到微信包中 -->
<image mp-weixin:show-menu-by-longpress="xxx" />
```

--------------------------------

### API Methods

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

The mp-html component instance provides several API methods for programmatic control.

```APIDOC
## API Methods

Component instances provide some `api` methods that can be called:

| Name | Description |
|:---:|---| 
| in | Limit the scope of anchor jumps within a scroll-view |
| navigateTo | Anchor jump |
| getText | Get text content |
| getRect | Get the position and size of the rich text content |
| setContent | Set rich text content |
| imgList | Get an array of all images |
| pauseMedia | Pause audio/video playback (since v2.2.2) |
| setPlaybackRate | Set audio/video playback rate (since v2.4.0) |

See [API](https://jin-yufeng.github.io/mp-html/#/advanced/api) for more details.
```

--------------------------------

### Configure getSrc for Editable Plugin

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/plugin.md

Set up the getSrc method on the component instance to handle link retrieval for images, videos, audio, and links. This is crucial for operations like inserting or modifying links. The method should return a Promise that resolves with the online URL.

```javascript
Page({
  onLoad () {
    // ctx 为组件实例，获取方法见上
    /**
     * @description 设置获取链接的方法
     * @param {String} type 链接的类型（img/video/audio/link）
     * @param {String} value 修改链接时，这里会传入旧值
     * @returns {Promise} 返回线上地址（2.2.0 版本起设置了 domain 属性时，可以缺省主域名）
     *   type 为 audio/video 时，可以返回一个源地址数组
     *   2.1.3 版本起 type 为 audio 时，可以返回一个 object，包含 src、name、author、poster 等字段
     *   2.2.0 版本起 type 为 img 时，可以返回一个源地址数组，表示插入多张图片（修改链接时仅限一张）
     */
    this.ctx.getSrc = (type, value) => {
      return new Promise((resolve, reject) => {
        // 以图片为例
        if (type == 'img') {
          wx.chooseImage({
            count: value === undefined ? 9 : 1, // 2.2.0 版本起插入图片时支持多张（修改图片链接时仅限一张）
            success: res => {
              wx.showLoading({
                title: '上传中'
              });
              (async ()=>{
                const arr = []
                for (let item of res.tempFilePaths) {
                  // 依次上传
                  const src = await upload(item)
                  arr.push(src)
                }
                return arr
              })().then(res => {
                wx.hideLoading()
                resolve(res)
              })
            },
            fail: reject
          })
        }
      })
    }
  },
  finishEdit () {
    setTimeout(() => {
      var html = ctx.getContent() // 获取编辑好的 html
      // 上传 html
      wx.request({
        url: 'xxx',
        data: {
          html
        },
        success: () => {
          this.setData({
            editable: false // 结束编辑
          })
        }
      })
    }, 50)
  }
})

```

--------------------------------

### Multi-Source Video Loading

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/feature.md

Provide multiple 'source' tags within a 'video' or 'audio' element to ensure compatibility across different platforms. The component will attempt to load sources sequentially until one is playable.

```html
<!-- 组件将依次加载 xxx 和 yyy -->
<video controls>
  <source src="xxx">
  <source src="yyy">
</video>
```

--------------------------------

### Navigate to Anchor

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Use `navigateTo` to perform anchor jumps. This requires `use-anchor` to be true and is best called after the `ready` event for accuracy. The `offset` parameter takes precedence over the `use-anchor` prop.

```javascript
Page({
  ready () {
    // ctx 为组件实例
    ctx.navigateTo('anchor').then(() => {
      console.log('跳转成功')
    }).catch(err => {
      console.log('跳转失败：', err)
    })
  }
})
```

--------------------------------

### Interactive HTML Renderer

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/feedback.md

Use this tool to test HTML rendering. Input your HTML content and click 'Render' to see the output in the preview pane. The 'Clear' button resets the input.

```html
<div style="display: flex;">
  <div style="flex: 1; margin: 0 40px; display: flex; flex-direction: column;">
    <textarea id="input" style="flex: 1; width: 100%; padding: 5px; resize: none;" placeholder="请输入 html 内容"></textarea>
    <div style="text-align: center; margin-top: 10px;">
      <button onclick="reset()">清空</button>
      <button onclick="render()" style="margin-left: 20px;">渲染</button>
    </div>
  </div>
  <div style="flex: 0 0 320px; height: 568px; box-shadow: 0px 0px 10px #c0c0c0;">
    <iframe id="show" style="width: 100%; height: 100%; margin: 0;"></iframe>
  </div>
</div>
```

--------------------------------

### 修复HTML标签被转义的问题

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/faq.md

当HTML标签中的 '<' 和 '>' 字符被转义为 '&lt;' 和 '&gt;' 时，可以使用此方法进行替换以恢复正常显示。同样适用于 '< img' 被转义为 '< img' 的情况。

```javascript
html = html.replace(/&lt;/g, '<').replace(/&gt;/g, '>') // 如果还转义了其他字符如 &amp; 等也要进行替换
```

```javascript
html = html.replace(/< img/g, '<img')
```

--------------------------------

### Configure Highlight Plugin

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/plugin.md

Edit plugins/highlight/config.js to enable or disable features like long-press to copy, showing language names, and showing line numbers. Remember to regenerate the component package after modifying the configuration.

```javascript
{
  copyByLongPress: true,
  showLanguageName: true,
  showLineNumber: true
}
```

--------------------------------

### Image with Original Source for Preview

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/feature.md

Use the 'original-src' attribute to specify a different image URL for previewing compared to the one displayed. This allows for displaying a lower-resolution image while offering a high-resolution version on tap.

```html
<!-- 显示时使用 xxx，预览时使用 yyy -->
<img src="xxx" original-src="yyy" />
```

--------------------------------

### 为table标签添加边框属性

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/faq.md

当HTML的table标签没有边框时，可以通过此方法在table标签前添加'border="1"'属性来解决。

```javascript
html = html.replace(/<table/g, '<table border="1"')
```

--------------------------------

### Configure Highlight Plugin Options

Source: https://github.com/jin-yufeng/mp-html/blob/master/plugins/highlight/README.md

Edit the options at the top of plugins/highlight/config.js to enable or disable features like long-press to copy, showing language names, and showing line numbers. Note that changes require regenerating the component package.

```javascript
{
  // Whether to show the copy code menu when long-pressing the code block (uni-app nvue temporarily not supported)
  copyByLongPress: false,
  // Whether to show the language name in the upper right corner of the code block
  showLanguageName: true,
  // Whether to show line numbers on the left side
  showLineNumber: true
}
```

--------------------------------

### imgList

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Provides an array of all image sources, which can be modified for features like image preview (e.g., updating to HD image links or Base64). This is a property, not a function.

```APIDOC
## imgList

### Description
Provides an array of all image sources. This array is used for image preview and can be modified to affect automatic previews (e.g., changing to high-definition image links or converting to Base64).

This is a property, not a function. Do not add or remove elements from this array (modification is allowed); otherwise, automatic preview might encounter issues.

### Example
```javascript
// ctx is the component instance
var cover = ctx.imgList[0] // The first image can be used as a share cover image
ctx.imgList.forEach((src, i, array) => {
  console.log(src)

  // Replace with high-definition image link
  array[i] = src.replace('thumb', '')

  // Convert to Base64 for preview
  var fs = wx.getFileSystemManager && wx.getFileSystemManager()
  var info = src.match(/data:image\/(\S+?);(\S+?),(.+)/)
  if (!info) return
  var filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`
  fs && fs.writeFile({
    filePath,
    data: info[3],
    encoding: info[2],
    success: () => array[i] = filePath
  })
})
```
```

--------------------------------

### Search Method

Source: https://github.com/jin-yufeng/mp-html/blob/master/plugins/search/README.md

The `search` method is mounted on component instances and is used for keyword searching. It accepts a search key, an anchor flag, and a style for marking results. It returns a Promise with search result details.

```APIDOC
## search(key, anchor, style)

### Description
Performs a keyword search. If `key` is empty or not provided, the search is cancelled, and all highlights are removed.

### Method Signature
`ctx.search(key, anchor, style)`

### Parameters
#### Path Parameters
- **key** (String | RegExp) - Required - The keyword or regular expression to search for. Case-sensitive when a string.
- **anchor** (Boolean) - Optional - Defaults to `false`. If `true`, search results are set as anchors. This may slightly reduce efficiency.
- **style** (String) - Optional - Defaults to `background-color:yellow`. The CSS style to apply when highlighting search results.

### Returns
*Promise*

#### Success Response
- **num** (Number) - The total number of search results found.
- **highlight** (Function) - A function to highlight the i-th result. `highlight(i, style)` where `i` is the result index (1 to `num`) and `style` is an optional CSS string.
- **jump** (Function) - A function to jump to the i-th result. `jump(i, offset)` where `i` is the result index (1 to `num`) and `offset` is an optional vertical offset.

### Request Example
```javascript
function performSearch (ctx) {
  ctx.search('example', true, 'background-color:lightblue').then(res => {
    if (res.num > 0) {
      res.highlight(1, 'background-color:yellow')
      res.jump(1, -50)
    }
  })
}
```

### Additional Notes
- Calling `search` again will reset previous results and their associated methods.
- Only one result can be highlighted at a time.
- Search is limited to within a single text node.
```

--------------------------------

### 替换HTML换行符为<br>标签

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/faq.md

将HTML内容中的换行符 '\n' 替换为 '<br>' 标签，以在渲染时保留换行效果。

```javascript
html = html.replace(/\n/g, '<br>')
```

--------------------------------

### Perform Keyword Search

Source: https://github.com/jin-yufeng/mp-html/blob/master/plugins/search/README.md

Use the `search` method on the component instance to find keywords. The `anchor` parameter, when true, sets search results as anchors. The returned Promise provides methods to highlight and jump to specific results.

```javascript
function search (key) {
  // ctx 为组件实例
  ctx.search(key, true).then(res => {
    res.highlight(1)
    res.jump(1, -50) // 高亮第 1 个结果并跳转到该位置，偏移量 -50
  })
}
```

--------------------------------

### CSS for Baidu Base Library Compatibility

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/question/faq.md

Apply these styles to app.css for Baidu base libraries between 3.240.10 and 3.260.25 to fix display issues.

```css
/* a 标签默认效果 */
._a {
  padding: 1.5px 0 1.5px 0;
  color: #366092;
  word-break: break-all;
}

/* a 标签点击态效果 */
._hover {
  text-decoration: underline;
  opacity: 0.7;
}

/* 图片默认效果 */
._img {
  max-width: 100%;
  -webkit-touch-callout: none;
}
```

--------------------------------

### getRect

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/advanced/api.md

Obtains the position and size of the rich text content. If `lazy-load` is enabled, the size returned by the `ready` event might not be final; this method provides real-time size and position information.

```APIDOC
## getRect

### Description
Obtains the position and size of the rich text content. If `lazy-load` is enabled, the size returned by the `ready` event might not be final; this method provides real-time size and position information.

This method has a small chance of failure, so error handling is recommended.

### Return Value
- **Promise**

### Request Example
```javascript
// ctx is the component instance
ctx.getRect().then(rect => {
  console.log(rect) // boundingClientRect information
}).catch(err => {
  console.log('Failed to get rect: ', err)
})
```
```

--------------------------------

### Update mp-html via npm

Source: https://github.com/jin-yufeng/mp-html/blob/master/tools/demo/uni-app/README.md

Command to update the mp-html component to the latest version using npm.

```bash
npm update mp-html
```

--------------------------------

### Use mp-html in uni-app (uni-modules)

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/overview/quickstart.md

Integrate mp-html directly in your uni-app project using the uni-modules method. The component is automatically available without explicit import.

```vue
<template>
  <view>
    <!-- No need to import, can be used directly -->
    <mp-html :content="html" />
  </view>
</template>
<script>
  export default {
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>
```

--------------------------------

### Load Baidu Analytics Script

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/index.html

Appends the Baidu Analytics script to the document. Ensure this is done before other scripts that might rely on it.

```javascript
var _hmt = _hmt || [];
(function () {
  var hm = document.createElement("script")
  hm.src = "https://hm.baidu.com/hm.js?69554d980eb5eb786919e3c3ad37b2ce"
  var s = document.getElementsByTagName("script")[0]
  s.parentNode.insertBefore(hm, s)
})()
```

--------------------------------

### Configure Domain for Link Concatenation

Source: https://github.com/jin-yufeng/mp-html/blob/master/docs/basic/prop.md

The `domain` attribute is used to specify a base domain for constructing absolute URLs from relative paths. Ensure the domain includes the protocol (e.g., 'https://example.com'). Relative paths containing '..\/' are not supported.

```html
<!-- 假设 domain 属性被设置为 https://example.com
     以下链接均会被拼接为 https://example.com/path -->
<img src="//example.com/path" />
<img src="/path" />
<div style="background-image:url('path')"></div>
```