리액트에서 CKEditor5 사용

Classic, Inline, Balloon 등 공식 문서에서 제공하는 기본 빌더들이 있다.

해당 패키지를 설치한다.

 

예)

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

 

필요하다면 import를 이용해 에디터에 한국어 설정을 적용한다.

이후 간단하게 입력한 값을 확인해보는 로직

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/ko";

const editorConfiguration = {
  placeholder: "내용을 입력하세요.",
  language: "ko",
};

const CKeditor = () => {
  const editorDataRef = React.useRef("");
  const [text, setText] = React.useState("");

  const submitHandler = () => {
    console.log(editorDataRef.current);
    setText(editorDataRef.current);
  };

  return (
    <>
      <div>
        <CKEditor
          editor={ClassicEditor}
          data={editorDataRef.current}
          config={editorConfiguration}
          onReady={(editor) => {
            // 에디터가 준비되면 이 함수가 호출됩니다.
            console.log("Editor is ready to use!", editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            editorDataRef.current = data;
          }}
          // 필요한 다른 이벤트 핸들러들...
        />
      </div>
      <button onClick={submitHandler}>제출</button>
      <section dangerouslySetInnerHTML={{ __html: text }}></section>
    </>
  );
};

export default CKeditor;

에디터 커스텀

공식 문서에서 제공하는 빌더들은 코드 블럭도 없고 플러그인이 좀 빈약하다.

에디터에 플러그인을 내 마음대로 커스텀하는 방법을 알아보자.

 

먼저 기본 베이스가 되는 리액트 ckeditor를 설치한다.

 

npm install --save @ckeditor/ckeditor5-react

 

에디터를 커스텀하는 방법에는 여러가지가 있지만 여기에선 온라인 빌더를 이용해 소스 코드를 받은 뒤 진행중인 프로젝트에 통합 빌드하는 방법을 사용했다.

 

먼저 아래의 홈페이지를 통해 입맛대로 커스텀한 빌더를 다운받는다.

https://ckeditor.com/ckeditor-5/online-builder/

CKEditor 5 Online Builder | Create your own editor in 5 steps

다운 받은 폴더를 프로젝트로 내부로 이동시킨다.

 

공식 문서에선 노드가 오류를 반환할 수 있기 때문에 아래 그림처럼 src 폴더 가 아닌 src및 node_modules폴더 옆에 두길 권장하고 있다.

├── ckeditor5
│   ├── build
│   ├── sample
│   ├── src
│   ├── ...
│   ├── package.json
│   └── webpack.config.js
├── node_modules
├── public
├── src
├── ...
└── package.json

 

그런 다음 프로젝트의 pakage.json에 ckeditor5를 종속성으로 설치한다.

yarn add file:./ckeditor5

or

npm install file:./ckeditor5

 

설치가 완료되면 코드를 수정한다.

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5-custom-build/build/ckeditor";

const editorConfiguration = {
  placeholder: "내용을 입력하세요.",
};

const CKeditor = () => {
  const editorDataRef = React.useRef("");
  const [text, setText] = React.useState("");

  const submitHandler = () => {
    console.log(editorDataRef.current);
    setText(editorDataRef.current);
  };

  return (
    <>
      <div>
        <CKEditor
          editor={Editor}
          data={editorDataRef.current}
          config={editorConfiguration}
          onReady={(editor) => {
            // 에디터가 준비되면 이 함수가 호출됩니다.
            console.log("Editor is ready to use!", editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
            editorDataRef.current = data;
          }}
          // 필요한 다른 이벤트 핸들러들...
        />
      </div>
      <button onClick={submitHandler}>제출</button>
      <section dangerouslySetInnerHTML={{ __html: text }}></section>
    </>
  );
};

export default CKeditor;

타입스크립트를 사용한다면 아래 타입을 추가

// src\@types\index.d.ts

declare module "ckeditor5-custom-build/build/ckeditor" {
  const CustomEditorBuild: {
    create(
      elementOrData: HTMLElement | string,
      config?: object,
    ): Promise<CustomEditor>;
  };

  export = CustomEditorBuild;
}