微信小程序富文本插件mp-html

使用场景:

为了解决uni-app中”rich-text“富文本标签 不支持"微信小程序"
1.文字长按选中,复制等
2.富文本中的图片可点击预览

3.不能识别视频video组件的问题
在这里插入图片描述

偏偏后端传过来的数据又要用到富文本标签,然后找了很多组件,要不就是下载量低,要不就是里面功能太少,只有这款mp-html组件深得我心,里面功能丰富,简单实用,真的绝绝子,推荐给大家:

mp-html下载地址[https://ext.dcloud.net.cn/plugin?id=805]

效果图如下:

效果一:长按选中文字复制
在这里插入图片描述
效果二:.放大预览图片,长按可以保存图片,转发给朋友等效果
在这里插入图片描述
效果三:视频组件video可以渲染出来
在这里插入图片描述


使用方法

uni_modules 方式:

	<!--下载了以后, 不需要引入,可直接使用 -->
	<mp-html :content="newsInfo.details" selectable="true"  show-img-menu="true"/>  

npm 方式:
在项目根目录下执行

> npm install mp-html

在需要使用页面的 index.vue 文件中添加 :

<mp-html  :content="newsInfo.details" selectable="true"  show-img-menu="true"/>  

import mpHtml from ‘mp-html/dist/uni-app/components/mp-html/mp-html’
export default {
// 不可省略 components: { mpHtml },
data() {
return { html: ‘

Hello World!
’ }
}
}

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

npm update mp-html

组件属性:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意:

提示:还有好多方法,我只是放了一部分重要的属性和事件,具体请看 https://ext.dcloud.net.cn/plugin?id=805

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值