CKEditor 插件开发：工具栏按钮快速入门

转自:http://mjxy.cn/a-CKEditor-plug-in-development-a-toolbar-button-Quick-Start.aspx

介绍
这是一个CKEditor3.4插件开发的简易教程，介绍如何为工具栏toolbar增加例如 p,h1,h2,h3,h4,h5,h6,pre,div的按钮。
 

目录结构
按如下目录结构创建文件夹和文件

ckeditor/
    config.js
    plugins/
        button-pre/
            button-pre.png
            plugin.js
 

plugin.js 插件配置脚本

(function(){
 var a= {
  exec:function(editor){
   var format = {
    element : "pre"
   };
   var style = new CKEDITOR.style(format);
   style.apply(editor.document);
  }
 },
 
 b="button-pre";
 CKEDITOR.plugins.add(b,{
  init:function(editor){
   editor.addCommand(b,a);
   editor.ui.addButton("button-pre",{
    label:"Button PRE",
    icon: this.path + "button-pre.png",
    command:b
   });
  }
 });
})();
 

下载Button图片  button-pre.png:

注册插件
修改config.js文件

CKEDITOR.editorConfig = function( config )
{
 CKEDITOR.config.toolbar_Basic = [['button-pre', 'Bold', 'Italic', 'Underline' ]];
 config.toolbar = 'Basic';
 config.startupOutlineBlocks = true;
 config.extraPlugins = "button-pre";
};
 

结果如下图：