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

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

Facebook 功能: