Search code examples
javascriptreactjsckeditor

'ckeditor4-react' and 'HTML5 video' plugin


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.


Solution

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