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";
};
Result:
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.
