CKEditor 修改 upload request

CKEditor 相信大家都已經耳熟能詳，功能強大而且插件也多對於所見即所得編輯器是一個很好的選擇，編輯器內可以直接上傳圖檔或檔案的功能也很常見，今天你要在上傳多帶額外的資訊就沒有那麼簡單了，官方文檔你懂的…

前置作業

在這之前你應該已經開啟了上傳功能，如果你還沒開啟可以參考本站文章
Laravel CKEditor 整合 Laravel file manager 整合 Laravel file manager 的部分，或是 File Manager Integration

TL;DR

如果你有看過官方文檔 你可能會瞄到 fileUploadRequest 這個事件，那麼我必須告訴你這個事件他原生的上傳插件是不會觸發的。

你必須要額外安裝 Upload Image 才會觸發 fileUploadResponse 所以如果你是掛 CDN 要本地安裝插件 請看 CKEditor CDN 。

所以最後你的 code 可能會長這樣

this.instance.on('fileUploadResponse', function (evt) {
  evt.stop()
  let data = evt.data
  let xhr = data.fileLoader.xhr
  let status = xhr.status
  if (status === 200) {
    let res = JSON.parse(xhr.response)
    data.url = res.imageUrl
  } else {
    evt.cancel()
  }
})

參考資料

CKEDITOR, Image Upload (filebrowserUploadUrl)
ckeditor 4.5 fileUploadRequest event not firing Ask