無法將自定義插件添加到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以及相關鏈接。