개발자.. 너란놈..

전에 ckeditor에서 base64image를 plugin 추가 하는 방법에 대해서 알아 봤습니다.

https://1061025.tistory.com/200

다만 이대로 그냥 사용한다면, 큰 사이즈의 이미지를 추가했을 때 이미지의 가로 , 세로 크기에 따라서 들어가기 때문에

pc에서 및 모바일에서 완전 깨지게 됩니다.

그래서 아래와 같이 width:100% , height: auto 처리를 해주어야 하는데 이런 경우에는 아래와 같이 플러그인을 변경 해주어야지만 반응형 처리를 할 수 있습니다.

이렇게 했을 경우 반응형 처리를 가능하게끔 수정 할 수 있기 때문에 고정값으로 표기가 되지 않습니다.

반응형을 고려하여 ckeditor base64image를 사용하려는 모든이들에게 도움이 되었으면 좋겠습니다 :D

Ckeditor 4를 사용 시 이미지를 적용하는 방법이 2가지가 있습니다.

가본으로 백단에 이미지를 filebrowserUploadUrl를 통하여 서버 단에서서 업로들 하는 방법

base64image를 사용하여 이미지를 등록 하는 방법입니다.

Ckeditor 5에서는 기본적으로 base64image를 사용 할 수 있는 것으로 알고 있지만 저 같은 경우는 무료 에디터를 상용으로 사용해야 됐기 때문에 plugin을 적용 해야 됐습니다.

ckeditor의 plugin은 아래 링크에서 다운 받을 수 있습니다.

https://ckeditor.com/cke4/addons/plugins/all

base64image의 경우 아래 링크에서 받을 수 있습니다.

https://ckeditor.com/cke4/addon/base64image

plugin 같은 경우는 ckeditor에 plugin 폴더가 따로 있습니다.

방금 다운로드 한 base64image 폴더를 이름 변경하여 적용 하여주세요

적용 후 CkEditor에 확장 플러그인을 아래와 같이 호출하여 적용 할 수 있습니다.

아래와 같이 ckeditor에 그림이 저장 되는 것을 확인 할 수 있습니다.

다음은 base64image를 넣었을 때 PC와 모바일의 반응형 작업은 어떻게 해야되는 지 알아보겠습니다.