远程图片下载插件 for ckeditor

杰克工作室

开发[远程图片下载]插件的背景：

经常要将优秀的文章转载到我的网站，图片不可缺少。于是就有了此插件。

远程图片下载插件 for ckeditor功能：将ckeditor编辑区的图片下载到本地，并将编辑器中的旧图片地址改为本地地址，实现远程图片本地化。

注：此插件为js+php版。有网友问：有纯php版的吗？个人认为纯php版获取图片超时的可能性太大了。一些优秀的文章经常是15－25张图片，单张图片压缩后体积约为200KB，在普通的网络下很容易导致网络超时，部分图片获取失败，文章也发不成功。
多图地址：https://www.52pojie.cn/thread-1393075-1-6.html， https://www.52pojie.cn/thread-1733149-1-1.html。

说起此插件，在我的电脑里可谓历史悠久，从2011年开发出来以后，一直到2023年还在默默的工作，几次大改之后，变得更加成熟、稳重：

• 版本一：2011年远程图片下载插件 for fckeditor诞生，此时，使用xml+ajax同步方式获取编辑区的所有图片，不会自动去下载图片以免浪费空间资源，必须手动点击下载图片
• 版本二：fckeditor改为ckeditor后，决定改版一次，使用json+ajax异步方式获取编辑区的所有图片。
• 版本三：想来想去，觉得使用json+ajax同步方式获取编辑区的所有图片比较稳定。
• 版本四：2024.03.19使用json+ajax异步方式获取图片，已经克服了技术难点，使得用户体验更进一步升级。

看完版本变化之后，咱们来分析一下，使用同步与异步的差别：

• 同步：指使用ajax时，async为false。这种方式是一次只获取一张远程图片，然后替换一次编辑器内容。由于一次只获取一张图片，超时的可能性几乎为0。缺点：多次请求才能完成任务。
• 异步：指使用ajax时，async为true。这种方式是一次获取所有远程图片，然后替换一次编辑器内容，完成所有任务。缺点：如果图片过多过大或者网络不稳定，超时的可能性非常大。
• 异步：技术突破，已经达到异步的体验又能达到同步的要求。

经过多年的使用，最终决定使用同步的方式一张一张的获取远程图片，这只是程序方面；交互性方面，还是点击一次即可。即使某张图片下载失败，也可以再次点击下载图片，而此时，只会下载失败的图片，缺点可以忽略不计。

注：同步会卡页面！同步会卡页面！同步会卡页面！但能保证所有图片可以正常保存下来。
2024.03.19技术有所突破，异步不再卡浏览器页面且具备同步保存图片的能力。
例如，我下面要保存的远程图片达39张之多，如果用异步一次性取图片，服务器超时的可能性达到95%以上。

界面：




 

---

需要此插件的，可以直接联系我。39元一份。含有完整的使用方法：安装，调试，使用。

杰克工作室

注：此ckeditor远程图片下载插件在使用同步下载图片的时候，如果网络速度特别的慢，浏览器会弹出窗口“关闭”“等待”（因为使用了同步功能，当前页面所有动作都会被锁定），此时，请点击“等待”。

先发贴，如果有图片没有下载下来，可以再编辑一次，再次使用远程图片下载，不至于因为图片下载不下来，导致发贴不成功。

杰克工作室

同步异步操作实施对比：

说了这么多，是不是云里雾里的，来个对比更清楚一些：在此只考虑图片多的情况，一次取网络图片15张及以上

	同步	异步一次性取数据	异步多次取数据
讨论	体验一般，卡页面，给使用者以为浏览器死了，甚至浏览器弹出“等待”“结束”等提示框	体验好，不卡浏览器页面，有可能会失败，要看php或者后端设置的超时时间	体验极好，不卡浏览器页面，但每一次取网络回来的数据与副本编辑器内容进行一次替换，导致最终只有一个副本起作用，相当于并发修改数据
体验	不好	好	极好
实施难度	易	易	极难
最终效果	优，能绝对取回所需图片数据	一般，主要看网络速度，如果自己网络出现波动或者对方网络不佳，可能会导致网络超时失败，从而全部失败。从我多年网络扣图来看，这种概率还不小。这也是为什么我放弃这种方式的主要原因。一切为了最终数据：必须放弃此方式。	优，但未实现，每次异步取回来数据后，需要对编辑器内容进行锁定编辑，相当于并发修改数据，目前js技术达不到这种水平。 2024.03.19技术突破，已经实现

杰克工作室

让你见识一下ckeditor远程图片下载的超能力

遇到这种情况一定要点击“等待”按钮。等待下载完成，毕竟图片太多了，会卡页面的。

我要变身：

有几张图片没有下载下来，发现是我程序限制了最小图片为1KB，经过检查，这几个没有下载成功的图片体积都小于1KB，看了一下是个数学公式。取消限制，再次编辑下载，全部下载成功。