1. 程式人生 > >使用 CKEditor 上傳圖片, 粘貼屏幕截圖

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

要求 license 回調 wan ade 做成 操作 rms 粘貼

之前寫過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 上傳圖片, 粘貼屏幕截圖