*更新

Question

我正在使用CKEditor的4.7版本，这是实际时刻的最后一个版本。我的问题是我尝试添加一个新的自定义插件，但无法在工具栏中看到它，并且无法找出我的基本abbr（缩写）示例中的错误。这是我的`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的答案，我做了所有更正，问题在于调用＆gt;我在配置中做了

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

湾在config.js内，您应该使用config.allowedContent = true;而不是allowedContent: true;。但我必须强调，禁用ACF，特别是如果不要求任何内容可以输入编辑器，则不建议这样做，并且配置它会好得多。请参阅：https://docs.ckeditor.com/#!/guide/dev_acf以及相关链接。

无法向CKEditor添加自定义插件

*更新

1 个答案: