Javascript Can'；t向CKEditor添加自定义插件

我使用的是4.7版的CKEditor，这是实际时刻的最后一个版本。 我的问题是，我试图添加一个新的自定义插件，但在工具栏中看不到它，也找不到我的基本示例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文件夹中，我有一个文件

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> 

但现在我这样称呼它

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

---

希望能帮助别人

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

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

而不是

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

---

除了主要问题外，

config.js

文件中还有一些语法问题：

a。下面应该以分号结尾，而不是逗号

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

b。在

config.js

中，您应该使用

config.allowedContent=true而不是
允许的内容：true。
但我必须强调，禁用ACF是不推荐的，尤其是在不要求任何内容都可以输入编辑器的情况下，最好配置它。请参阅：以及相关链接
 你的回答让我头脑清醒了一点，但仍然不起作用，这是我第一次接触core.js，所以我很难理解互连。你能打开浏览器开发工具（Chrome中的F12）切换到控制台并告诉我你遇到了什么错误吗？作为测试，请尝试注释自定义工具栏的两个设置。按钮定义中的abbr插件有工具栏：“插入”这意味着，如果您将其添加到extraPlugins中，它将自动显示在工具栏中。我以前在
plugin.js
中进行过插入配置，并且一直在控制台中没有错误。我可以看到答案被标记为已接受。这是否意味着你已经设法解决了你的问题？如果没有，你能简单地下载CKEditor完整的软件包，下载abbr插件，把它放在plugins文件夹和config.js add
config.extraPlugins='abbr'
中吗。这应该足够运行插件了，因为工具栏配置已经在里面了。我在把问题放在这里之前这么做了，我的问题是我不能显示abbr（或我的插件）的按钮，我现在用这个例子来完成我的自定义插件功能。我需要很多帮助。
config.extraPlugins = 'abbr,insertpre,image';
config.toolbar = 'Custom';