添加自定義樣式按鈕的CKEditor

Question

CKEditor的，您可以通過編輯文件styles.js添加自定義樣式的樣式組合框（見What is a good javascript HTML editor for adding custom HTML elements?瞭解詳細信息）

我想唯一的按鈕添加到工具欄應用我的自定義樣式，而不是用戶必須從樣式組合中選擇它們。

如何將自定義按鈕添加到CKEditor工具欄？

Answer 1

來吧用下面的代碼：

// Your custom style. 
var myStyle = new CKEDITOR.style({ 
    element: 'span', 
    attributes: { 
     'data-foo': 'bar', 
     'class': 'myClass' 
    }, 
    styles: { 
     color: 'red' 
    } 
}); 

CKEDITOR.replace('editor1', { 
    on: { 
     // Register command and button along with other plugins. 
     pluginsLoaded: function() { 
      var editor = this; 

      // Registers a command that applies the style. 
      // Note: it automatically adds Advanced Content Filter rules. 
      this.addCommand('myStyle', new CKEDITOR.styleCommand(myStyle)); 

      // Add toolbar button for this command. 
      this.ui.addButton && this.ui.addButton('myStyleButton', { 
       label: 'My style', 
       command: 'myStyle', 
       toolbar: 'insert,10' 
       // You may want to set some icon here. 
       // icon: 'someIcon' 
      }); 
     } 
    } 
});