captain-ui/es/rich-text/index.vue.js

有赞vue wap业务组件库

import fullfillImage from '@youzan/utils/fullfillImage';
import CommonUrl from '../common/url';
import create from '../utils/create';
var PLACEHODER_IMG = 'public_files/2016/04/07/705325469e746adee19e1d5b5cdaebb7.jpg';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: ['cap-richtext', {
        'cap-richtext--fullscreen': _vm.fullscreen
      }],
      style: _vm.richtextStyle,
      domProps: {
        "innerHTML": _vm._s(_vm.realContent)
      }
    });
  },
  name: 'rich-text',
  props: {
    fullscreen: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: '#ffffff'
    },
    content: {
      type: String,
      default: ''
    },
    urlMap: {
      type: Object,
      default: function _default() {
        return CommonUrl;
      }
    },
    isPreview: Boolean
  },
  computed: {
    richtextStyle: function richtextStyle() {
      return {
        'background-color': this.color
      };
    },
    realContent: function realContent() {
      if (this.isPreview) return this.content;
      var xssEscapedHtml = this.xssEscapedHtml(this.content);
      var oldYoukuVideoTransform = this.videoToHttps(xssEscapedHtml);
      var imgWithoutSize = this.imgWithoutSize(oldYoukuVideoTransform);
      var imgLazy = this.lazyload(imgWithoutSize);
      var result = this.qqVideoToHttps(imgLazy);
      return result;
    }
  },
  methods: {
    xssEscapedHtml: function xssEscapedHtml(value) {
      return value.replace(/\&lt\;(\s*|\/)script/gi, '<span><</span>$1script');
    },
    // youku old video to https
    videoToHttps: function videoToHttps(value) {
      var newYoukuReplaceHtml = '<a class="video-link" target="_blank" href="${1}"><img src="' + fullfillImage('public_files/2015/09/10/04eeb56eb29cbfbe29d67042be4d21ed.jpg', '', this.urlMap) + '"></a>';
      var oldYoukuVideoTransform = value.replace(/<iframe\s+class=\"edui-faked-video\"\s+src=\"((https?:\/\/)?([\da-z\.-]+)\.youku\.com([\/\w \.-=]*)*)\"[^>]*><\/iframe>/gi, newYoukuReplaceHtml);
      return oldYoukuVideoTransform;
    },
    imgWithoutSize: function imgWithoutSize(value) {
      return value.replace(/(<img[^>]*)\sheight=".*?"(.*?>)/gi, '$1$2');
    },
    // 图片懒加载
    lazyload: function lazyload(value) {
      var imgLazy = value.replace(/<img src=/g, '<img class="js-richtext-lazy-img" src="' + fullfillImage(PLACEHODER_IMG, '', this.urlMap) + '" data-src=');
      imgLazy = imgLazy.replace(/<img\s(data-origin-width=\"[\d\.]*?\"\sdata-origin-height=\"[\d\.]*?\")\ssrc=/g, '<img $1 class="js-richtext-lazy-img" src="' + fullfillImage(PLACEHODER_IMG, '', this.urlMap) + '" data-src=');
      return imgLazy;
    },
    // qq video to https
    qqVideoToHttps: function qqVideoToHttps(value) {
      var iframeSrcToHttps = value.replace(/<iframe class="edui-faked-video" src="http:\/\//g, '<iframe class="edui-faked-video" src="https://'); // 图片https替换

      var imgToHttps = iframeSrcToHttps.replace(/http:\/\/dn-kdt-img.qbox.me\/upload_files/g, 'https://dn-kdt-img.qbox.me/upload_files');
      imgToHttps = imgToHttps.replace(/http:\/\/img.yzcdn.cn\/upload_files/g, 'https://img.yzcdn.cn/upload_files');
      return imgToHttps;
    }
  },
  mounted: function mounted() {
    var qqVideos = Array.prototype.slice.call(document.querySelectorAll('.edui-faked-video'));

    if (qqVideos.length) {
      // 保持视频4：3宽高比
      var videoHeight = Math.floor(qqVideos[0].getBoundingClientRect().width * 0.75);
      qqVideos.forEach(function (el) {
        el.style.height = videoHeight + "px";
      });
    }
  }
});