Ckeditor 5 in Reactjs doesn't work correctly

Question

I had been using Ckeditor 4 for a long time in my React project and I didn't have any problem with it. For adding a plugin that it provides adding video (video Html5 tag), I had to use Ckeditor 5 instead of Ckeditor 4. So I built an editor via CKEditor 5 online builder according according to this document step by step. This is a directory of Ckeditor in my project:

The ckeditor.js (ckeditor5/src/ckeditor.js) file is:

/**
 * @license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight.js';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '@ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
import List from '@ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';

class Editor extends ClassicEditor {}

// Plugins to include in the build.
Editor.builtinPlugins = [
    Alignment,
    Autoformat,
    BlockQuote,
    Bold,
    CKFinder,
    CKFinderUploadAdapter,
    Code,
    Essentials,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    HtmlEmbed,
    Image,
    ImageCaption,
    ImageInsert,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Italic,
    Link,
    LinkImage,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation
];

export default Editor;

And I used the Editor in this way:

import React, { useState, FunctionComponent }   from "react";
import Editor                                   from "ckeditor5-custom-build/build/ckeditor";
import CKEditor                                 from "@ckeditor/ckeditor5-react";
export interface CreateNewArticleProps {}

const CreateNewArticle: FunctionComponent<CreateNewArticleProps> = () => {
    const [articleFormData, setArticleFormData] = useState({
        articleBody: "",
    });

    const editorConfiguration = { toolbar: ["bold", "italic"] };
    const ckeditorDataChangeHandler = (event) => {
        setArticleFormData({
            ...articleFormData,
            articleBody: event.editor.getData(),
        });
    };

    return (
        <CKEditor
            editor={Editor}
            config={editorConfiguration}
            data={articleFormData.articleBody}
            onChange={ckeditorDataChangeHandler}
        />
    );
};
export default CreateNewArticle;

The editorConfiguration constant is the simplest configuration for the CKEditor component, but none of the toolbars doesn't work.

I need all toolbar that exists in the ckeditor.js (ckeditor5/src/ckeditor.js) file. Please consider that my main goal in using Ckeditor5 is to benefit from the ability to add a video in text.

Answer 1

Change handler as following:

const ckeditorDataChangeHandler = (event, editor) => {
    setArticleFormData({
        ...articleFormData,
        articleBody: editor.getData(),
    });
};