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'參數，新版則沒有（本人見解，不明白留言解答）
==========================================================