[Javascript] 讓 Ckeditor 更好用：拖曳上傳圖片

Ckeditor 是個開源的線上編輯器，長的像Word用起來也很像，因此很容易就能上手；而且具有龐大的社群，想問問題或是需要某些功能都很容易解決。

最近案子上的需求，必須在Ckeditor上加入拖曳上傳圖片功能。最新的 ckeditor4.5 以後版本已經開始支援html5的拖曳事件，但是原生版本並沒有相關api可以幫助我們製作這些功能，碰巧找到一個別人寫的簡單外掛可已達到我的目的。

Dropler

這個插件提供了三種拖曳上傳的方式：imgur、AW3、自定義，在這裡我要介紹的是由「自定義」入手的方式。

安裝

1. 直接從上面github進入專案頁面，下載整個 dropler 資料夾，全部都丟到 ckeditor 底下的 plugins資料夾。
2. 編輯 ckeditor 的config.js檔案，增加下面的內容：
   
   

     // rest of config
     config.extraPlugins = 'dropler';
   
     // configure the backend service and credentials
     config.droplerConfig = {
         backend: 'basic',
         settings: {
             uploadUrl: '輸入你自己寫的處理程式碼網址'
         }
     }

修改

如果直接依照填空的方式去修改，你會發現問題：你沒辦法接到從dropler傳遞過來的file檔，因為作者只是大概寫個「自定義」的上傳方式，原因是：

xhr.send(file) doesn't send the file. You have to use the FormData object to wrap the file into a multipart/form-data post data object

所以你還需要做些修改：

編輯 dropler 在 plugins 中的 plugin.js，找到 post 這個function：把xhttp.send修改成：

var formData = new FormData();
formData.append( 'img', data );
xhttp.send(formData);

最後在處理程式碼裡面，回傳單張完整圖片的直接連結。
結果會是這樣：