CKeditor是一款富文本編輯器，本文將用極爲簡單的方式介紹一下它的使用和困擾大家很久的圖片上傳問題，要有耐心。
第一步：如何使用？大象裝冰箱 總共分三步
1.官網下載https://ckeditor.com/ckeditor-4/download/，分別是簡易版、標準版、完整版 ，根據自己需求下載即可
2.下載解壓後我們得到如下文件，目錄如下
3.本地新建一個demo.htm如下，把ckeditor.js引進來，並在瀏覽器運行Demo.html
<!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="./ckeditor/ckeditor.js"></script>
</body>
</html>
4.運行效果如下 大功告成！
第二步：如何通過編輯器上傳圖片到服務器 稍微有點難 可不學
1.找到ckeditor/config.js
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一定不能缺
如果還是不懂 就留言吧~