ed-frame-vue/lib/packages/EdRichPreview/index.js

easydata 基础组件

import Vue from "vue";
let Content = null
export default {
  name: 'EdRichPreview',
  props: {
    value: {type: String, default: '',},
  },
  // 文章编辑相关配置
  data() {
    return {
      editor: null,
      // 这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写
      defaultHtml: this.value,
    }
  },
  render(h) {
    if (this.value !== "") {
      let dome = this.resetString(this.value)
      Content = Vue.extend({
        template: `<template><div>${dome}</div></template>`
      })
      return Content ? h(Content) : null
    }
    return h('span')
  },
  methods: {
    /**
     * 重置产品介绍中图片地址
     * @name getImgSrc
     * @param htmlStr
     * */
    resetString(htmlStr) {
      try {
        return htmlStr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
          let params = this.getUrlParams(capture)
          let isUpload = Object.keys(params).length > 0 && this.hasObject(params, "t")
          let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/gi // 匹配图片中的src
          if (isUpload) {
            let str = capture.slice(capture.indexOf('/admin-api'), capture.length)
            let dome = match.replace(srcReg, `src="${this.$EdFrame.BASE_API + str}"`)
            return dome.replace('img', `ed-image preview`) + '</ed-image>'
          } else {
            return match
          }
        });
      } catch (e) {
        //TODO handle the exception
        return htmlStr;
      }
    },
    getUrlParams(url) {
      // \w+ 表示匹配至少一个(数字、字母及下划线), [\u4e00-\u9fa5]+ 表示匹配至少一个中文字符
      let pattern = /(\w+|[\u4e00-\u9fa5]+)=(\w+|[\u4e00-\u9fa5]+)/ig;
      let result = {};
      url.replace(pattern, ($, $1, $2) => {
        result[$1] = $2;
      })
      return result
    },
    // 检测对象中是否包含指定字段
    hasObject(thisArg, ...argArray) {
      return Object.prototype.hasOwnProperty.call(thisArg, ...argArray)
    },
  },

}