使用 CKEditor 上傳圖片， 粘貼螢幕截圖

標籤：開啟   如何   ide   出錯   upload   配置   guid   fine   回呼函數   

之前寫過wangEditor,那真是好用，文檔也清晰，半天就搞定了，無奈沒有對應license，只好選擇別的。

 

外語一般，閱讀理解都靠蒙。CKEditor官方文檔看的我雲裡霧裡，國內的部落格比較少，經過一天的調試，終於成功了。

 

記錄下，歡迎交流。

 

1.下載CKEditor 包。

開啟 samples 檔案夾下的 index.html，確認ckeditor資源沒有丟失。

 

2.初始化CKEditor。

html：

注意ID

js：

3.配置config。

開啟CKEditor檔案夾下的config.js，基本菜單配置：

添加外掛程式，以支援圖片上傳和粘貼：

第一行語句：添加三個外掛程式，imagepaste,uploadimage,image2(如何對應不清楚，但這麼做成功了，如果園友知曉請賜教。)，這些外掛程式添加到CKEditor下的plugins下，提供依賴。

第二行語句：瀏覽本地圖片上傳時調用後台服務方法名稱。這個參數也是網上看到的，回呼函數會使用這個參數。

這裡做儲存圖片的操作，但是要返回圖片儲存地址，即url。

傳回型別是 void，但是要寫一條response：

第三行語句：粘貼時調用後台服務的方法。

傳回型別是string，官網上要求返回一個 json格式。http://docs.ckeditor.com/#!/guide/dev_file_upload  正確的和錯誤的：

因為要返回一個匿名json，我定義了好多結果都格式錯誤，硬生生拼接一個：

string jsonResult = "{\"uploaded\" : uploadedNum, \"fileName\" : \"fileNameStr\", \"url\":\"urlStr\" , \"error\" : { \"message\":\"errorMsg\" } }";

同理儲存圖片，返回json。

{"uploaded" : 1, "fileName" : "image.png", "url":"http://localhost:15593/UploadImages/RickEditorFiles/Content/2017-05-23 10_39_54.png"  }

如果傳回值出錯，editor會拋出異常，undefined type。

 

 最後editor的存取值：

 

 

 

使用 CKEditor 上傳圖片， 粘貼螢幕