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

Facebook 功能:

Summary
CKEditor 修改 upload request
Article Name
CKEditor 修改 upload request
Description
筆記如何使用 CKEditor 上傳圖片,並且修改請求的 head 因為有些 API 必須要帶一些額外的資訊所以讓我們來看看如何去修改請求吧
Author
Publisher Name
一群棒子
Publisher Logo