vue+element使用Tinymce富文本组件图片粘贴上传后预览问题

首先使用Tinymce富文本组件这里不说–>自行百度

我实现的方式 使用js去操作获取class然后给他添加单击事件，同时也把所有src地址全部放在一个数组里面，最后点击的时候去遍历一下数组获取下标，就能是实现了

下面是我的代码（我这里采用了组件递归，所以看着比较麻烦，单组件的就没这么复杂）

外层组件1

<template>
  <el-card v-if="showHandler" class="box-card">
    <div slot="header" class="clearfix">
      <h3 style="float:left;padding: 0;margin: 0">{{ this.$route.query.title }}</h3>
    </div>
    <detail ref="detailRef" :image-views="imageViews" :tooltip="tooltip" :detail-list="remarkList" @onReplyClick="handleReplyClick" />
  </el-card>
</template>

<script>
import detail from './detail'

export default {
  name: 'HandlerRemark',
  components: {
    detail
  },
  props: {
    remarkList: {
      type: Array,
      default: () => []
    },
    tooltip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      handlerTitle: '',
      showHandler: true,
      imageViews: []
    }
  },
  created() {
    this.handlerTitle = this.$route.query.title
    this.showHandler = this.handlerTitle !== '' && this.handlerTitle !== 'null'
  },
  mounted() {
    setTimeout(() => {
      this.initImgs()
    }, 500)
  },
  methods: {
    handleReplyClick(row) {
      this.$emit('onReplyClick', row)
    },
    // 初始化获取当前页面所有指定class的图片标签
    initImgs() {
      const that = this
      const tinymceP = document.getElementsByClassName('card_images')
      if (tinymceP.length !== 0) {
        for (let j = 0; j < tinymceP.length; j++) {
          const imags = tinymceP[j].getElementsByTagName('img')
          for (let i = 0; i < imags.length; i++) {
            if (imags[i].src.includes('Images')) {
              if (that.imageViews.indexOf(imags[i].src) === -1) {
                that.imageViews.push(imags[i].src)
                imags[i].addEventListener('click', function(ev) {
                  var target = ev.target || ev.srcElement
                  if (target.nodeName.toLowerCase() === 'img') {
                    // 防止事件冒泡
                    ev.stopPropagation()
                    that.$refs.detailRef.imageIndexClick(imags[i].src)
                  }
                }, false)
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.el-card{
  .el-card__body{
    padding-top:0
  }
}
</style>

里面的内容组件

<template>
  <div>
    <el-timeline>
      <el-timeline-item v-for="(item) in detailList" :key="item.id" placement="top" :timestamp="(item.creator === 'admin'?'回答：':'提问：')+item.createTime">
        <el-card class="mouse-style" shadow="hover" @click.native="handleReplyClick(item)">
          <h4>{{ item.creator }} </h4>
          <el-tooltip v-if="tooltip" class="item" effect="dark" content="点击回复" placement="top">
            <p class="card_images" style="padding: 0;margin: 0" v-html="item.demandRemark" />
          </el-tooltip>
          <p v-else class="card_images" style="padding: 0;margin: 0" v-html="item.demandRemark" />
        </el-card>
        <detail ref="detailRef" :key="item.createTime" :tooltip="tooltip" :detail-list="item.aydDemandDetailList" @onReplyClick="handleReplyClick(item)" />
      </el-timeline-item>
    </el-timeline>
    <el-image-viewer v-if="showViewer" :on-close="()=>{showViewer=false}" :url-list="imageViews" :initial-index="imageIndex" />
  </div>
</template>

<script>
// 需要单独引用 element的预览图插件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'Detail',
  components: {
    'el-image-viewer': ElImageViewer
  },
  props: {
  	// 数据
    detailList: {
      type: Array,
      default: () => []
    },
    // Tooltip 文字提示
    tooltip: {
      type: Boolean,
      default: true
    },
    // 预览图里面的图片SRC数组
    imageViews: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    // 是否显示预览图
      showViewer: false,
      // 预览图初始下标
      imageIndex: 0
    }
  },
  methods: {
  // 单击获取当前行
    handleReplyClick(row) {
      this.$emit('onReplyClick', row)
    },
    
    // 单击某个图片获取SRC地址 通过父组件的ref调用
    imageIndexClick(src) {
      if (!src) {
        this.imageIndex = 0
        this.showViewer = true
        return
      }
      for (let i = 0; i < this.imageViews.length; i++) {
        if (this.imageViews[i] === src) {
          this.imageIndex = i
          break
        }
      }
      this.showViewer = true
    }

  }
}
</script>
<style lang="css" scoped>

</style>
<style lang="scss" scoped>
.mouse-style :hover {
  cursor: pointer
}

::v-deep img[src*="Images"] {
  width: 50%;
}
</style>