解决在tinymce粘贴微信公众号文章,图片展示不了的问题

961 阅读2分钟

632a9d1dbefeb9e12626a362b63509d.png

需求:

运营:我想在富文本编辑器直接粘贴公众号的图文

我:微信对于这些图片是有版权和防盗链处理的,是不能直接使用他们的图片链接到别的地方

运营:我就是想要在编辑器里面粘贴公众号的图片

我:......

使用的是tinymce编辑器,查看粘贴出来的信息,微信那边对图片标签增加了 crossorigin 这个属性

image.png

crossorigin 属性

crossorigin 属性在 <audio><img><link><script> 和 <video> 元素中有效,它们提供对 CORS 的支持,定义该元素如何处理跨源请求,从而实现对该元素获取数据的 CORS 请求的配置。根据元素的不同,该属性可以是一个 CORS 设置属性。

并具有以下可能的值

  • anonymous

请求使用了 CORS 标头,且证书标志被设置为 'same-origin'。没有通过 cookies、客户端 SSL 证书或 HTTP 认证交换用户凭据,除非目的地是同一来源。

  • use-credentials

请求使用了 CORS 标头,且证书标志被设置为 'include'。总是包含用户凭据

  • ""

将属性名称设置为空值,如 crossorigin 或 crossorigin="",与设置为 anonymous 的效果一样。

 不合法的关键字或空字符串会视为 anonymous 关键字。

src和data-src属性

个别图片复制出来的src属性值是一个bolb或者base64的格式,但是这个标签有一个data-src的属性是存放着真实网络地址

image.png

实现

通过以上分析的情况,我们就可以来修改这些属性,来达到我们的需求

tinymce编辑器提供了paste_preprocess``paste_postprocess两个粘贴回调

paste_preprocess

在这个回调主要是删除crossorigin属性

在粘贴的内容被插入到编辑器之前对其进行修改(也相当于自建过滤器)。

paste_postprocess

在这个回调是处理个别图片的格式是bolb、base64的

在粘贴的内容被解析DOM结构,但在被插入到编辑器之前,对其进行修改。

代码

paste_preprocess: function(plugin, args) {
  args.content = args.content.replaceAll('crossorigin','data-del')//去掉微信图片自带的跨域标识
},
paste_postprocess: function(plugin, args) {
  let imgList = args.node.getElementsByTagName('img')
  for(let i=0; i<imgList.length; i++) {
    let data_src = imgList[i].getAttribute('src')
    // 如果是data:或者blob格式的图片就把data-src的值赋值给src
    if(data_src.includes('data:') || data_src.includes('blob:')) {
      imgList[i].setAttribute('src', imgList[i].getAttribute('data-src'))
    }
  }
},

通过以上的修改,就可以随意的复制公众号的图片到我们的编辑器了(希望别被请到南山必胜客)

效果如下

image.png

crossorigin属性就被删除掉了,只有个别图片才会是blob的格式

以上的实现是在tinymce编辑器上的,其他编辑器应该也有粘贴的回调钩子可以在相对应的回调处理也能够展示处理