文本编辑器中复制粘贴自动下载内容中的网络图片并替换

朱雀 2020-10-25 08:35 661阅读 0赞

wangEditor为例：

前端代码：

let editor = new weditor('#editor');
    editor.customConfig.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        //给内容里的IMG标签加上一个自适应宽度
        let contenthtml = content.replace(/<img/g,'<img style="max-width:100%;"');
        //获取内容中所有的img标签
        let imgStrs = contenthtml.match(/<img.*?>/g);
        //遍历img集合
        $.each(imgStrs,function(i,img){
            //获取img中的SRC路径
            let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
            let imgurl=img.match(srcReg)[1];
            //将网络图片路径替换成加载中的图片并加上序号，方便替换本地图片
            contenthtml=contenthtml.replace(imgurl,"../img/loading.gif?num="+i);
            //图片下载接口返回对应的本地路径
            $.ajax({
                url: common.ctxPaths + '/onlinetopc',
                type: 'POST',
                dataType: 'json',
                data: {
                    imgurl: imgurl,
                },
                success: function (data) {
                    if (data.code == 200) {
                        //将下载成功的图片路径替换到对应的位置
                        let url = "/static/editor/"+data.filename;
                        contenthtml=contenthtml.replace("../img/loading.gif?num="+i,url);
                        editor.txt.html(contenthtml);
                    }
                }
            })
        })
        
        return contenthtml
    }

后端代码：

我的后端是用python+flask开发的

#图片线上转本地
    @app.route("/adminapi/onlinetopc",methods=["post"])
    def onlinetopc():
        args = request.args if request.method == 'GET' else request.form
        if not session.get('user'):
            signresult={"code":209,"msg":"登录认证失败"}
            return jsonify(signresult)
        imgurl = args.get('imgurl', '')
        response=requests.get(imgurl,timeout=30)
        img = response.content
        file_path_dir = os.path.join('app/static/editor')
        if not os.path.exists(file_path_dir):
            os.makedirs(file_path_dir)
        filename = "e_{}.{}".format(uuid.uuid4(), "jpg")
        file_path = os.path.join('{}/{}'.format(file_path_dir, filename))
        with open(file_path, 'wb') as f:
            f.write(img)
        pinfo = {}
        pinfo["code"] = 200
        pinfo["filename"] = filename
        return jsonify(pinfo)

后端就不用多说了，这里就是实现了下载网络图片保存到本地并返回对应的文件名，这里大家看下思路就行，具体的方法自己根据自己的代码实现，可以从上面看到，我是在each里面遍历的，比如有10张图片我就要遍历10次，这里你也可以提取内容中所有的图片进行一次上传，一次返回，可能处理的时间有点久，还可以结合websocket进行实时返回等等，方法太多了这里就不再一一说明了。

发表评论取消回复

表情：

评论列表（有 0 条评论，661人围观）

还没有评论，来说两句吧...

相关阅读

相关 wangeditor编辑器复制粘贴图片自动上传

1、前端引用代码 ![e9edf946ecb16fea74193ba26b0a60f3.png][] 请求文件上传的默认请求是一个文件，作为具有“upload”字段的表

今天药忘吃喽~/ 2023年10月08日 20:46/ 0 赞/ 76 阅读

相关 uniapp中使用复制功能(复制文本到粘贴板)

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png] > 在开发会遇到复制手机号啊,复制地址啊,复制内容啊,这样的需求,下

水深无声/ 2023年02月24日 11:16/ 0 赞/ 70 阅读

相关 Java Word中的文本、图片替换功能

Word中的替换功能以查找指定文本然后替换为新的文本，可单个替换或全部替换。以下将要介绍的内容，除常见的以文本替换文本外，还将介绍不同对象间相互替换的方法，具体可包括： 1.

深碍√TFBOYSˉ_/ 2023年02月14日 10:24/ 0 赞/ 25 阅读

相关 java图片循环替换_Java Word中的文本、图片替换功能

Word中的替换功能以查找指定文本然后替换为新的文本，可单个替换或全部替换。以下将要介绍的内容，除常见的以文本替换文本外，还将介绍不同对象间相互替换的方法，具体可包括： 1.

骑猪看日落/ 2022年11月06日 10:50/ 0 赞/ 215 阅读

相关 OneNote - 无法复制图片中的文本

OneNote - 无法复制图片中的文本 Window 10 自带的 OneNote 属于简易版本，没有文字识别功能。安装正常版本 OneNote 2016。 1.

青旅半醒/ 2022年10月31日 01:46/ 0 赞/ 331 阅读

相关 php去除富文本编辑器中的内容格式

在新的项目中遇到需要在文章列表页显示文章内容的开头几行纯文字部分，因为后台是通过富文本编辑器添加的文章，直接返回的数据是带有格式的数据，造成列表页样式混乱，所以需要去除格式返回

灰太狼/ 2022年04月18日 02:47/ 0 赞/ 333 阅读

相关使任何富文本编辑器可粘贴图片，js监听鼠标粘贴事件，亲测summernote编辑器

之我有一篇文章写到了，怎么处理富文本上传图片后单用户删除了，造成服务器大量垃圾图片的问题，解决方案请戳链接 [怎么保证用富文本编辑器不让服务器产生垃圾图片，神器redis

梦里梦外;/ 2022年02月24日 13:18/ 0 赞/ 655 阅读

相关 Java Swing 文本编辑器 (全选，剪切，复制，粘贴)

Java GUI 编程 `AWT`(Abstract Window Toolkit) 抽象窗口工具包 `Swing` 基于AWT。 `SWT`(Stan

r囧r小猫/ 2022年02月02日 18:21/ 0 赞/ 541 阅读

相关文本内容替换

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 import java.io.BufferedReade

太过爱你忘了你带给我的痛/ 2021年11月01日 09:56/ 0 赞/ 362 阅读

相关文本编辑器中复制粘贴自动下载内容中的网络图片并替换

言归正传，自己搞了个电商项目，在后台添加产品的时候，可能绝大多数都是淘宝上的产品吧，一个一个扒图片下来，在排版编辑一个一个上传到编辑器里，这种枯燥无味的操作真的太痛苦了，...

朱雀/ 2020年10月25日 08:35/ 0 赞/ 662 阅读