CKEditor5 is a powerful WYSIWYG editor with many plugins such as Image upload, embed, resize, etc, for extending its functionality. Integrating and customizing the editor in your React or NextJS application is however not completely straight forward. 

In this article, I will explain the steps to create a custom CKEditor5, with all the plugins/features you desire, and integrate into a React/NextJS application without ejecting your create-react-app app and without introducing any unnecessary configuration in your NextJS app. 

Install CKEditor5 NPM packages

The CKEditor5 component for React is a package that constructs a prebuilt CKEditor5 and make it usable within ReactJS based applications.

Command to execute:

npm i @ckeditor/ckeditor5-react

Now, if the features in the CKeditor5 classic build already satisfies your needs, then go ahead and install the NPM package:

npm i @ckeditor/ckeditor5-build-classic

That is almost it. You just have to now create a custom component that uses the packages you have installed to construct your editor. Let us create a component called WYSIWYGEditor:

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

const WYSIWYGCKEditor = (props) => {

   return (
            <div className='custom-ckeditor-editable'>
                <CKEditor
                    editor={ClassicEditor}
                    data={props.initialData}
                    config={{}}
                    onInit={editor => {
                        // You can store the "editor" and use when it is needed.
                    }
                    onChange={(_, editor) => {
                        const data = editor.getData();
                        // Use editor content
                    }}
                />
            </div>
        );
    }
}

export default WYSIWYGCKEditor

If the Classic pre-built editor does not have all the features you desire, then you can create your own custom build with the features/plugins you want using the CKEditor5 online builder.

Building and integrating custom CKEditor5 build

Head over to the CKEditor5 online builder and select the editor type you want. Add and remove plugins you desire to the selected editor.

In the next step of the online builder, you need to select which buttons of the selected features you want to see in the editor's toolbar.

Before you are able to download the build source of the editor you have been creating so far, you need to select the default language of the editor. Now download the build and publish it as an NPM package so you can install it in your application and share it with others. 

Alternatively, you can directly import the Editor from the ckeditor.js file located in the build directory of the dowloaded build.

import CKEditor from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor'

const WYSIWYGCKEditor = (props) => {

   return (
            <div className='custom-ckeditor-editable'>
                <CKEditor
                    editor={Editor}
                    data={props.initialData}
                    config={{}}
                    onInit={editor => {
                        // You can store the "editor" and use when it is needed.
                    }
                    onChange={(_, editor) => {
                        const data = editor.getData();
                        // Use editor content
                    }}
                />
            </div>
        );
    }
}

export default WYSIWYGCKEditor

Now the custom CKEditor should be available within your React or NextJS application.

Note that CKEditor uses the window object of the browser and therefore cannot be rendered on the server (on the server side of NextJS). So make sure that the WYSIWYGCKEditor is imported (dynamically) and used only in the browser of your NextJS application.

Comment or ask your questions in comment section below the article.