美文网首页系统设计
ckEditor4实现复制公众号图片

ckEditor4实现复制公众号图片

作者: Xbbing | 来源:发表于2021-08-05 17:36 被阅读0次

    直接进度正题

        一般微信公众号的图片都是有版权的 如果直接复制就会显示如下:

        

    由于有版权问题会导致

    这时候就需要我们去处理,首先我们看下代码 会发现

    解析代码

    因为有版权问题 其实显示的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)

                                    }

                                })

                            }

                        }

                    })

                })

    这样就解决 公众号和网页 图片 或者 文章的复制粘贴功能了

    相关文章

      网友评论

        本文标题:ckEditor4实现复制公众号图片

        本文链接:https://www.haomeiwen.com/subject/jlomvltx.html