WYSIWYG Editor

위지윅 에디터 사용함. 여러 후보군(CK Editor, Draft.JS, Editor.JS 등)을 거쳐 CK Editor로 결정, Draft.JS는 보류로 남겨둠.

CK Editor

가장 가볍고 Next.JS 환경(React)에서 성능이 좋아 채택. 상업적으로 이용하려면 Commercial License가 필요.

CK Editor Online Builder로 구현

실행법

1. CK Editor Online Builder에 해당 플러그인을 삽입 후 ckeditor5-[ver]-[id].zip 다운로드
2. 압축 풀기 후 ckeditor5-[ver]-[id] 폴더를 ckeditor5로 변경하고, node_modules와 형제로 취급해야하기에 root(./)에 삽입 (공식문서에서 언급하길 빌드될 때, /src안에 위치했다면 Node 충돌을 일으킬 수 있음.)
3. npm install file:./ckeditor5 명령어를 추가하여 의존성으로 관리
4. component에서 ck-editor-block.tsx 구현 : 타입이 정해져있지 않아 오류. // @ts-expect-error를 추가함.
5. 에디터 특성상 SSR이 안되기 때문에 use client로 클라이언트 컴포넌트로 관리하고, Dynamic Import로 임포트함.

추가된 플러그인

Autoformat, Block quote, Media embed, Paste from Office, Table, Font size, Image resize, Remove format, Bold, Cloud Services, Link, Image, Heading, Image caption, Image style, Image toolbar, Indent, Table toolbar, Text transformation, Alignment, Auto image, Autolink, Font background color, Font color, Strikethrough, Underline, Simple upload adapter, Image insert, Image upload, Italic, List, Font family

CK Editor Online Builder의 플러그인으로 삽입, 유료 모델은 사용하지 않음.

이미지 업로더

이미지 업로더 플러그인으로 Simple upload adapter를 사용.

• Simple upload adaptor는 Base64 adaptor가 따로 있지 않는 이상 이미지를 서버로 업로드 후 URL 링크로 가져와야하는 구조.
• 서버에서 이미지 업로드 로직 구현 후 ckeditor5/src/ckeditor.js의 defaultConfig에 이미지 업로드할 서버, header, withCredentials 등을 설정해야함.