-
Create your Ckeditor online in https://ckeditor.com/ckeditor-5/online-builder/
-
Download ckeditor zip and unzip your folder
-
Add download folder to your root of react project
-
Add dependency in your package json. There are 2 ways a) First way is add with command line npm add file:./ckeditor5 b) Open your package.json file and inside dependency object add this line: "ckeditor5-custom-build": "file:ckeditor5",
-
npm install --save @ckeditor/ckeditor5-react
-
import { CKEditor } from "@ckeditor/ckeditor5-react" import Editor from 'ckeditor5-custom-build/build/ckeditor'
-
<CKEditor editor={ Editor } // add Editor imported from 'ckeditor5-custom-build/build/ckeditor' here data="
Hello from CKEditor 5!
" onReady={ editor => { // You can store the "editor" and use when it is needed. console.log( 'Editor is ready to use!', editor ); } } onChange={ ( event, editor ) => { const data = editor.getData(); console.log( { event, editor, data } ); } } onBlur={ ( event, editor ) => { console.log( 'Blur.', editor ); } } onFocus={ ( event, editor ) => { console.log( 'Focus.', editor ); } } />