멋진 개발자가 되고 싶어

[ck editor] image adapter에 관하여 (adapter 종류 / 유료 어댑터 / 무료 어댑터) 본문

CODE/라이브러리

[ck editor] image adapter에 관하여 (adapter 종류 / 유료 어댑터 / 무료 어댑터)

nutonny 2023. 2. 9. 18:06

ck editor의 image adapter

ck editor 연결 직후 사진을 추가하고 싶어도 사진이 추가 되지 않는다. 이때 콘솔창을 확인해보면 아래와 같은 경고가 뜬다.

ckeditor.js:6 filerepository-no-upload-adapter 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-filerepository-no-upload-adapter

위의 링크로 접속하면 경고에 대한 문서로 이동하게 된다. 해당 문서를 보면 아래와 같은 정보를 얻을 수 있다.

Image upload overview

  • 이미지 어댑터 관련 공식 문서
  • Official upload adapters 부분을 확인하면 이미지 어댑터에 관한 자세한 내용을 알 수 있다.
  • 해당 문서에 따르면 ck editor의 어댑터는 아래와 같이 분류된다.

유료 어댑터

  • CKBox
  • Easy Image
  • CKFinder

무료 어댑터

  • Simple adapter
  • Base64 adapter
  • Custom adapter
    • Image upload overview 문서에는 Implementing your own upload adapter라는 제목으로 소개되고 있다.

무료 어댑터에 관한 정리

무료 어댑터를 사용해보며 영문 문서를 이해하는데 꽤 많은 시간이 소요 됐었다. 그래서 관련 내용을 정리를 해보았다. 이 블로그를 보는 사람들에게 조금이나마 도움이 될 수 있길 바란다.

Simple adapter

  • Simple adapter 공식문서
  • XMLHttpRequest API를 사용하여 서버에 이미지를 업로드하는 어댑터
  • 최소한의 편집기 구성으로 할 수 있어 간편하다.

Base64 adapter

  • Base64 adapter 공식문서
  • 편집기에 삽입된 이미지를 Base64 문자열로 변환하는 어댑터
  • 가장 쉽게 이미지 업로드를 할 수 있는 방법이나, 효율적이지 못하다는 단점이 있다.

Custom image upload adapter

Adapter 사용 후기

처음에는 가장 적용이 쉽다는 Simple adapter를 사용하려했다. 하지만 Angular 기반의 프로젝트에 적용하려하니, error가 발생하여 제대로 작동하지 않았다. 이 문제는 Custom adapter 문서를 참조하여 해결할 수 있었다. 관련하여 더 자세하게 알고 싶다면 아래의 링크를 참고하길 바란다.

참고 자료

'CODE > 라이브러리' 카테고리의 다른 글

[ck editor] Angular에서의 image upload adapter 사용  (0) 2023.02.13
[ck editor] ck editor는 무엇일까? (위지위그의 의미)  (0) 2023.02.06
[ck editor] Angular에서 ck editor는 어떻게 사용할까? (사용법)  (0) 2023.02.06
[gsap] gsap의 기초 (gsap에서 자주 쓰는 코드)  (0) 2023.01.11
'CODE/라이브러리' Related Articles more
Comments