CKEditor: Plugin And Toolbar Button For PRE, CODE, H1, H2, H3, H4, H5, H6, DIV, P Style Formatting

Hi all.

This small howto help you to create a plugin for CKEditor 3.4 and add a new toolbar button for p, h1, h2, h3, h4, h5, h6, pre, address and div style formatting.

1. Directory structure:

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

2. Create 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
   });
  }
 });
})();

3. Download a button-pre.png: .

4. Register the plugin and add a toolbar button. Modify 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";
};

P.S. You can change pre with code, h1, h2, h3, h4, h5, h6, address, div and p tags.
P.P.S. This plugin also work with the code tag pretty good.