kindeditor 自动上传远程图片到本地

首先第一步：我们要在kindeditor.js 中找到

K(doc).keyup(function(e) {

if (e.which != 13 || e.shiftKey || e.ctrlKey || e.altKey) {

df();

return;

}

if (newlineTag == 'br') {

return;

}

if (_GECKO) {

var root = self.cmd.commonAncestor('p');

var a = self.cmd.commonAncestor('a');

if (a && a.text() == '') {

a.remove(true);

self.cmd.range.selectNodeContents(root[0]).collapse(true);

self.cmd.select();

}

return;

}

在这当中我加入了df();一个函数。

第二步：我们加入了一个js文件，

function df() {

var haspicContainer = document.getElementById("has_pic");

if (haspicContainer == null) {

haspicContainer = document.createElement("div");

haspicContainer.id = "has_pic";

haspicContainer.innerHTML = "<input type='text' id='piclist' value='' display:none;'/><div id='confirm'></div>";

$(".ke-toolbar").after(haspicContainer);

// uploadpic();

}

var img = $(".ke-edit-iframe").contents().find("img");

var piccount = 0;

var sstr = "";

$(img).each(function (i) {

var that = $(this);

if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {

piccount++;

if (i == $(img).length - 1)

sstr += that.attr("src");

else

sstr += that.attr("src") + "|";

}

});

$("#piclist").val(sstr);

document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";

uploadpic();

}

function closeupload() {

$("#has_pic").hide();

$("#upload").show();

}

function uploadpic() {

var piclist = encodeURI($("#piclist").val());

if (piclist.length == 0) return false;

$.ajax({

url: "/Public/editor/PHP/file_remote_upload.PHP",

data: "pic=" + piclist,

type: "GET",

beforeSend: function () {

$("#upload").hide();

// $("#confirm").text("正在上传中...");

},

success: function (msg) {

// alert(msg)

if (msg !== "") {

var str = new Array();

str = msg.split('|');

// alert(str);

var img = $(".ke-edit-iframe").contents().find("img");

var k = 0;

$(img).each(function (i) {

// alert(i)

var that = $(this);

if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {

that.attr("src","/uploads/image/" + str[k]);

that.attr("data-ke-src","/uploads/image/" + str[k]);

}else{

k--;

}

k++

});

// $("#confirm").html(img.length + "张图片已经上传成功！  <a href='javascript:closeupload();'>关闭</a>");

}

}

});

}

第三步：我们加入PHP上传文件

<?PHP

/**

* KindEditor PHP

*

* 本PHP程序是演示程序，建议不要直接在实际项目中使用。

* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。

*

*/

$pic = $_REQUEST['pic'];

$arr = explode('|',$pic);

$sstr="";

foreach($arr as $imgurl){

if(strpos($imgurl,'http://') !==false || strpos($imgurl,'https://') !==false){

//打开输出缓冲区并获取远程图片

// ob_start();

// $context = stream_context_create(

// array (

// 'http' => array (

// 'follow_location' => false // don't follow redirects

// )

// )

// );

// //请确保PHP.ini中的fopen wrappers已经激活

// readfile( $imgurl,false,$context);

// $img = ob_get_contents();

// ob_end_clean();

$file=date("Ymdhis").uniqid() . strrchr( $imgurl,'.' );

$savePath = "../../../uploads/image/".$file;

getImg($imgurl,$savePath);

$sstr .= $file."|";

}

}

$sstr = rtrim($sstr,'|');

/*

*@通过curl方式获取制定的图片到本地

*@ 完整的图片地址

*@ 要存储的文件名

*/

function getImg($url = "",$filename = "") {

if(is_dir(basename($filename))) {

echo "The Dir was not exits";

Return false;

}

//去除URL连接上面可能的引号

$url = preg_replace( '/(?:^['"]+|['"/]+$)/','',$url );

$hander = curl_init();

$fp = fopen($filename,'wb');

curl_setopt($hander,CURLOPT_URL,$url);

curl_setopt($hander,CURLOPT_FILE,$fp);

curl_setopt($hander,CURLOPT_HEADER,0);

curl_setopt($hander,CURLOPT_FOLLOWLOCATION,1);

//curl_setopt($hander,CURLOPT_RETURNTRANSFER,false);//以数据流的方式返回数据,当为false是直接显示出来

curl_setopt($hander,CURLOPT_TIMEOUT,60);

/*$options = array(

CURLOPT_URL=> 'http://jb51.net/content/uploadfile/201106/thum-f3ccdd27d2000e3f9255a7e3e2c4880020110622095243.jpg',

CURLOPT_FILE => $fp,

CURLOPT_HEADER => 0,

CURLOPT_FOLLOWLOCATION => 1,

CURLOPT_TIMEOUT => 60

);

curl_setopt_array($hander,$options);

*/

curl_exec($hander);

curl_close($hander);

fclose($fp);

Return true;

}

exit($sstr);