[CKEditor5] 리액트에서 CKEditor5 사용하기_타입스크립트, 선언 파일 오류

 

리액트로 게시판을 구현하던 중 내용을 작성하는 부분에 CKEditor를 적용해 보았다.

 

 

---

 

1. CKEditor 설치

npm install --save @ckeditor/ckeditor5-react

npm install --save @ckeditor/ckeditor5-build-classic
or
npm install --save @ckeditor/ckeditor5-build-inline
or
npm install --save @ckeditor/ckeditor5-build-balloon
or
npm install --save @ckeditor/ckeditor5-build-balloon-block
or
npm install --save @ckeditor/ckeditor5-build-decoupled-document

 

   - @cheditor/cheditor5-react와 사용할 템플릿을 골라 설치해준다.

 

   - 커스텀도 가능하지만 일반 클래식 버전을 사용하기 위해 @ckeditor/ckeditor5-build-classic 를 설치했다.

 

 

2. 모듈 선언

그냥 임포트 하는 경우 선언 파일을 찾을 수 없다는 에러 문구가 뜬다.

 

이런 경우 node_modules/@types폴더에 @ckeditor라는 폴더를 만들어 준 후 index.d.ts파일을 추가해 주어야 한다.

   - index.d.ts

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';

 

 

3. CKEditor5 사용

``````

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

``````

export default function App() {

// 생략

  return (
  
  ``````
  
  <Box>
    <CKEditor
      editor={ClassicEditor}
      config={{
        placeholder: '내용을 입력하세요',
      }}
      onReady={(editor: any) => {
      // 에디터가 최초 실행된 경우 발생하는 이벤트
        console.log('Editor is ready to use!', editor);
      }}
      onChange={(event: any, editor: { getData: () => any; }) => {
        // 에디터에 내용을 작성하는 경우 발생하는 이벤트
        const data = editor.getData();
        console.log({ event, editor, data });
      }}
      onBlur={(editor: any) => {
      // 에디터 focus 상태에서 벗어났을 때 발생하는 이벤트 (editor 밖을 클릭한 경우)
        console.log('Blur.', editor);
      }}
      onFocus={(editor: any) => {
      // 에디터를 클릭했을 때 발생하는 이벤트
        console.log('Focus.', editor);
      }}
    />
  </Box>
  )
}

 

    💡 eiditor에 설치한 템플릿을 넣어주면 된다.

 

    💡 placeholder를 추가하고 싶었기 때문에 config에 넣어주었다.

 

 

5. css로 기본 높이 설정 (생략 가능)

.ck-editor__editable {
  min-height: 400px;  // 원하는 높이 설정
}

 

    💡 .ck-editor__editable : CKEditor의 기본 클래스 속성

 

 

---

 

리액트 타입스크립트로 구현 중 자꾸 2번 내용 처럼 모듈 선언 파일을 찾을 수 없다고 떠서 한참을 헤맨 것 같다.

 

index.d.ts 파일에 모듈 선언만 해주면 되는 것이었다..

 

잊어버리지 않도록 기록해두기..!

 

 

<자세한 내용은 공식 홈페이지를 참고해 주세요.>