如何将“strinsert”自定义下拉插件添加到 ckeditor4-react？

如何解决如何将“strinsert”自定义下拉插件添加到 ckeditor4-react？

我正在使用 ckeditor4-react 插件在 React 应用程序中使用文本编辑器。现在我想在我的文本编辑器中添加一个字符串下拉菜单，为此我遵循了“添加自定义插件”文档并添加了“strinsert”自定义插件。

在“node-modules/ckeditor4-react/”文件夹中，我创建了一个名为“plugins”的文件夹，并在其中放置了“strinsert”文件夹。

现在我的自定义插件路径是“node-modules/ckeditor4-react/plugins/strinsert/plugin.js” “plugin.js”代码：

CKEDITOR.plugins.add('strinsert',{
    requires : ['richcombo'],init : function( editor )
    {
        //  array of strings to choose from that'll be inserted into the editor
        var strings = [];
        strings.push(['@@FAQ::displayList()@@','FAQs','FAQs']);
        strings.push(['@@Glossary::displayList()@@','Glossary','Glossary']);
        strings.push(['@@CareerCourse::displayList()@@','Career Courses','Career Courses']);
        strings.push(['@@CareerProfile::displayList()@@','Career Profiles','Career Profiles']);

        // add the menu to the editor
        editor.ui.addRichCombo('strinsert',{
            label:      'Insert Content',title:      'Insert Content',voiceLabel: 'Insert Content',className:  'cke_format',multiSelect:false,panel:
            {
                css: [ editor.config.contentsCss,CKEDITOR.skin.getPath('editor') ],voiceLabel: editor.lang.panelVoiceLabel
            },init: function()
            {
                this.startGroup( "Insert Content" );
                for (var i in strings)
                {
                    this.add(strings[i][0],strings[i][1],strings[i][2]);
                }
            },onClick: function( value )
            {
                editor.focus();
                editor.fire( 'saveSnapshot' );
                editor.insertHtml(value);
                editor.fire( 'saveSnapshot' );
            }
        });
    }
});

添加此插件后，我通过使用“extraPlugins”配置道具在文本编辑器中使用了此插件。这是我的 TextEditor 插件文件的代码（位于 的“src”文件夹内）

class TextEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editorData: this.props.data
        }
    }

    /** lifecycle method */
    componentDidMount() {
        this.isMount = true;
        this.setState({editorData: this.props.data})
    }
    componentwillUnmount() {
        this.isMount = false;
    }

    /** function to detect the editor changes */
    onEditorChange(event) {
        let data = event.editor.getData()
        this.props.onChange(data)
    }

    // main function
    render() {
        const { editorData } = this.state;
        return (
            <CKEditor
                data={editorData}
                onChange={(e) => this.onEditorChange(e)}
                config={{
                    toolbar: [
                        { name: 'basicstyles',items: ['Bold','Italic','Underline','Strike'] },{ name: 'editing',items: ['SelectAll'] },{ name: 'clipboard',items: ['Undo','Redo'] },{ name: 'links',items: ['Link','Unlink','Anchor'] },{ name: 'insert',items: [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] },{ name: 'document',items: [ 'Templates','Preview','-','Source'] },{ name: 'paragraph',items: ['NumberedList','BulletedList','Outdent','Indent','Blockquote','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BidiLtr','BidiRtl','Language'] },{ name: 'styles',items: [ 'Styles','Format','Font','FontSize' ] },{ name: 'colors',items: [ 'TextColor','BGColor' ] },{ name: 'tools',items: [ 'Maximize','ShowBlocks' ] },],removePlugins: ['language'],extraPlugins: "strinsert",}}
            />
        );
    }
}

export { TextEditor };

在我打开文本编辑器时添加此内容后，它会在控制台中显示一个错误:: 错误::

ckeditor.js:98 GET https://cdn.ckeditor.com/4.15.1/standard-all/plugins/strinsert/plugin.js?t=KA9B 

ckeditor.js:258 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "strinsert" was not found at "https://cdn.ckeditor.com/4.15.1/standard-all/plugins/strinsert/plugin.js?t=KA9B".
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager.<anonymous> (ckeditor.js:258)
    at n (ckeditor.js:253)
    at Array.v (ckeditor.js:254)
    at y (ckeditor.js:254)
    at HTMLScriptElement.CKEDITOR.env.ie.g.$.onerror (ckeditor.js:255)

请建议我如何在 ckeditor4-react 文本编辑器中添加“strinsert”自定义插件。