前端設置
套件引用
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."
}
}