JAVASCRIPT

React CKEditor Custom build

/* 
You have to pass 3 steps:
1. copy the ckeditor5-custom build to root dir
	├── ckeditor5
	│   ├── build
	│   ├── sample
	│   ├── src
	│   ├── ...
	│   ├── package.json
	│   └── webpack.config.js
	├── node_modules
	├── public
	├── src
	├── ...
	└── package.json
2. run 'yarn add file ./ckeditor5'
3. use code below...
*/


import React, { Component } from 'react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { CKEditor } from '@ckeditor/ckeditor5-react'

const editorConfiguration = {
    toolbar: [ 'bold', 'italic' ]
};

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 from online builder in React</h2>
                <CKEditor
                    editor={ Editor }
                    config={ editorConfiguration }
                    data="<p>Hello from CKEditor 5!</p>"
                    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 );
                    } }
                />
            </div>
        );
    }
}

export default App;