使用场景：

为了解决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

微信小程序富文本插件mp-html相关推荐

微信小程序富文本插件
一.简介及说明在小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理. 微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生展 ...
微信小程序-富文本插件wxParse
一.准备工作 github下载waParse插件,地址:https://github.com/icindy/wxParse 放到小程序目录下:和utils平级二.使用 //WXML页面 <im ...
微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效给rich-text标签加css 样式 white-space: pre;
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
微信小程序富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件掌握使用微信小程序的表单组件掌握使用微信小程序的form表单及如何提交数据掌握使用微信小程序的导航及跳转组件一.基础内容组件 1.1 ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...

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

使用场景：

效果图如下：

使用方法

组件属性：

注意：

微信小程序富文本插件mp-html相关推荐

最新文章

热门文章