'ckeditor4-react' and 'HTML5 video' plugin

user_8740387 0
Viewed 965

I want to add html5video plugin to my CKEditor component. I use "ckeditor4-react": "^1.1.0" and this is my component:

import React, { useState, FunctionComponent }   from "react";
import CKEditor                                 from "ckeditor4-react";

export interface CreateNewArticleProps {}

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

    const ckeditorConfig = {
        extraPlugins: "justify, colorbutton, font",
    };
    const ckeditorDataChangeHandler = (event) => {
        setArticleFormData({
            ...articleFormData,
            articleBody: event.editor.getData(),
        });
    };

    return (
        <CKEditor
            type="classic"
            config={ckeditorConfig}
            data={articleFormData.articleBody}
            onChange={ckeditorDataChangeHandler}
        />
    );
};
export default CreateNewArticle;

I don't have any idea about how to add the html5video plugin to CKEditor.

reactjs ckeditor javascript
3 Answers

The CKEditor 4 React component assumes that CKEditor is loaded before creating any CKeditor components. This way you can pass it URL to custom build of CKEditor with every needed plugin:

CKEditor.editorUrl = 'https://your-website.example/ckeditor/ckeditor.js';

To load plugins into the editor's instance, pass config prop to the component:

    <CKEditor
    config={ {
        extraPlugins: 'extra,plugins'
    } }
/>
Admin1
user_48335950

I highly recommended using tiny editor instead of Ckeditor. It is very simple for customization, especially for inserting video tag.

user_87403870
Related