개발자 유미님의 문서 프로젝트에 함께 참여하면서 CKEditor를 사용해보았다.
CKEditor는 WYSIWYG 에디터로 오픈소스이며 커스텀이 쉽다.
VanillaJS, React, Vue, Angular에서 사용이 가능하다.
먼저 홈페이지로 가서 Take product tour 클릭 후
하단으로 내려서 다시 Get started를 클릭한다.
그러면 CKEditor Builder가 뜨는데, 여기서 단계별로 원하는 스타일의 에디터를 선택하면 된다.
프리셋으로 Document 형식을 선택했고, features에서 feature를 추가하거나 뺄 수 있다.
별 표시가 된 기능들은 Premium(유료) 기능이므로, 유료 기능이 필요하지 않다면 모두 빼자.
아쉽게도 노션에서 볼 수 있는 Slash Command나 AI같은 기능들은 모두 유료 기능이다.
파일 업로드 기능이 필요하다면 반드시 선택을 해주어야 하는데, 기본 선택이 프리미엄 기능으로 되어 있으므로 선택 해제 후 Simple Upload Adapter를 선택해주었다.
다음은 툴바 선택인데, Wrapped를 선택하면 모든 기능 보여주지 않고 한 줄만 보여준다. 그리고 툴바 우측에 ... 버튼이 생겨서 나머지 기능들을 볼 수 있다.
Ballon Toolbar는 글을 드래그 했을 때 보여지는 작은 툴바이다.
Block Toolbar는 문단 옆을 클릭하면 툴바를 보여준다.
마지막으로 방금 선택한 에디터의 설치에 관해 설명해준다.
바닐라JS에서는 CDN이 가능하지만 나머지 프레임워크들에서는 안된다.
설명에 따라서 패키지 설치 후 html(혹은 Component)과 css 파일을 프로젝트에 저장하여 사용하면 된다.
나는 리액트를 사용했고, 에디터 Component를 저장한 후에 다른 페이지에서 import 할 수 있도록 했다.
css 파일명, Component 파일명에 주의하여 코드를 수정해줘야 한다.
이런 식으로 에디터가 만들어진 것을 확인할 수 있다.
