CKEditor5의 Online builder 사용하기

CKEditor5를 사용하다보면 Plugin을 설치하여 사용해야 하는 경우가 있습니다. Plugin source code를 내려받아 직접 빌드하여 사용해도 되지만, CKEditor5의 공식 사이트에서 제공하는 Online builder를 사용하면 아주 편리합니다.

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

1. 위 주소에서 5단계를 거친후 Code를 내려받습니다.
2. 내려받은 소스코드를 ./node_modules/@ckeditor/ 에 위치 시킵니다.
3. (React) 아래와 같이 소스코드에 Import하여 사용하면 됩니다.

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

<CKEditor
disabled={editDisabled}
editor={ CustomEditor }
data={editCode}
config={ {
toolbar: [ 'bold', 'italic', 'uploadImage' ]
} }
onChange={ ( event, editor ) => {
setEditCode(editor.getData());
} }
/>