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

 

2017.08.16更新：園友沒有找到相關插件，先將整個CKEditor的包上傳至百度雲，

連接: https://pan.baidu.com/s/1bpaqwIr 密碼: tibx

 

以前寫過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的存取值：