2021. 2. 16. 15:25ㆍFrontend/Vue
이미지 업로딩 방식을 고민하다가
대부분 직접 서버로 호스팅해서 구현하고 있었는데,
우리 서비스에서는 텍스트 작성 위주로 이루어질 예정이었고 첨부파일은 따로 제공하는 형태여서
그냥 base64를 쓰기로 결정하였다.
해결법
아래 내용에서 제공하는 Base64Upload.js를 직접 작성한 후 import하여 문제를 해결하였다.
github.com/ckeditor/ckeditor5-angular/issues/88
How to define a Base64 file upload? · Issue #88 · ckeditor/ckeditor5-angular
Hello, I'm using the ckeditor5 with Angular 7 for the first time. I have seen this topic about how to upload the images in Base64 format (ckeditor/ckeditor5#1378 - specifically this gist: https...
github.com
시행착오 및 좋은 레퍼런스
전 사용하진 않았지만, 추후 참고하기 좋아보이는... 더 많이들 사용하고 계시는 방법에 대한 서치 자료 소개 드립니다.
1. 공식문서
base64 플러그인을 따로 제공중이어서 사용하려 설치했는데
이미 설치한 ckeditor/ckeditor5-build-classic에 동일한 내용이 있는지 충돌이 일어났다.
뭐 더 찾아보면 해결법은 있겠지만, 그냥 위의 방법으로 간단히 해결했다.
ckeditor.com/docs/ckeditor5/latest/features/image-upload/base64-upload-adapter.html#installation
Base64 upload adapter - CKEditor 5 Documentation
Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even bring your own UI to the editor. API reference and examples included.
ckeditor.com
2. 이미지 업로드
(2) CKEditor5 - Web Editor CKEditor5 이미지 업로드
Base64로 변환하면 이미지 크기가 증가하고 큰 용량의 이미지 첨부시 문제가 발생되는 등
성능상 좋지 않아, 서버에 직접 이미지 업로드 후 보여주는 방식이 보편적이다.
아래 내용대로 따라하면 좋을 것 같다.
CKEditor5 - Web Editor CKEditor5 이미지 업로드
시작에 앞서 일단 CKEditor 를 사용하기로 마음을 먹었는데, 에디터를 커스텀 할 때 가장 첫 번째로 문제가 되는 점은 역시 이미지를 업로드 하는 문제일 것이다. CKEditor는 해당 부분을 굉장히 말끔
jjong-factory.tistory.com
(1) [Ckeditor5] NextJS + Ckeditor5 + S3 이미지 업로드하기
많이들 사용하는 NextJS 및 S3 연동 설명이 잘되어 있어 소개 드립니다.
[Ckeditor5] NextJS + Ckeditor5 + S3 이미지 업로드하기
지난 포스트(nextjs + ckeditor5 custom build)에 이어 이번엔 ckeditor5 에서 이미지 업로드 구현을 포스팅한다. 기본적으로 아무 설정 안해도 ckeditor5 에서는 이미지가 base64 포맷으로 업로드된다. 하지만
nagui.me