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

转载请注明:敏捷学院-技巧资源库原文链接:http://dev.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";
};

成果如下图：