使用 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的存取值:

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM