[Node.js] 於 React 搭配 Ckeditor 進行圖片上傳之相關說明

前端設置

套件引用

import CKEditor from '@ckeditor/ckeditor5-react'  
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'  

元件

<CKEditor  
  config={{ ckfinder: {
    // 請於此處設定上傳圖片之 API 路由
    uploadUrl: '/1/content/image'
  } }}
  editor={ClassicEditor}
  data='<p>Hello from CKEditor 5!</p>'
  onInit={editor => {
    console.log('Editor is ready to use!', editor)
  }}
  onChange={(event, editor) => {
    console.log('Blur.', editor)
  }}
  onBlur={(event, editor) => {
    console.log('Blur.', editor)
  }}
  onFocus={(event, editor) => {
    console.log('Focus.', editor)
  }}
/>

後端設置

圖片上傳時，前端會使用 POST form-data 之方式，將檔案夾帶於 upload 參數中，接著再自行接收處理。最後務必依照以下格式回傳處理結果。

伺服器回應(成功)：

{
  "uploaded": true,
  "url": "http://127.0.0.1/image001.jpg"
}

伺服器回應(失敗)：

{
  "uploaded": false,
  "error": {
    "message": "Could not upload this image."
  }
}