远程图片下载插件 for ckeditor
<h3>开发[远程图片下载]插件的背景：</h3><p>经常要将优秀的文章转载到我的网站，图片不可缺少。于是就有了此插件。</p>
远程图片下载插件 for ckeditor功能：将ckeditor编辑区的图片下载到本地，并将编辑器中的旧图片地址改为本地地址，实现远程图片本地化。
<div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">注：此插件为js+php版。有网友问：有纯php版的吗？个人认为纯php版获取图片超时的可能性太大了。一些优秀的文章经常是15－25张图片，单张图片压缩后体积约为200KB，在普通的网络下很容易导致网络超时，部分图片获取失败，文章也发不成功。<br />
多图地址：https://www.52pojie.cn/thread-1393075-1-6.html， https://www.52pojie.cn/thread-1733149-1-1.html。</div>
<br />
说起此插件，在我的电脑里可谓历史悠久，从2011年开发出来以后，一直到2023年还在默默的工作，几次大改之后，变得更加成熟、稳重：
<ul>
<li>版本一：2011年远程图片下载插件 for fckeditor诞生，此时，使用xml+ajax同步方式获取编辑区的所有图片，不会自动去下载图片以免浪费空间资源，必须手动点击下载图片</li>
<li>版本二：fckeditor改为ckeditor后，决定改版一次，使用json+ajax异步方式获取编辑区的所有图片。</li>
<li>版本三：想来想去，觉得使用json+ajax同步方式获取编辑区的所有图片比较稳定。</li>
<li><span style="color:#c0392b">版本四：2024.03.19使用json+ajax异步方式获取图片，已经克服了技术难点，使得用户体验更进一步升级。</span></li>
</ul>
看完版本变化之后，咱们来分析一下，使用同步与异步的差别：
<ul>
<li>同步：指使用ajax时，async为false。这种方式是一次只获取一张远程图片，然后替换一次编辑器内容。由于一次只获取一张图片，超时的可能性几乎为0。缺点：多次请求才能完成任务。</li>
<li>异步：指使用ajax时，async为true。这种方式是一次获取所有远程图片，然后替换一次编辑器内容，完成所有任务。缺点：如果图片过多过大或者网络不稳定，超时的可能性非常大。</li>
<li>异步：技术突破，已经达到异步的体验又能达到同步的要求。</li>
</ul>
<div style="background:#eeeeee; border:1px solid #cccccc; padding:5px 10px">经过多年的使用，最终决定使用同步的方式一张一张的获取远程图片，这只是程序方面；交互性方面，还是点击一次即可。即使某张图片下载失败，也可以再次点击下载图片，而此时，只会下载失败的图片，缺点可以忽略不计。<br />
<br />
<s><span style="color:#c0392b"><strong>注：同步会卡页面！同步会卡页面！同步会卡页面！但能保证所有图片可以正常保存下来。</strong></span></s><br />
<span style="color:#c0392b">2024.03.19技术有所突破，异步不再卡浏览器页面且具备同步保存图片的能力。</span><br />
例如，我下面要保存的远程图片达39张之多，如果用异步一次性取图片，服务器超时的可能性达到95%以上。</div>
<br />
<br />
界面：<br />
<img src="data/attachment/forum/202308/10/221130zv6sjecmip1umcqs.jpg" /><br />
<br />
<img alt="" src="data/attachment/forum/202308/10/222826gs33aw3z3mm8v3p6.jpg" style="border:1px solid #cccccc; padding:5px" /><br />
<br />
<hr />需要此插件的，可以直接联系我。39元一份。含有完整的使用方法：安装，调试，使用。<br />
<br />
<img alt="" src="static/img/contact.jpg" style="border:1px solid #cccccc; padding:5px" /> 注：此ckeditor远程图片下载插件在使用同步下载图片的时候，如果网络速度特别的慢，浏览器会弹出窗口“关闭”“等待”（因为使用了同步功能，当前页面所有动作都会被锁定），此时，请点击“等待”。
先发贴，如果有图片没有下载下来，可以再编辑一次，再次使用远程图片下载，不至于因为图片下载不下来，导致发贴不成功。
<h3>同步异步操作实施对比：</h3>
说了这么多，是不是云里雾里的，来个对比更清楚一些：在此只考虑图片多的情况，一次取网络图片15张及以上
<table border="1" cellpadding="1" cellspacing="0" style="border-collapse:collapse; cell-padding:8px; margin:10px 0px 10px 1px">
<tbody>
<tr>
<td> </td>
<td style="text-align:center"><strong>同步</strong></td>
<td style="text-align:center"><strong>异步一次性取数据</strong></td>
<td style="text-align:center"><strong>异步多次取数据</strong></td>
</tr>
<tr>
<td style="text-align:center">讨论</td>
<td style="text-align:center">体验一般，卡页面，给使用者以为浏览器死了，甚至浏览器弹出“等待”“结束”等提示框</td>
<td style="text-align:center">体验好，不卡浏览器页面，有可能会失败，要看php或者后端设置的超时时间</td>
<td style="text-align:center">体验极好，不卡浏览器页面，但每一次取网络回来的数据与副本编辑器内容进行一次替换，导致最终只有一个副本起作用，相当于并发修改数据</td>
</tr>
<tr>
<td style="text-align:center">体验</td>
<td style="text-align:center">不好</td>
<td style="text-align:center">好</td>
<td style="text-align:center">极好</td>
</tr>
<tr>
<td style="text-align:center">实施难度</td>
<td style="text-align:center">易</td>
<td style="text-align:center">易</td>
<td style="text-align:center">极难</td>
</tr>
<tr>
<td style="text-align:center"><span style="color:#c0392b">最终效果</span></td>
<td><span style="color:#c0392b">优，能绝对取回所需图片数据</span></td>
<td><span style="color:#c0392b">一般，主要看网络速度，如果自己网络出现波动或者对方网络不佳，可能会导致网络超时失败，从而全部失败。从我多年网络扣图来看，这种概率还不小。这也是为什么我放弃这种方式的主要原因。一切为了最终数据：必须放弃此方式。</span></td>
<td><span style="color:#c0392b">优，<s>但未实现，每次异步取回来数据后，需要对编辑器内容进行锁定编辑，相当于并发修改数据，目前js技术达不到这种水平</s>。<br />
2024.03.19技术突破，已经实现</span></td>
</tr>
</tbody>
</table>
<h3>让你见识一下ckeditor远程图片下载的超能力</h3>
<img aid="760" src="data/attachment/forum/202402/06/220001x35ou0ul5oqld5co.png" style="height:650px; width:778px" /><br />
<strong>遇到这种情况一定要点击“等待”按钮。等待下载完成</strong>，毕竟图片太多了，会卡页面的。<br />
<br />
我要变身：<br />
<img aid="761" src="data/attachment/forum/202402/06/220415ioziiom6f5vzfoiu.png" style="height:603px; width:745px" /><br />
有几张图片没有下载下来，发现是我程序限制了最小图片为1KB，经过检查，这几个没有下载成功的图片体积都小于1KB，看了一下是个数学公式。取消限制，再次编辑下载，全部下载成功。<br />
页:
[1]