小程序解析富文本(支持视频,支持微信编辑器,支持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:\/\/v\.qq\.com.*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"
  }
}

你可能感兴趣的:(小程序,小程序)