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

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回答我提出的所有修正UPDATE

所以不形象，问题是在打电话的方式>我的配置是做像

{ 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文件中几乎没有语法问题：

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

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

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