给KindEditor4加上自动保存远程图片功能

2012-04-26 02:16 PHP 狂奔的蜗牛

一、在文章表单中加入：`<label><input type="checkbox" id="cboxSaveRomote"/>`保存远程图片
   用来判断用户是否需要自动保存远程图片
二、表单页面用到底js库文件jquery.js,jquery ajax队列管理插件
   js代码部分：

根据自己情况注意修改：url:serverScriptPath+"save_remote_image.php"

```javascript
//###########自动保存相关函数#######################
    function saveRomoteImgs(KE) {
    var CheckboxId="cboxSaveRomote";
    var content = KE.html();//得到html代码
    var matchArray1,matchArray2=[],matchArray3=[],tmp_matchArray1=[];errorCounter=0;
    var hostname=location.hostname.replace(/\./g,'\\.');
    var reg=/<img[^>]+src=['"](http:\/\/[^'"]*)['"]/ig;
    var subreg=/src=['"]([^'"]*)['"]/ig;
    matchArray1=content.match(reg);
    //没有远程图片直接提交表单
    if(!matchArray1){$("#"+CheckboxId)[0].checked=false;showInfoWindow("<p>没有远程图片,请手动提交文章...</p>");return;}
    //只保留非本域名的图片地址
    for(j=0;j<matchArray1.length;j++){
       if(matchArray1[j].indexOf("http://"+hostname)==-1){
          tmp_matchArray1.push(matchArray1[j]);
       }
    }
    matchArray1=tmp_matchArray1;
    for(j=0;j<matchArray1.length;j++){
        submatch=matchArray1[j].match(subreg);
        if(submatch&&submatch.length>0){
         var url=submatch[0].replace(/('|"|src=)/g,'');
         matchArray2.push(url);
         matchArray3.push(url);
         console.log(url);
        }
    }
    //没有子匹配直接提交表单
    if(!matchArray2||!matchArray2.length){$("#"+CheckboxId)[0].checked=false;showInfoWindow("<p>没有远程图片,请手动提交文章...</p>");return;}
    
    //队列开始
    var newQueue = $.AM.createQueue('queue');
        showInfoWindow("开始获取远程图片...");    
        for(h=matchArray2.length-1;h>=0;h--){
             newQueue.offer({
                  url:serverScriptPath+"save_remote_image.php"
                  ,type:"POST"
                  ,data:{imgurl:matchArray2[h]}
                 ,complete:function(x){
                     var result=x.responseText;
                     try{
                         result=eval("("+result+")");
                     }catch(e){
                         result={};
                     }
                     var rurl=matchArray2.pop();//原始url
                     var qpr=matchArray3.length-matchArray2.length;
                     //内容替换处理
                     if (!result.error) {
                         var surl=result.url;//保存后的url
                         var content=KE.html();
                         content=content.replace('"'+rurl+'"','"'+surl+'"');
                         content=content.replace("'"+rurl+"'",'"'+surl+'"');
                         KE.html(content);
                       }else{
                         showInfoWindow(result.message);
                         errorCounter++;
                         if(result.error==2){$.AM.destroyQueue('queue');return;}
                       }
                    //进度提示
                    if(!matchArray2.length){
                        $("#"+CheckboxId)[0].checked=false;
                        showInfoWindow("远程图片保存进度["+qpr+"/"+matchArray3.length+"],失败["+errorCounter+"]个,<b>保存完毕!<p> 请手动提交文章...</p>");
                    }else{
                       showInfoWindow("远程图片保存进度["+qpr+"/"+matchArray3.length+"],失败["+errorCounter+"]个.");
                    }
                 }
             });
        }
    }
    var dialog;
    function showInfoWindow(msg){
    try{dialog.remove();}catch(e){}
    dialog=KindEditor.dialog({
            width : 400,
            height:200,
            title : '提示信息',
            body : '<div style="margin:10px;text-align:center;">'+msg+'</div>',
            closeBtn : {
                    name : '关闭',
                    click : function(e) {
                            dialog.remove();
                    }
            }
      });
    }
```
//###########自动保存相关函数结束#######################
三、在表单验证函数的最后加上：
```javascript

if($("#cboxSaveRomote")[0].checked){
     saveRomoteImgs(editor1);
     return false;
  }else{
     return true;
 }这的作用就是如果用户选择了保存远程图片，就执行保存。
其中editor1是当前的KindEditor对象。本例中为：

var editor1;
KindEditor.ready(function(K) {
//全局配置
serverScriptPath='/Xmanage/Lib/editor_server_script/';//服务端文件文件夹URL绝对路径,最后要有/
var editorPluginsPath="/Public/Js/kindeditor/plugins/";//编辑器的插件文件夹URL绝对路径,最后要有/
//全局配置结束
editor1 = K.create('textarea[name="content"]', {//指定textarea
......
```
四、服务器端php脚本

