使用ThinkPHP上傳類處理KindEditor上傳的圖片

KindEditor作為一款可視化的HTML編輯器用起來確實比較方便,其本身也自帶了圖片上傳的處理
這里修改為TP上傳處理圖片,是為了保證上傳圖片的方便(目錄獨立於編輯器,便於增加水印等處理)

第一步：在模板html頁面引入如下文件：

 

<link rel="stylesheet" href="/data/editor/plugins/code/prettify.css" />
<script charset="utf-8" src="/data/editor/kindeditor.js"></script>
<script charset="utf-8" src="/data/editor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/data/editor/plugins/code/prettify.js"></script>
<script>
	KindEditor.ready(function(K) {
		var editor1 = K.create('textarea[name="content"]', {
			cssPath : '/data/editor/plugins/code/prettify.css',
			uploadJson : "/Home/Common/upload",//圖片上傳后的處理地址
		});
		prettyPrint();
	});
</script>

路徑根據自己的項目不同,正確引入即可,uploadJson : "/Home/Common/upload",
uploadJson后面的就是編輯器上傳圖片的處理地址，可以根據自己的自行配置
這里交由Home分組的Common控制器的upload方法處理圖片上傳

第二步:自定義上傳處理函數

 

 

function upload(){	
	header("Content-Type:text/html;charset=utf-8");
    import('ORG.Net.UploadFile');

    $upload = new UploadFile();
	$upload->maxSize  = 3145728;
	$upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg');
	
	$upload->autoSub=true;
	$upload->subType='date';
	$upload->dateFormat='Ym';	
	$upload->savePath =  './upload/article/';
	
	if(!$upload->upload()){
		$error['error']=1;
		$error['message']=$upload->getErrorMsg();
		exit(json_encode($error));
	}
	
	$info=$upload->getUploadFileInfo();
	
	/*圖片水印處理
	import('ORG.Util.Image');
	$image = new Image();
	$image->water($upload->savePath.$info[0]['savename'],'./data/water.png');*/
	
	$data=array(
		'url'=>str_replace('./','/',$upload->savePath).$info[0]['savename'],
		'error'=>0
	);
	
	exit(json_encode($data));		
}

這里使用ThinkPHP的上傳類處理圖片上傳,也可以自己寫，唯一需要注意的就是返回的格式

查看了下官方的文檔:
上傳正確返回這種JSON串
{
    "error" : 0,
    "url" : "http://www.example.com/path/to/file.ext"
}
上傳失敗返回這種JSON串
{
    "error" : 1,
    "message" : "錯誤信息"
}

特別需要注意的一點就是返回的error一定要用整數1或是0,別用字符串'1'或'0'
原因是plugins/image/image.js的結果判斷是 恆等於 ===
(當初自己就是因為PHP端返回的是字符串形式的'0'不等於整數的0導致上傳之后總是彈窗報錯)