CKFeditor是一款非常不錯的web編輯器，本文內(nèi)容是基于CKFeditor4.7在php做服務(wù)端情況下如何進(jìn)行配置圖片的上傳保存講解。
交互示意圖
交互示意圖
CKFeditor4.7下載地址：https://ckeditor.com/download
可以根據(jù)自己需要對編輯器進(jìn)行定制下載，我這里下載的是標(biāo)準(zhǔn)版。
前端編碼
下載ckfeditor后將其放入自己的項(xiàng)目中，然后就可以創(chuàng)建頁面使用CKEditor創(chuàng)建我們的編輯器頁面了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script type="text/javascript" >
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
試試看一下效果，通過瀏覽，瀏覽器中編輯器的效果是這個樣子的
效果圖-默認(rèn)
看著按鈕太多，需要定制一下，可以根據(jù)需要自己定制需要樣式的編輯器，通過js配置來進(jìn)行配置，下面是我進(jìn)行調(diào)整后的配置，看看效果！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script type="text/javascript" src="common/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script type="text/javascript" >
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1', {
// Define the toolbar groups as it is a more accessible solution.
toolbar:[
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike'] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter'] },
{ name: 'links', items: [ 'Link', 'Unlink'] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table'] },
{ name: 'styles', items: [ 'Format'] },
{ name: 'document', items: [ 'Source'] },
{ name: 'tools', items: [ 'Maximize'] }
],
height:300,
removeDialogTabs:"image:advanced;link:advanced",//移除圖片上傳插件的高級選項(xiàng)卡
filebrowserImageUploadUrl:"upload.php"http://服務(wù)端上傳地址
} );
</script>
</form>
</body>
</html>
我們再來看一下新的效果！
效果圖-清爽版
這樣看著是不是簡單清爽很多呢，這里使用了圖片上傳插件。
插件下載地址：https://ckeditor.com/addon/uploadimage
服務(wù)端代碼
服務(wù)端采用php實(shí)現(xiàn)圖片上傳后保存，保存的過程中我們采用上傳根目錄+“年”+“月”+“日”目錄格式存放上傳圖片，例如：/uploads/images/2017/09/30/
<?php
//file:upload.php
//遞歸創(chuàng)建目錄函數(shù)
function mkDirs($dir){
if(!is_dir($dir)){
if(!mkDirs(dirname($dir))){
return false;
}
if(!mkdir($dir,0777)){
return false;
}
}
return true;
}
//獲取回調(diào)用的方法
$callback = $_REQUEST["CKEditorFuncNum"];
try {
if(isset($_FILES['upload'])) { //上傳的圖片的信息存在$_FILES['upload']
$exts = array("jpg","bmp","gif","png");
$upload = $_FILES['upload']['name'];
$ext = pathInfo($upload,PATHINFO_EXTENSION);
if(in_array($ext,$exts)){
$uploadPath = "/uploads/images/";
$data_path=date("Y").'/'.date("m").'/'.date("d").'/';
mkDirs("..".$uploadPath.$data_path);
//通過uuid生成新的文件名稱
$uuid = str_replace('.','',uniqid("",TRUE)).".".$ext;
$desname = $dRootDir.$uploadPath.$data_path.$uuid;
$url = $gSite['siteDomain'].$uploadPath.$data_path.$uuid;
//保存臨時文件到目標(biāo)文件
$ret = move_uploaded_file($_FILES['upload']['tmp_name'],$desname);
if($ret){
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$url."','');</script>";
}else{
echo "<font color=\"red\"size=\"2\">上傳失敗</font>";
}
}else{
echo "<font color=\"red\"size=\"2\">*文件格式不正確（必須為.jpg/.gif/.bmp/.png文件）</font>";
}
}
}catch (\Exception $e) {
$erro = $e->getMessage();
echo "<script>window.parent.CKEDITOR.tools.callFunction($callback, '', '$error');</script>";
}
?>
好了，服務(wù)端文件內(nèi)容就這么多，是不是很簡單呢!??
前端，后端代碼都已具備，我們來實(shí)驗(yàn)下效果如何，看截圖：
效果圖-上傳圖片
效果圖-上傳圖片后
圖片的大小位置可以通過圖片編輯器進(jìn)行編輯，這個使用上還是比較簡單方便的。
注意點(diǎn)說明
- 使用了圖片上傳插件uploadimage，下載地址：https://ckeditor.com/addon/uploadimage。
- 服務(wù)端一定要獲取$_REQUEST["CKEditorFuncNum"];用于返回時回調(diào)。
- 配置圖片上傳服務(wù)端地址filebrowserImageUploadUrl參數(shù)內(nèi)容。
總結(jié)
使用起來不復(fù)雜，但是要喜歡就需要進(jìn)一步了解ckeditor的配置說明，這個可以參看ckeditor官方網(wǎng)站。
就寫到這里吧！以此記錄，僅供參考！
