无法将自定义插件添加到 CKEditor

Question

我正在使用 CKEditor 的 4.7 版本，实际是最后一个版本。 我的问题是我尝试添加一个新的自定义插件，但在工具栏中看不到它，也无法在我的缩写（缩写）的基本示例中找出问题所在。 这是我的`config.js

  CKEDITOR.editorConfig = function( config ) {
            config.extraPlugins = 'abbr,insertpre,image',
            config.language = 'en';
            config.uiColor = '#9FCDFF';
            config.height = 300;
            allowedContent: true;
            config.toolbar = 'Custom',
            config.toolbar_Custom =  [
                { name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },
                { name: 'editing', items: [ 'Find', 'Replace' ] },
                /*here go more options which are 
                by default and I can delete or display them with no problem*/
            ];
        };

在名为 abbr 的插件文件夹中，我有文件 plugin.js 和下一个配置：

CKEDITOR.plugins.add( 'abbr', {
// Register the icons.
icons: 'abbr',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
    // Define an editor command that opens our dialog window.
    editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
    // Create a toolbar button that executes the above command.
    editor.ui.addButton( 'Abbr', {
        // The text part of the button (if available) and the tooltip.
        label: 'Insert Abbreviation',
        // The command to execute on click.
        command: 'abbr',
        // The button placement in the toolbar (toolbar group name).
        toolbar: 'insert'
    });
    if ( editor.contextMenu ) {
        // Add a context menu group with the Edit Abbreviation item.
        editor.addMenuGroup( 'abbrGroup' );
        editor.addMenuItem( 'abbrItem', {
            label: 'Edit Abbreviation',
            icon: this.path + 'icons/abbr.png',
            command: 'abbr',
            group: 'abbrGroup'
        });
        editor.contextMenu.addListener( function( element ) {
            if ( element.getAscendant( 'abbr', true ) ) {
                return { abbrItem: CKEDITOR.TRISTATE_OFF };
            }
        });
    }
        // Register our dialog file -- this.path is the plugin folder path.
        CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
    }
});

我也有abbr.js 对话框必须弹出的地方

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
    return {
        // Basic properties of the dialog window: title, minimum size.
        title: 'Abbreviation Properties',
        minWidth: 400,
        minHeight: 200,
        // Dialog window content definition.
        contents: [{
         /*here go the logic of pop up functions*/
        }];
});

然后我用下一种方式在我的视图文件中调用编辑器

<script src="<?= base_url('../ckeditor/ckeditor.js') ?>"></script>
<textarea id="editor1" class="ckeditor" name="editor"></textarea> 

我真的不明白我做错了什么，因为我看不到按钮。 我对不同的插件有类似的代码，我尝试添加相同的想法。 我还清除缓存并在每次更改后使用 Ctrl+F5。插件文件夹的结构是标准的，在主文件夹中有plugin.js，其余的按照标准结构。我用于测试的图像也是从其他现有插件中移出的，因为我发现它也可能是一个问题。
*注意自定义插件的按钮在面板上以任何形式都不可见，所以不是图像

*更新

根据@j.swiderski 的回答，我做了所有更正，问题出在调用方式上> 我在配置中做的类似

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },

但现在我这样称呼它

 { name: 'abbr', items: [ 'Abbr'] },

希望能帮助别人。

Answer 1

主要问题是按钮名称应该与插件中定义的一样写。在插件内部（实际上所有核心编辑器插件都遵循此约定）按钮名称为大写，因此在您的配置工具栏中，缩写插件应定义为

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'Abbr'] },//Notice the uppercase

而不是像

{ name: 'abbr', groups: [ 'abbrGroup' ], items: [ 'abbr'] },

---

除了主要问题之外，您的 config.js 文件中几乎没有语法问题：

一个。下面应该以分号而不是逗号结尾

config.extraPlugins = 'abbr,insertpre,image';
config.toolbar = 'Custom';

b.在config.js 中，您应该使用config.allowedContent = true; 而不是allowedContent: true;。 但是我必须强调的是，不建议禁用 ACF，尤其是在不要求任何内容可以进入编辑器的情况下，最好配置它。请参阅：https://docs.ckeditor.com/#!/guide/dev_acf 以及相关链接。