CKEditor圖片上傳的PHP實現
阿新 • • 發佈：2019-02-11
編輯文章是網站後臺的常用功能，CKEditor是目前流行的富文字編輯器，它使用方便但要做一些配置才能實現上傳本地圖片到伺服器的功能。在參考了一篇java下CKEditor圖片上傳的博文後，我用PHP實現了CKEditor編輯文章並支援上傳本地圖片的功能。
從官網http://ckeditor.com/下載CKEditor，根據需要可以選擇基本，標準，完整或自定義版，我下載的是CKEditor4.6完整版。
整合CKEditor到自己的頁面，程式碼如下
瀏覽器開啟頁面之後就會看到ck編輯器了，編輯器中有插入圖片的功能，預設只能輸入圖片URL不能本地上傳圖片，要開啟上傳功能就需要服務端配合了。<html> <head> <title>CKEditor整合</title> <script type="text/javascript" src="../lib/ckeditor/ckeditor.js"></script> <!-- 引入ckeditor --> </head> <body> <textarea id="editor"> </textarea> <script> //初始化ck編輯器，將它應用到id為editor的元素上 CKEDITOR.replace('editor', { height: 350 //編輯器配置，這裡僅設定高度為350 }); </script> </body> </html>
在ck編輯器中配置filebrowserUploadUrl，配置好了之後插入圖片視窗將多出一個上傳標籤，使用者可以在這裡選擇本地圖片，點上傳後圖片將被髮送到我們配置的地址上。
接著在服務端實現圖片上傳功能。ck編輯器將圖片以'upload'的名字上傳，同時還會帶上一個CKEditorFuncNum的引數，這個引數用來回調通知編輯器圖片上傳的結果。<html> <head> <title>CKEditor整合</title> <script type="text/javascript" src="../lib/ckeditor/ckeditor.js"></script> <!-- 引入ckeditor --> </head> <body> <textarea id="editor"> </textarea> <script> //將id為editor的元素替換為ck編輯器 CKEDITOR.replace('editor', { height: 350, filebrowserUploadUrl: "/index.php?act=Cms.uploadCkImg", //設定圖片上傳請求地址 }); </script> </body> </html>
處理步驟是PHP先獲取$_FIile['upload']和$_GET['CKEditorFuncNum']，然後將上傳的圖片放置到服務上，根據上傳結果返回一個呼叫ck的js
<script>window.parent.CKEDITOR.tools.callFunction($cb, '$url', '$error');</script>
其中$cb是之前獲取的CKEditorFuncNum，$url是上傳成功後訪問圖片的url，$erro是上傳失敗時ck需要顯示給使用者的錯誤資訊
$cb = $_GET['CKEditorFuncNum']; //獲得ck的回撥id
try {
if(isset($_FILES['upload'])) { //上傳的圖片的資訊存在$_FILES['upload']
$s = new FileService();
$url = $s->uploadImg($_FILES[$name], $folder); //我自己的放置上傳圖片的邏輯，返回圖片放置後的url
echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '$url', '');</script>" //圖片上傳成功，通知ck圖片的url
}
}catch (\Exception $e) {
$erro = $e->getMessage();
echo "<script>window.parent.CKEDITOR.tools.callFunction($cb, '', '$error');</script>" //圖片上傳失敗，通知ck失敗訊息
}另外預設上傳圖片預覽中有大堆文字可能看著不爽，可以開啟ckeditor/plugins/image/dialogs/image.js檔案，搜尋“b.config.image_previewText”就能找到這段鳥語了，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。