kindeditor 远程图片本地化,远程图片下载到本地自动更换图片路径

单行、唯一 0     275      插件   0     0
我们经常运维的时候都需要上传图文信息的文章来发布,但是内容两太大,我们都是通过互联网来搜索信息,复制粘贴修改,但是我们复制的内容当中有很多图片,而图片是远程图片,就是带有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);


三、其他地方都一样,重点就是上传到本地,处理好大图小图的生成,添加附件表信息,和其他参数信息



不限制图片大小,因为是远程图片嘛,必须上传


好啦,去试试吧,不懂的下方留言



captcha
忘记密码? 注册
第三方登录
微信赞赏
支付宝赞赏