富文字編輯器CKeditor的配置和圖片上傳，看完不後悔

馬明瑞發表於2019-02-16

CKeditor是一款富文字編輯器，本文將用極為簡單的方式介紹一下它的使用和困擾大家很久的圖片上傳問題，要有耐心。

第一步：如何使用

1.官網下載https://ckeditor.com/ckeditor…，分別是簡易版、標準版、全面版、自定義四個選項，下載哪個根據你的訴求來。

2.下載成功後—->解壓得到一個ckeditor資料夾—–>把ckeditor資料夾上傳到伺服器上（或本地的靜態服務上）——>本地新建一個demo.htm如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80"></textarea>
<script src="http://自己的伺服器地址/ckeditor/ckeditor.js"></script>
</body>
</html>

3.執行demo.html就能看見編輯器了 獲取編輯器資料用 var data = CKEDITOR.instances.editor1.getData()

第二步：如何通過編輯器上傳圖片到伺服器

1.找到ckeditor/config.js，原來亂七八糟的全刪了，修改如下

CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = `/void/imgupload/ckeditorUpload?type=image`;
};

2.解釋一下，這個`/void/imgupload/ckeditorUpload`是自己定義的本地接收圖片的介面，你需要寫接收儲存圖片的邏輯

3.重點！！這個介面接受儲存完圖片怎麼反饋呢？？答案是：新版本的ckeditor要返回json格式如下：

{
"uploaded": 1,   //寫死的
"fileName": filename,  //圖片名
"url": url  //上傳伺服器的圖片的url
}

舊版本要返回js程式碼！！！如下：

callback = request.args.get("CKEditorFuncNum")
resData = "<script type="text/javascript">"
resData += "window.parent.CKEDITOR.tools.callFunction(" + callback + ",`" + url + "`,``" + ")" 
resData += "</script>"
return resData

解釋：url是上傳伺服器的圖片的url callback是要接收get引數，引數名是“CKEditorFuncNum” ，callback一定不能缺

補充：ckeditor新版舊版怎麼區分呢？舊版在請求的時候url有`CKEditorFuncNum`引數，新版則沒有（本人見解，不明白留言解答）

==========================================================

相關文章