javascript - 无法将自定义插件添加到 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*/
        }];
});

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

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

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

*更新

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

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

但现在我这样调用它

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

希望能帮助到别人。

Answer 1

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

{ 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';

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