ReactJS: Implement CKEditor 5 in Reactjs

CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter-like applications, all is possible within a single editing framework.

The editor comes with a well-designed UI and perfect UX, so users can easily manage media and tables as well as use advanced features, such as auto-formatting, mentions, Paste from Word or Markdown support. Follow ckeditor 5 docs for more information.

# How to use it in React App?

Install React app

If you're a beginner for react development, i would recomment you to follow react docs created by facebook itself for basic. Please follow the REACT DOCS for more information.

Please use the below command to install the react-app. Firstly Nodejs should be installed in your system.

npx create-react-app CKEDITOR-APP

It will take 1-2 minutes for installation and you CKEDITOR-APP folder will be created in your drive with multiple files .e.g src, packages.json. To run your application please use below command

npm run start

Your application will be open automatically in browser http:/localhost:3000/

Install CKEditor5 package.

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

We're done with package installation. Now create a separate component for Editor. Create Editor.js file in src folder and paste the below code.

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditors from 'ck5-mck-editor/build/ckeditor';

const Editor = ({ disabled = false }) => {
    return (
        <React.Fragment>
            <CKEditor
                editor={ClassicEditors.ClassicEditorDefault}
                onChange={(_, editor) =>                                 console.log(editor.getData())}
                disabled={disabled}
            />
        </React.Fragment>
    );
};

export default Editor;

It will work like a common component and can be used in anywhere in a project.

Let's use this editor in your app. Remove everything from your App.js and paste the below code.

import React from 'react';
import Editor from './Editor';

const App = () => {
    return (<React.Fragment>
                <h1>CKEDITOR 5</h1>
                <Editor disable={false} />
           </React.Fragment>)
}

Everything is ready. Go to your app and enjoy with your editor.

# How to remove toolbars from CKEditor 5?

Use config prop of CKEditor 5.

import React from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditors from 'ck5-mck-editor/build/ckeditor';

const Editor = ({ disabled = false }) => {
    return (
        <React.Fragment>
            <CKEditor
                editor={ClassicEditors.ClassicEditorDefault}
		config={{
			toolbar: []
		}}
                onChange={(_, editor) =>   console.log(editor.getData())}
                disabled={disabled}
            />
        </React.Fragment>
    );
};


export default Editor;

Create one more file inside src file, name editor.css

.ck-sticky-panel {
        display: none;
    }

Note: import editor.css file in your Editor.js file.