小程序解析富文本支持视频,支持微信编辑器,支持135编辑器富文本样式
目录
小程序解析富文本（支持视频，支持微信编辑器，支持135编辑器富文本样式）
小程序的富文本插件rich-text不支持135等富文本，所以考虑wxParse解析富文本，但是wxParse不支持iframe标签，所以首先要
1.增加对iframe标签的解析：
在html2json.js中，增加
function html2json(html, bindName) {
HTMLParser(html, {
start: function (tag, attrs, unary) {
...
//对img添加额外数据
if (node.tag === 'img') {
node.imgIndex = results.images.length;
var imgUrl = node.attr.src;
if(!imgUrl) {
return
}
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}
// 下面是需要我们添加的代码
// 处理iframe的地址，取出vid并放入数据中，
if(node.tag === 'iframe') {
// safeGetValue 只是一个取值的函数，可自行编写自己的取值函数。
node.vid = safeGetValue([1], node.attr.src.match(/https:\/\/vqqcom.*vid=(\w*)/))
}
.....
};
// 此函数作用类似于ramda的path和pathOr，用于安全取值。
function safeGetValue() {
const argsLength = arguments.length
if (argsLength !== 2 && argsLength !== 3) {
throw '必须为两个或者三个参数'
}
var defaultValue
if (argsLength === 3) {
var [_defaultValue, keys, item] = arguments
defaultValue = _defaultValue
} else {
var [keys, item] = arguments
}
if (!Array.isArray(keys)) {
throw '参数有误，取值的keys必须为数组'
}
try {
keys.forEach(key => {
item = item[key]
})
} catch (e) {
return defaultValue
}
return item
}
2.在wxParse.wxml中，增加视频模板：
<template name="wxPraseIframe2TencentVideoPlugin">
<view style="margin: 20rpx 0">
<txv-video
width="100%"
height="600rpx"
playerid="{{item.vid}}"
vid="{{item.vid}}"
autoplay="{{false}}"
>
</txv-video>
</view>
</template>3.在wxParse.wxml的循环模板中增加：
<template name="wxParse0">
...
<!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block>
<!--增加的内容：腾讯视频插件-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe2TencentVideoPlugin" data="{{item}}" />
</block>
<!--img类型-->
<block wx:elif="{{item.tag == 'img'}}">
<template is="wxParseImg" data="{{item}}" />
</block>
...
</template>4.添加腾讯视频插件
在小程序管理后台的“设置-第三方服务-插件管理”中添加“腾讯视频”插件
// 在你们的wxml上这样插入视频元素
<txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>// 在你们的json里面插入
"usingComponents": {
"txv-video": "plugin://tencentvideo/video"
}// 在app.json里面引入插件，注意插件版本号填最新的版本号
"plugins": {
"tencentvideo": {
"version": "1.2.4",
"provider": "wxa75efa648b60994b"
}
}