위지윅 에디터 사용함. 여러 후보군(CK Editor, Draft.JS, Editor.JS 등)을 거쳐 CK Editor로 결정, Draft.JS는 보류로 남겨둠.
가장 가볍고 Next.JS 환경(React)에서 성능이 좋아 채택. 상업적으로 이용하려면 Commercial License가 필요.
CK Editor Online Builder로 구현
ckeditor5-[ver]-[id].zip
다운로드ckeditor5-[ver]-[id]
폴더를 ckeditor5
로 변경하고, node_modules
와 형제로 취급해야하기에 root(./)
에 삽입 (공식문서에서 언급하길 빌드될 때, /src
안에 위치했다면 Node 충돌을 일으킬 수 있음.)npm install file:./ckeditor5
명령어를 추가하여 의존성으로 관리component
에서 ck-editor-block.tsx
구현 : 타입이 정해져있지 않아 오류. // @ts-expect-error
를 추가함.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를 사용.
ckeditor5/src/ckeditor.js
의 defaultConfig
에 이미지 업로드할 서버, header
, withCredentials
등을 설정해야함.