添加自定义样式按钮的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' 
      }); 
     } 
    } 
});