들어가며😃

프로젝트에서 CKEditor를 사용하였는데 해당 라이브러리에서 제공해주는 기본 에디터보다 커스텀해서 쓰는 편이 더 효율적이였다. 워낙 필수기능만 구성하자는 취지가 있었던지라 기본 기능도 프로젝트 핏엔 워낙 넘쳐 필요한 기능만 쓰는 것 보다 커스텀을 통해 훨 가볍게 가져다 쓸 수 있는 이점도 있었다. 그래서 이번에 라이브러리 패키징을 처음 접하게 되었는데 생각보다 꽤 쉬웠고 다음을 위해 정리해보는 오늘의 포스팅이다.✍🏻



에디터 다운로드 순서

  1. CKEditor 홈페이지에 접속

  2. Online builder
    image

  3. 에디터 타입 선택 (나는 기본 classic 을 선택했다)
    image

  4. 프로젝트에 필요한 기능을 커스텀한다.
    image

  5. 선택한 기능들을 상단바에 넣고 빼고 정렬을 정의할 수 있다. 이 부분은 다운받아서 고칠 수 있는 부분!
    image

  6. 언어 선택
    image

  7. 다운로드
    image



패키징 🎁

1 .패키지를 열고 install
image

2 .npm run build 를 통해 파일 빌드


3 .npm pack 패키징 _ 패키징 완료 후 아래와 같이 무언가 파일이 하나 생겼을 것이다!🫢

image

4 .해당 파일을 기존 프로젝트 폴더로 복사해온다. 나는 src/libs에 위치하게 했다.

5 .package.json에 다운받을 파일 경로를 추가한다

  "dependencies": {
    "ckeditor5-custom-build": "file:src/libs/ckeditor5-custom-build-0.0.1.tgz",
  },


6 .npm install 이후 에디터를 쓰는 곳에서 커스텀 에디터를 import 한다. import 경로는 node_modules의 경로이다.

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

const Editor = () => {
  return (
    <>
      <CKEditor editor={CustomEditor} />
    </>
  );
};

export default Editor;

image

7 .결과 _ 아주 만족👊🏻

image



npm install 순서

1 .명령어 실행

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


2 .에디터를 호출 해본다

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

const Editor = () => {
  return (
    <>
      <CKEditor editor={ClassicEditor} />
    </>
  );
};

export default Editor;

image

3 .위의 기능에서 일부만 사용하고 싶다면 toolbar 속성을 지정하면 된다.

<CKEditor
  editor={ClassicEditor}
  config=
/>

image





해당 라이브러리를 사용해보면서 무언가 불편함을 느낌으로 인해 처음으로 패키징을 해보았는데 생각보다 좋은 배움의 시간이였다. 지정된 라이브러리 뿐만아니라 우리가 커스텀한 라이브러리 파일을 install 시 끌어오는것도 매우 신기하였고 다른 라이브러리도 이렇게 쓰는 경우가 있던데 어떤 불편함과 이유로 따로 커스텀을 했는지 궁금해지기도 했다. 다음에 한번 살펴봐야겠다. 어쨌든 오늘도 많은 배움의 시간이 되었다 굳굳 🎁🚀