小程序 · rich-text富文本回显：解决video不显示 图片自适应

调用方法

this.formatContent(data.content)

js

formatContent(content) {
      let article = content.replace(/(\/gi, function ($0, $1) {
        return {
          ": ',
          ": '
,
          ": ",
          ": ",
          ": ",
          ": "
        }[$1];
      });
      let videoList = [];
      let videoReg = /|\/>)/gi;   //匹配到字符串中的 video 标签
      let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;  //匹配到字符串中的 video 标签 的路径
      let arr = article.match(videoReg) || [];  // arr 为包含所有video标签的数组
      let articleList = article.split('')   // 把字符串  从视频标签分成数组
      arr.forEach((item, index) => {
        var src = item.match(srcReg);
        videoList.push(src[1])     //所要显示的字符串中 所有的video 标签 的路径
      })
      let needArticleList = [];
      articleList.forEach((item, index) => {
        if (item != "" && item != undefined) {  //  常见的标签渲染
          needArticleList.push({
            type: 'rich-text',
            value: item + ""
          });
        }
        let articleListLength = articleList.length;  // 插入到原有video 标签位置
        if (index < articleListLength && videoList[index] != undefined) {
          needArticleList.push({
            type: 'video',
            value: videoList[index]
          })
        }
      })
      this.setData({
        contentList: needArticleList
      })
    },

html

  <view class="infoContentStyle" wx:for="{{contentList}}" wx:key="index">
    <rich-text wx:if="{{item.type=='rich-text'?true:false}}" class="content-container ql-editor" nodes="{{item.value}}">rich-text>
    <video wx:if="{{item.type=='video' && item.value != '' ?true:false}}" src="{{item.value}}" style="width:100%;height: 150px" frameborder="0">video>
  view>

插件参考
mp-html