save_remote_image.php
```php

<?php
require_once dirname(__file__).'/path_config.php';
require_once dirname(__file__).'/JSON.php';
@session_start();
if (!isset($_SESSION['admin']))
{
 session_destroy();
 alert("用户信息丢失，请重新登录！");
}
if(!function_exists("file_get_contents")){
 alert("服务器PHP没有启用函数[file_get_contents],不能保存远程图片.",2);
 exit();
}
if(!ini_get("allow_url_fopen")){
 alert("服务器PHP没有启用[allow_url_fopen],不能保存远程图片.",2);
 exit();
}
if (empty($_POST['imgurl'])) {
 alert("imgurl为空！");
}
//根目录路径，可以指定绝对路径，比如 /var/www/attached/
$root_path =attached_uri;
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
$root_url =attached_url;

$phpbb_root_path =$root_path;
//图片显示路径
$imgShowPath = attached_url.'image/'.date('Y').'/'.date('m').'/'.date('d').'/';
//图片保存路径
$imgStorePath = $phpbb_root_path.'image/'.date('Y').'/'.date('m').'/'.date('d').'/';
if (!is_dir($imgStorePath)) {
 mkdir($imgStorePath,0777,true);
}
$imgurl = $_POST['imgurl'];
if (false !== stripos($imgurl, "//".$_SERVER['HTTP_HOST']."")) {
 header('Content-type: text/html; charset=utf-8');
 $json = new Services_JSON();
 echo $json->encode(array('error' => 0, 'url' => $imgurl));
}
$newimgname = time().'_'.rand(1000, 9999);
$newimgpath = $imgStorePath.$newimgname;
set_time_limit(0);
@$get_file = file_get_contents($imgurl);
if ($get_file) {
 $fp = fopen ( $newimgpath, 'w');
 fwrite ( $fp, $get_file);
 fclose ( $fp);
 //读取文件获取类型
if(!($filetype=getFiletype($newimgpath))){
   alert("图片类型未知！");
   @unlink($newimgpath);
}else{
rename($newimgpath,$newimgpath.".".$filetype);
$newimgname=$newimgname.".".$filetype;
}
header('Content-type: text/html; charset=utf-8');
 $json = new Services_JSON();
 echo $json->encode(array('error' => 0, 'url' => $imgShowPath.$newimgname));

exit;
} else {
 alert("获取图片{$imgurl}失败！");
}

function getFiletype($filename) {
    $file = fopen($filename, "rb");  
    $bin = fread($file, 2); //只读2字节  
    fclose($file);  
    $strInfo = @unpack("C2chars", $bin);  
    $typeCode = intval($strInfo['chars1'].$strInfo['chars2']);  
    $ftype = '';  
    switch ($typeCode)  
    {  
    case 255216:  
    $ftype = 'jpg';  
    break;  
    case 7173:  
    $ftype = 'gif';  
    break;  
    case 6677:  
    $ftype = 'bmp';  
    break;  
    case 13780:  
    $ftype = 'png';  
    break; 
    }
    return $ftype;
}

function alert($msg,$status=1) {
 header('Content-type: text/html; charset=utf-8');
 $json = new Services_JSON();
 echo $json->encode(array('error' => $status, 'message' => $msg));
 exit;
}
```
path_config.php
```php
<?php
//只需要配置存放附件文件夹attached的URL绝对路径,最后必须带/
define("attached_url","/Public/Uploads/");

//下面不要改动
define("attached_uri",$_SERVER["DOCUMENT_ROOT"].attached_url);JSON.php是KindEditor自带的文件。
```

作者：狂奔的蜗牛 出处： http://www.host900.com/

本文版权归作者所有，欢迎转载。未经作者同意下，必须在文章页面明显标出原文链接及作者，否则保留追究法律责任的权利。

如果您认为这篇文章还不错或者有所收获，可以分享给您的小伙伴，因为你的支持是我继续写作，分享的最大动力！

上一篇PHP在线文件管理工具php_fileManagerV1.0

下一篇正则表达式可以为空值，不为空则要格式