富文本解析插件:https://ext.dcloud.net.cn/plugin?id=805
使用方法
-
uni_modules
方式-
使用 HBuilder X 导入插件
按钮直接导入项目或点击下载插件 ZIP
按钮下载插件包并解压到项目的uni_modules/mp-html
目录下 - 在需要使用页面的
(n)vue
文件中添加<!-- 不需要引入,可直接使用 --> <mp-html :content="html" />
export default { data() { return { html: '<div>Hello World!</div>' } } }
- 需要更新版本时在
HBuilder X
中右键uni_modules/mp-html
目录选择从插件市场更新
即可
-
-
源码方式
-
npm 方式
- 在项目根目录下执行
npm install mp-html
- 在需要使用页面的
(n)vue
文件中添加<mp-html :content="html" />
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html' export default { // 不可省略 components: { mpHtml }, data() { return { html: '<div>Hello World!</div>' } } }
- 需要更新版本时执行以下命令即可
npm update mp-html
使用 cli 方式运行的项目,通过 npm 方式引入时,需要在 vue.config.js 中配置 transpileDependencies,
如果在 nvue 中使用还要将dist/uni-app/static
目录下的内容拷贝到项目的static
目录下,否则无法运行 - 在项目根目录下执行
组件属性
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
container-style | String | 容器的样式(2.1.0+) | |
content | String | 用于渲染的 html 字符串 | |
copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
domain | String | 主域名(用于链接拼接) | |
error-img | String | 图片出错时的占位图链接 | |
lazy-load | Boolean | false | 是否开启图片懒加载 |
loading-img | String | 图片加载过程中的占位图链接 | |
pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
selectable | Boolean | false | 是否开启文本长按复制 |
set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
tag-style | Object | 设置标签的默认样式 | |
use-anchor | Boolean | false | 是否使用锚点链接 |
查看 属性 了解更多
组件事件
名称 | 触发时机 |
---|---|
load | dom 树加载完毕时 |
ready | 图片加载完毕时 |
error | 发生渲染错误时 |
imgtap | 图片被点击时 |
linktap | 链接被点击时 |
查看 事件 了解更多
api
组件实例上提供了一些 api
方法可供调用
名称 | 作用 |
---|---|
in | 将锚点跳转的范围限定在一个 scroll-view 内 |
navigateTo | 锚点跳转 |
getText | 获取文本内容 |
getRect | 获取富文本内容的位置和大小 |
setContent | 设置富文本内容 |
imgList | 获取所有图片的数组 |
查看 api 了解更多
插件扩展
除基本功能外,本组件还提供了丰富的扩展,可按照需要选用
名称 | 作用 |
---|---|
audio | 音乐播放器 |
editable | 富文本 编辑(示例项目) |
emoji | 解析 emoji |
highlight | 代码块高亮显示 |
markdown | 渲染 markdown |
search | 关键词搜索 |
style | 匹配 style 标签中的样式 |
txv-video | 使用腾讯视频 |
img-cache | 图片缓存 by @PentaTea |
从插件市场导入的包中 不含有 扩展插件,需要使用插件参考以下方法:
- 获取完整组件包
npm install mp-html
- 编辑
tools/config.js
中的plugins
项,选择需要的插件 - 生成新的组件包
在node_modules/mp-html
目录下执行npm install npm run build:uni-app
- 拷贝
dist/uni-app
中的内容到项目根目录