IT教程 | 加入收藏 | 简体 | 繁体
编辑器:Dreamweave...PhotoShopGit&FTP编辑器
当前位置: 首页 > 工具教程 > 编辑器

给KindEditor4加上自动保存远程图片功能示例代码

2016-10-26来源:[www.121ask.com]热度:0℃ 【字体:

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

    js代码部分:

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

//###########自动保存相关函数####################### 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(); } } }); } //###########自动保存相关函数结束#######################

三、在表单验证函数的最后加上:

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  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 //只需要配置存放附件文件夹attached的URL绝对路径,最后必须带/ define("attached_url","/Public/Uploads/"); //下面不要改动 define("attached_uri",$_SERVER["DOCUMENT_ROOT"].attached_url);
JSON.php是KindEditor自带的文件。
以上IT文章《给KindEditor4加上自动保存远程图片功能示例代码》由名客技术网[www.121ask.com]提供阅读!
推广信息
推广信息
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3