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";

};

 

结果如下图：