⛵️ 211104 TIL

모임 만들기 페이지 안의 모임 소개 작성 폼을 일반 텍스트 필드로 만들었었다. 그런데 팀 회의 도중에 모임 소개에 들어갈 내용이 추가되면서 항목이 여러개로 늘어났다. 일반 텍스트 필드로는 내용을 작성하기에도 열람하기에도 불편해질 것이 뻔했다. 고민하던 중 velog 글작성 에디터를 떠올렸고, 모임 소개글 인풋 텍스트 필드에 적용하기로 결정했다.

CKEditor 5

구현 방법을 찾던 중 CKEditor 5 라는 깔끔하고 다루기 쉬운 라이브러리를 찾게 되었다. 인풋 창 상단에 간단한 툴바가 위치하고 문단을 나누거나 불렛 포인트를 작성하는 등 여러가지 에디터 기능들을 지원한다. 나는 S3를 통해 이미지 업로드 기능을 이미 구현한 상태라 필요가 없었지만 파일 업로더 기능도 지원한다고 한다. configuration 기능을 통해 여러가지 플러그인을 설치하여 커스텀이 가능하지만, yarn eject를 통해 node_module 파일을 건드리거나 따로 config 파일을 만들어야하는 번거로움이 있다. 고로 난 공식 홈페이지에서 지원하는 online builder를 사용하여 툴바 구성 뿐 만아니라 한글화까지 진행하였다.

입력값을 불러오는 과정에서 오류가 발생하여 한참을 헤맸다.

const Editor = (getEditorContent) => {
  return (
    <div>
      <CKEditor
        editor={ClassicEditor}
        data={'Hello World'}
        onChange={(event, editor) => {
            const data = editor.getData();
            getEditorContent(data);
        }}
      />
    </div>
  );

공식 문서 상의 가이드를 따라 진행했지만 제대로 되지 않아 한참을 헤맸다. 그런데 결국 오타로 인한 오류... 힘이 빠지는 순간이었지만 그래도 오류가 해결됐다는 것에 감사한다.

// getEditorContent를 감싸는 {}를 까먹고 적지 않았었다...
const Editor = ({getEditorContent}) => {
  return (
    <div>
      <CKEditor
        editor={ClassicEditor}
        data={'Hello World'}
        onChange={(event, editor) => {
            const data = editor.getData();
            getEditorContent(data);
        }}
      />
    </div>
  );