{"id":13637787,"url":"https://github.com/jin-yufeng/mp-html","last_synced_at":"2025-05-14T04:07:12.797Z","repository":{"id":37675494,"uuid":"181125174","full_name":"jin-yufeng/mp-html","owner":"jin-yufeng","description":"小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用","archived":false,"fork":false,"pushed_at":"2025-04-19T14:11:21.000Z","size":4265,"stargazers_count":3443,"open_issues_count":53,"forks_count":501,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-19T17:58:23.578Z","etag":null,"topics":["editor","html","miniprogram","rich-text","uni-app","wx"],"latest_commit_sha":null,"homepage":"https://jin-yufeng.gitee.io/mp-html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jin-yufeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-13T05:24:15.000Z","updated_at":"2025-04-19T14:11:25.000Z","dependencies_parsed_at":"2023-11-17T11:29:57.231Z","dependency_job_id":"46a50edb-1a6d-42cb-ab7a-fafc07c2ef02","html_url":"https://github.com/jin-yufeng/mp-html","commit_stats":{"total_commits":180,"total_committers":10,"mean_commits":18.0,"dds":0.07222222222222219,"last_synced_commit":"c0b780bd4346d920c610834a4fcf971370762775"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jin-yufeng%2Fmp-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jin-yufeng%2Fmp-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jin-yufeng%2Fmp-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jin-yufeng%2Fmp-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jin-yufeng","download_url":"https://codeload.github.com/jin-yufeng/mp-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254067859,"owners_count":22009265,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","html","miniprogram","rich-text","uni-app","wx"],"created_at":"2024-08-02T01:00:32.706Z","updated_at":"2025-05-14T04:07:07.779Z","avatar_url":"https://github.com/jin-yufeng.png","language":"JavaScript","funding_links":[],"categories":["UI模板","工具列表","组件"],"sub_categories":["3、小程序模板","Web 开发框架或模板"],"readme":"# mp-html\r\n\r\n\u003e 一个强大的小程序富文本组件\r\n\r\n![star](https://img.shields.io/github/stars/jin-yufeng/mp-html)\r\n![forks](https://img.shields.io/github/forks/jin-yufeng/mp-html)\r\n[![npm](https://img.shields.io/npm/v/mp-html)](https://www.npmjs.com/package/mp-html)\r\n![downloads](https://img.shields.io/npm/dt/mp-html)\r\n[![Coverage Status](https://coveralls.io/repos/github/jin-yufeng/mp-html/badge.svg?branch=master)](https://coveralls.io/github/jin-yufeng/mp-html?branch=master)\r\n![license](https://img.shields.io/github/license/jin-yufeng/mp-html)\r\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\r\n\r\n## 功能介绍\r\n- 支持在多个主流的小程序平台和 `uni-app` 中使用\r\n- 支持丰富的标签（包括 `table`、`video`、`svg` 等）\r\n- 支持丰富的事件效果（自动预览图片、链接处理等）\r\n- 支持设置占位图（加载中、出错时、预览时）\r\n- 支持锚点跳转、长按复制等丰富功能\r\n- 支持大部分 *html* 实体\r\n- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）\r\n- 效率高、容错性强且轻量化（`≈25KB`，`9KB gzipped`）\r\n\r\n查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多\r\n\r\n## 使用方法\r\n### 原生平台\r\n- `npm` 方式\r\n  1. 在项目目录下安装组件包\r\n\r\n     ```bash\r\n     npm install mp-html\r\n     ```\r\n  2. 开发者工具中勾选 `使用 npm 模块`（若没有此选项则不需要）并点击 `工具 - 构建 npm`\r\n  3. 在需要使用页面的 `json` 文件中添加\r\n\r\n     ```json\r\n     {\r\n       \"usingComponents\": {\r\n         \"mp-html\": \"mp-html\"\r\n       }\r\n     }\r\n     ```\r\n  4. 在需要使用页面的 `wxml` 文件中添加\r\n\r\n     ```html\r\n     \u003cmp-html content=\"{{html}}\" /\u003e\r\n     ```\r\n  5. 在需要使用页面的 `js` 文件中添加\r\n\r\n     ```javascript\r\n     Page({\r\n       onLoad () {\r\n         this.setData({\r\n           html: '\u003cdiv\u003eHello World!\u003c/div\u003e'\r\n         })\r\n       }\r\n     })\r\n     ```\r\n- 源码方式\r\n  1. 将源码中对应平台的代码包（`dist/platform`）拷贝到 `components` 目录下，更名为 `mp-html`\r\n  2. 在需要使用页面的 `json` 文件中添加\r\n\r\n     ```json\r\n     {\r\n       \"usingComponents\": {\r\n         \"mp-html\": \"/components/mp-html/index\"\r\n       }\r\n     }\r\n     ```\r\n  \r\n  后续步骤同上\r\n\r\n查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多\r\n\r\n### uni-app\r\n- 源码方式\r\n  1. 将源码中 `dist/uni-app` 内的内容拷贝到项目根目录下  \r\n     可以直接通过 [插件市场](https://ext.dcloud.net.cn/plugin?id=805) 引入\r\n  2. 在需要使用页面的 `vue` 文件中添加\r\n\r\n     ```vue\r\n     \u003ctemplate\u003e\r\n       \u003cview\u003e\r\n         \u003cmp-html :content=\"html\" /\u003e\r\n       \u003c/view\u003e\r\n     \u003c/template\u003e\r\n     \u003cscript\u003e\r\n       import mpHtml from '@/components/mp-html/mp-html'\r\n       export default {\r\n         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入\r\n         components: {\r\n           mpHtml\r\n         },\r\n         data () {\r\n           return {\r\n             html: '\u003cdiv\u003eHello World!\u003c/div\u003e'\r\n           }\r\n         }\r\n       }\r\n     \u003c/script\u003e\r\n     ```\r\n- `npm` 方式\r\n  1. 在项目目录下安装组件包\r\n\r\n     ```bash\r\n     npm install mp-html\r\n     ```\r\n  2. 在需要使用页面的 `vue` 文件中添加\r\n\r\n     ```vue\r\n     \u003ctemplate\u003e\r\n       \u003cview\u003e\r\n         \u003cmp-html :content=\"html\" /\u003e\r\n       \u003c/view\u003e\r\n     \u003c/template\u003e\r\n     \u003cscript\u003e\r\n       import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'\r\n       export default {\r\n         // 不可省略\r\n         components: {\r\n           mpHtml\r\n         },\r\n         data () {\r\n           return {\r\n             html: '\u003cdiv\u003eHello World!\u003c/div\u003e'\r\n           }\r\n         }\r\n       }\r\n     \u003c/script\u003e\r\n     ```\r\n\r\n  使用 `cli` 方式运行的项目，通过 `npm` 方式引入时，需要在 `vue.config.js` 中配置 `transpileDependencies`，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)  \r\n  如果在 `nvue` 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行  \r\n\r\n查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多\r\n\r\n## 组件属性\r\n\r\n| 属性 | 类型 | 默认值 | 说明 |\r\n|:---:|:---:|:---:|---|\r\n| container-style | String |  | 容器的样式（[2.1.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v210)） |\r\n| content | String |  | 用于渲染的 html 字符串 |\r\n| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |\r\n| domain | String |  | 主域名（用于链接拼接） |\r\n| error-img | String |  | 图片出错时的占位图链接 |\r\n| lazy-load | Boolean | false | 是否开启图片懒加载 |\r\n| loading-img | String |  | 图片加载过程中的占位图链接 |\r\n| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |\r\n| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |\r\n| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |\r\n| selectable | Boolean | false | 是否开启文本长按复制 |\r\n| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |\r\n| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |\r\n| tag-style | Object |  | 设置标签的默认样式 |\r\n| use-anchor | Boolean | false | 是否使用锚点链接 |\r\n\r\n查看 [属性](https://jin-yufeng.gitee.io/mp-html/#/basic/prop) 了解更多\r\n\r\n## 组件事件\r\n\r\n| 名称 | 触发时机 |\r\n|:---:|---|\r\n| load | dom 树加载完毕时 |\r\n| ready | 图片加载完毕时 |\r\n| error | 发生渲染错误时 |\r\n| imgtap | 图片被点击时 |\r\n| linktap | 链接被点击时 |\r\n\r\n查看 [事件](https://jin-yufeng.gitee.io/mp-html/#/basic/event) 了解更多\r\n\r\n## api\r\n组件实例上提供了一些 `api` 方法可供调用\r\n\r\n| 名称 | 作用 |\r\n|:---:|---|\r\n| in | 将锚点跳转的范围限定在一个 scroll-view 内 |\r\n| navigateTo | 锚点跳转 |\r\n| getText | 获取文本内容 |\r\n| getRect | 获取富文本内容的位置和大小 |\r\n| setContent | 设置富文本内容 |\r\n| imgList | 获取所有图片的数组 |\r\n| pauseMedia | 暂停播放音视频（[2.2.2+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v222)） |\r\n| setPlaybackRate | 设置音视频播放速率（[2.4.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v240)） |\r\n\r\n查看 [api](https://jin-yufeng.gitee.io/mp-html/#/advanced/api) 了解更多\r\n\r\n## 插件扩展  \r\n除基本功能外，本组件还提供了丰富的扩展，可按照需要选用\r\n\r\n| 名称 | 作用 |\r\n|:---:|---|\r\n| audio | 音乐播放器 |\r\n| editable | 富文本编辑 |\r\n| emoji | 解析 emoji |\r\n| highlight | 代码块高亮显示 |\r\n| markdown | 渲染 markdown |\r\n| search | 关键词搜索 |\r\n| style | 匹配 style 标签中的样式 |\r\n| txv-video | 使用腾讯视频 |\r\n| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |\r\n| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |\r\n| card | 卡片展示 by [@whoooami](https://github.com/whoooami) |\r\n\r\n查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多\r\n\r\n## 使用案例\r\n\r\n| [官方示例](https://github.com/jin-yufeng/mp-html-demo) | 欢喜商城 | 多么生活 | 食法查 | 微慕 | 古典文学名著阅读 |\r\n|:---:|:---:|:---:|:---:|:---:|:---:|\r\n| ![富文本插件](docs/assets/case/富文本插件.jpg) | ![欢喜商城](docs/assets/case/欢喜商城.png) | ![多么生活](docs/assets/case/多么生活.jpg) | ![食法查](docs/assets/case/食法查.png) | ![微慕](docs/assets/case/微慕.jpg) | ![古典文学名著阅读](docs/assets/case/古典文学名著阅读.jpg) |\r\n\r\n| 科学复习 | [程序员技术之旅](https://github.com/fendoudebb/z-blog-wx) | 典典博客 | 优秀笔记 | 365 刷题 | 同城共享书 |\r\n|:---:|:---:|:---:|:---:|:---:|:---:|\r\n| ![科学复习](docs/assets/case/科学复习.png) | ![程序员技术之旅](docs/assets/case/程序员技术之旅.jpg) | ![典典博客](docs/assets/case/典典博客.jpg) | ![优秀笔记](docs/assets/case/优秀笔记.jpg) | ![365刷题](docs/assets/case/365刷题.jpg) | ![同城共享书](docs/assets/case/同城共享书.jpg) |\r\n\r\n| [技术源 share](https://github.com/wangsrGit119/mini-blog-halo) | 你的代码写的真棒 | 谛否 | 小莫唐尼 | [模版演示](https://github.com/zhihuifanqiechaodan/miniprogram-template) | AI瓦力 |\r\n|:---:|:---:|:---:|:---:|:---:|:---:|\r\n| ![技术源share](docs/assets/case/技术源share.jpg) | ![你的代码写的真棒](docs/assets/case/你的代码写的真棒.jpg) | ![谛否](docs/assets/case/谛否.jpg) | ![小莫唐尼](docs/assets/case/小莫唐尼.png) | ![MiniProgram模版演示](docs/assets/case/MiniProgram模版演示.jpg) | ![AI瓦力](docs/assets/case/AI瓦力.jpg) |\r\n\r\n以上排名不分先后，更多可见 [使用案例收集](https://github.com/jin-yufeng/mp-html/issues/27)（欢迎添加）  \r\n\r\n## 许可与支持\r\n- 许可  \r\n  您可以免费的使用（包括商用）、复制或修改本组件 [MIT License](https://github.com/jin-yufeng/mp-html/blob/master/LICENSE)  \r\n  在用于生产环境前务必经过充分测试，由插件 `bug` 带来的损失概不负责（可以自行修改源码）  \r\n\r\n- 联系  \r\n  欢迎加入 `QQ` 交流群：  \r\n  群1（已满）：`699734691`  \r\n  群2（已满）：`778239129`  \r\n  群3：`960265313`  \r\n  ![group](docs/assets/group.jpg)  \r\n\r\n- 支持  \r\n  ![支持](docs/assets/sponsor.png)   \r\n\r\n## 更新日志\r\n- v2.5.0 (20240422)\r\n  1. `U` `play` 事件增加返回 `src` 等信息 [详细](https://github.com/jin-yufeng/mp-html/issues/526)\r\n  2. `U` `preview-img` 属性支持设置为 `all` 开启 `base64` 图片预览 [详细](https://github.com/jin-yufeng/mp-html/issues/536)\r\n  3. `U` `editable` 插件增加简易模式（点击文字直接编辑）\r\n  4. `U` `latex` 插件支持块级公式 [详细](https://github.com/jin-yufeng/mp-html/issues/582)\r\n  5. `F` 修复了表格部分情况下背景丢失的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/587)\r\n  6. `F` 修复了部分 `svg` 无法显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/591)\r\n  7. `F` 修复了 `uni-app` 包 `h5` 和 `app` 端部分情况下样式无法识别的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/518)\r\n  8. `F` 修复了 `latex` 插件部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/580)\r\n  9. `F` 修复了 `editable` 插件表格无法删除的问题\r\n  10. `F` 修复了 `editable` 插件 `uni-app` 包 `vue3` `h5` 端点击图片报错的问题\r\n  11. `F` 修复了 `editable` 插件 `uni-app` 包点击表格没有菜单栏的问题\r\n\r\n- v2.4.3 (20240121)\r\n  1. `A` 增加 [card](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#card) 插件 [详细](https://github.com/jin-yufeng/mp-html/pull/533) by [@whoooami](https://github.com/whoooami)\r\n  2. `F` 修复了 `svg` 中包含 `foreignobject` 可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/523)\r\n  3. `F` 修复了合并单元格的表格部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/561)\r\n  4. `F` 修复了 `img` 标签设置 `object-fit` 无效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/567)\r\n  5. `F` 修复了 `latex` 插件公式会换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/540) \r\n  6. `F` 修复了 `uni-app` 包 `editable` 和 `audio` 插件共用时点击 `audio` 无法编辑的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/529) by [@whoooami](https://github.com/whoooami)\r\n  7. `F` 修复了支付宝小程序设置了宽高的图片可能显示不正常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/544)\r\n  8. `F` 修复了 `uni-app` 包微信小程序部分情况下图片会报错 `replace of undefined` 的问题\r\n  9. `F` 修复了 `uni-app` 包快手小程序图片不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/571)\r\n\r\n  从 `1.x` 的升级方法可见 [更新指南](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog?id=v200)\r\n\r\n查看 [更新日志](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog) 了解更多\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjin-yufeng%2Fmp-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjin-yufeng%2Fmp-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjin-yufeng%2Fmp-html/lists"}