텍스트 에디터(ckeditor4-vue)

현재 회사에서 CRM을 개발중인데, 사내게시판에 텍스트 에디터를 붙이기 위해 ckeditor4-vue package를 이용하여 편집기를 이용하고있다.

Vue.js 프레임워크를 이용하여 front 개발을 하고있고 backend는 Django 를이용하고 있다.

Image Upload

사내게시판에서 이미지를 이용한 게시글을 많이 작성하기에 ckeditor4-vue를 설치하여 editorConfig 설정을 이용하여 이미지 업로드 URL를 설정해놓고 Django 에서를 파일을 받아서 해당 이미지 파일의 업로드 URL를 response 하도록 만들었는데,

이미지 파일을 Ctrl+C , Ctrl+V 하여 이미지 첨부하면 밑에 사진과 같은 에러가 발생하였다.

• Editor Error
  

• Backend(Django) Error

  &responsetype=json http/1.1" 404

Simple Solution

공식문서를 뒤져보니 editorConfig 에 extraPlugins에 imageUpload 플러그인을 추가해주고 uploadUrl 를 적어주니 깔끔하게 Backend(Django)에 내가 원하는 URL로 이미지파일이 업로드되고 업로드URL이 response되어 에디터에 보일 수 있게 되었다.

• 참조(https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html)
  

Code

<ckeditor
  :config="editorConfig"
>
</ckeditor>
...

setup() {
  editorConfig: {
    extraplugin: ['uploadimage'],  // uploadImage 플러그인 추가
    uploadUrl: `${uploadUrl}`,  // uploadUrl 적어주면 끝
  }
}

에러 해결