ReactJS에서 온라인 빌드로 CKEditor 5를 가져오는 방법 – 문제 해결 가이드

리액트JS에서 CKEditor 5 커스텀 빌드 가져오기

리액트JS 프로젝트에 CKEditor 5 커스텀 빌드를 가져오는 데 어려움을 겪고 있다면, 여기서 올바른 정보를 얻을 수 있습니다. 이 블로그 포스트에서는 CKEditor 5를 리액트 어플리케이션에 성공적으로 가져오는 과정을 단계별로 안내해 드리겠습니다.

1단계: 커스텀 빌드 다운로드 및 추출

첫 번째 단계는 CKEditor 온라인 빌더 사이트(https://ckeditor.com/ckeditor-5/online-builder/)를 방문하고 원하는 기능과 플러그인을 구성하여 커스텀 빌드를 만드는 것입니다. 요구 사항에 따라 빌드를 커스터마이징한 후 “Build” 버튼을 클릭합니다.

빌드 프로세스가 완료되면 zip 파일을 다운로드하라는 메시지가 표시됩니다. 이 파일을 원하는 위치로 저장하고 추출합니다.

2단계: CKEditor 5 파일을 프로젝트에 추가

지금은 zip 파일에서 추출한 폴더로 이동하여 “build” 폴더를 찾아야 합니다. “build” 폴더의 모든 내용, 즉 “ckeditor.js” 파일, “ckeditor.js.map” 파일 및 “translation” 폴더를 복사합니다.

리액트 프로젝트에서 “src/components” 디렉토리 내에 “CKeditor”라는 디렉토리를 생성합니다. 이 새로운 “CKeditor” 디렉토리에 복사한 파일을 붙여넣습니다.

3단계: 종속성 설치

다음으로 필요한 종속성을 설치해야 합니다. 터미널이나 명령 프롬프트를 열고 프로젝트 루트 디렉토리로 이동한 후 다음 명령을 실행합니다:

npm install @ckeditor/ckeditor5-react

이 명령은 CKEditor 5 리액트 패키지를 설치하는데 필요합니다. 이 패키지는 리액트 어플리케이션에서 CKEditor를 사용하기 위해 필수적입니다.

4단계: 리액트에서 CKEditor 5 가져오고 사용하기

이제 리액트 컴포넌트에서 CKEditor 5를 가져와 사용할 준비가 되었습니다. CKEditor를 사용하려는 컴포넌트를 열고 다음을 추가합니다:

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from "../components/ckeditor/ckeditor";

불러온 후, JSX 코드에서 CKEditor 컴포넌트를 사용할 수 있습니다. 다음은 사용 예시입니다:

class MyEditor extends React.Component {
  render() {
    return (
      <div>
        <h2>내 CKEditor</h2>
        <CKEditor
          editor={ ClassicEditor }
          data="<p>초기 에디터 콘텐츠</p>"
          onReady={ (editor) => {
            console.log('에디터 사용 준비 완료!', editor);
          } }
          onChange={ (event, editor) => {
            const data = editor.getData();
            console.log({ event, editor, data });
          } }
        />
      </div>
    );
  }
}

MyEditor 컴포넌트를 자신의 커스텀 CKEditor 컴포넌트의 이름으로 바꿔야 합니다.

결론

축하합니다! CKEditor 5 커스텀 빌드를 리액트JS 어플리케이션에 성공적으로 가져왔습니다. 이제 CKEditor의 강력한 기능을 사용하여 리액트 프로젝트에서 텍스트 편집 경험을 향상시킬 수 있습니다.

이 안내서가 도움이 되었기를 바랍니다. CKEditor 5와 함께 즐겁게 코딩하세요!

참고 자료 : 

reactjs