uniapp 富文本解析

富文本解析插件：https://ext.dcloud.net.cn/plugin?id=805

 

使用方法

• uni_modules 方式

  1.  使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/mp-html 目录下
  2. 在需要使用页面的 (n)vue 文件中添加

     <!-- 不需要引入，可直接使用 -->
     <mp-html :content="html" />

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

  3. 需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可

• 源码方式

  1. 从 github 或 gitee 下载源码
     插件市场的 非 uni_modules 版本 无法更新，不建议从插件市场获取
  2. 在需要使用页面的 (n)vue 文件中添加

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

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

• npm 方式

  1. 在项目根目录下执行

     npm install mp-html

  2. 在需要使用页面的 (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>'
      }
     }
     }

  3. 需要更新版本时执行以下命令即可

     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

从插件市场导入的包中 不含有 扩展插件，需要使用插件参考以下方法：

1. 获取完整组件包

   npm install mp-html

2. 编辑 tools/config.js 中的 plugins 项，选择需要的插件
3. 生成新的组件包
   在 node_modules/mp-html 目录下执行

   npm install
   npm run build:uni-app

4. 拷贝 dist/uni-app 中的内容到项目根目录