ckEditor4实现复制公众号图片
直接进度正题
一般微信公众号的图片都是有版权的 如果直接复制就会显示如下：
由于有版权问题会导致
这时候就需要我们去处理，首先我们看下代码 会发现
解析代码
因为有版权问题 其实显示的src就是最上面那个 ‘来自微信公众平台那张图片’，这样我们就可以从这里入手
我们可以先获取所有的img标签里面的 data-src 属性的值
var srcArr = []
// content为粘贴进ckeditor的html5代码。this.getData() ? this.getData() + e.data.dataValue : e.data.dataValue这块逻辑后面会说
var content = this.getData() ? this.getData() + e.data.dataValue : e.data.dataValue
// 拿取所有img标签里面的 data-src 属性的值，并放入数组中
content.replace(/<img [^>]*data-src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
srcArr.push(capture)
});
第二步拿到所有img src的值，逻辑如上
var b = content.match(/ src=\"([^\"]*)\"/g)
第三步就是把data-src的地址传给后端， 让后端拿到此地址做个下载，转为服务器地址给我闷就可以了
完整代码奉上 >.<
获取编辑器里的内容的html代码
getData() {
return this.instance ? this.instance.getData() : ''
},
editor.on('instanceReady', () => {
//editor的粘贴事件
editor.on('paste',(e) => {
var srcArr = []
var nowSrc = []
// 这里的content为什么要这样获取呢 因为paste事件获取的是上次的粘贴的内容，所以this.getData() 第一次就会为空而 e.data.dataValue获取的是此次粘贴的内容 这样就能获取所有内容
var content = this.getData() ? this.getData() + e.data.dataValue : e.data.dataValue
// 拿到所有的data-src
content.replace(/<img [^>]*data-src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
srcArr.push(capture)
});
//拿到所有的src
var b = content.match(/ src=\"([^\"]*)\"/g)
//因为是粘贴事件 这里做个判断 主要是区分 公众号和网页粘贴
if(srcArr.length > 0) {
const length = srcArr.length
srcArr.forEach(async (item, index )=> {
// 请求后端接口 我们将地址按顺序上传 为了防止 上传数组的话 后端有一个下载图片失败影响返回结果的问题
const { data } = await this.wxCopy({
url: item
})
nowSrc.push(data.path)
if( index == length -1 ){
b.forEach((i,k)=>{
//src地址替换为后端返回的地址
content = content.replace(i,` src=\"${nowSrc[k]}\"`)
})
//给editor赋值
this.instance.setData(content)
}
})
}else {
//这种情况就是网页图片复制粘贴
z if(b.length > 0) {
b = Array.from(new Set(b))
b.forEach(async (item, index) => {
const { data } = await this.wxCopy({
appid: this.appid,
url: item.slice(5)
})
content = content.replace(item, data.path)
if(index == b.length -1) {
this.instance.setData(content)
}
})
}
}
})
})
这样就解决 公众号和网页 图片 或者 文章的复制粘贴功能了
