kindeditor 远程图片本地化,远程图片下载到本地自动更换图片路径
我们经常运维的时候都需要上传图文信息的文章来发布,但是内容两太大,我们都是通过互联网来搜索信息,复制粘贴修改,但是我们复制的内容当中有很多图片,而图片是远程图片,就是带有https或者http的链接,是引用了别人网站的图片,倘若以后人家网站删除了或者挂掉了,我们网站的图片也就消失了,研究调试了两个晚上,我把它集成在了kindeditor源码里面。
一、找到kindeditor.js文件,打开,找到5824行,如下如图位置
此处为粘贴事件,当我们像文本编辑器粘贴内容的时候触发
粘贴代码如下:
//此处为远程图片本地化扩展开始
setTimeout(function () {
var imgs = $(".ke-edit-iframe").contents().find("img");
var counter = 0;
$(imgs).each(function (i) {
var that = $(this);
if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
counter++;
}
});
var percent = 100/counter;
if (counter > 0){
layer.msg('正在上传远程图片,请稍等 ' + "已完成"+parseInt(100-percent*counter)+ "%", {
icon: 16
,shade: 0.01
,time: 1000000
});
$(imgs).each(function (i) {
var that = $(this);
if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {
var param = $.extend(true, self.extraFileUploadParams, {remoteImage:that.attr("src")});
$.ajax({
url: self.uploadJson
,data: param
,type: 'POST'
,dataType: 'json'
,success: function(res){
that.attr("src",res.url);
that.attr("data-ke-src",res.url);
counter--;
if(!counter){
layer.closeAll();
}else{
layer.msg('正在上传远程图片,请稍等 ' + "已完成"+parseInt(100-percent*counter)+ "%", {
icon: 16
,shade: 0.01
,time: 1000000
});
}
}
});
}
});
}
}, 200);
//此处为远程图片本地化扩展结束
二、其中引入了layui的弹窗,用于提示上传远程图片,因为如果图片较多,上传缓慢,静默上传的话,用户会关闭当前窗口,达不到最终效果
PHP服务端处理代码如下,我的是结合kindeditor的上传扩展的,加了判断,如果是远程图片本地化
//远程图片本地化
$remoteImage = trim($this->_context->remoteImage);
//死链检测
if(!urlTest($remoteImage)){
return ;
}
if($remoteImage){
// 获得扩展名
/* Array
(
[dirname] => http://www.wycto.cn/uploads/20180915
[basename] => 2cb18d94389eee6fc09885f0d6d69527.png
[extension] => png
[filename] => 2cb18d94389eee6fc09885f0d6d69527
) */
$remoteImageinfo = pathinfo($remoteImage);
$fileExt = $remoteImageinfo['extension'];
}else{
$this->_uploader = new Helper_Uploader();
// 判断目标文件是否存在
if (!$this->_uploader->existsFile('imgFile')) {
$this->error("文件不存在!");
}
// 获得Helper_Uploader_File类实例
$file = $this->_uploader->file("imgFile");
// 获得扩展名
$fileExt = strtolower($file->extname());
}
/*
* 获得文件
*/
if($remoteImage){
$remoteImageinfo = pathinfo($remoteImage);
$filePath = $remoteImage;
$fileName = $remoteImageinfo['filename'];
$remoteImageSize = getRemoteImageSize($remoteImage);
$fileSize = $remoteImageSize['size'];
}else{
$filePath = $file->filepath();
$fileName = $file->filename();
$fileSize = $file->filesize();
}
if(!$remoteImage){
// 检查文件大小
if ($file_size) {
$uploadLimit = $file_size;
}
if ($this->checkLimit($fileSize, $uploadLimit)) {
$this->error("文件大小不能超过" . $uploadLimit);
}
}
// 新文件名
$newName = Helper_Filesys::randName($fileName, $fileExt);
三、其他地方都一样,重点就是上传到本地,处理好大图小图的生成,添加附件表信息,和其他参数信息
不限制图片大小,因为是远程图片嘛,必须上传
好啦,去试试吧,不懂的下方留言
请先登录后再评论登录