Блог

Я хочу добавить плагин html5video в свой компонент CKEditor. Я использую "ckeditor4-react": "^1.1.0" и это мой компонент:

 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;
 

Я не имею ни малейшего представления о том, как добавить html5video plugin в CKEditor.

Компонент CKEditor 4 React предполагает, что CKEditor загружен перед созданием каких-либо компонентов CKEditor. Таким образом, вы можете передать его URL в пользовательскую сборку CKEditor с каждым необходимым плагином:

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

Чтобы загрузить плагины в экземпляр редактора, передайте компоненту config prop:

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

Следуйте этому :

1. загрузите и добавьте приведенный ниже плагин в свой редактор ckeditor: http://martinezdelizarrondo.com/ckplugins/video1.3.zip
2. добавьте имя плагина в конфигурацию ckeditor, например :

   config.extraPlugins = ‘video’;

3. обновите страницу, и вы должны увидеть значок видео на панели инструментов ckeditor.

Выполнено

Я настоятельно рекомендовал использовать tiny editor вместо Ckeditor. Это очень просто для настройки, особенно для вставки тега video.