'ckeditor4-react' 和 'HTML5 video' 插件

Question

我想将 html5video plugin 添加到我的 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。

Answer 1

CKEditor 4 React 组件假定在创建任何 CKeditor 组件之前加载 CKEditor。这样你就可以将它 URL to custom build of CKEditor 与每个需要的插件一起传递：

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

要将插件加载到编辑器的实例中，pass config prop to the component:

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

Answer 2

关注这个：

下载以下插件并将其添加到您的 ckeditor 中： http://martinezdelizarrondo.com/ckplugins/video1.3.zip
将插件名称添加到 ckeditor 配置中，例如：

config.extraPlugins = 'video';
刷新页面，你必须在ckeditor工具栏中看到视频图标。

完成

Answer 3

我强烈建议使用 tiny editor 而不是 Ckeditor。自定义非常简单，特别是插入视频标签。

'ckeditor4-react' 和 'HTML5 video' 插件

'ckeditor4-react' and 'HTML5 video' plugin

javascript

ckeditor

reactjs