Hey there, here is something which I learned the hard way while I was trying out my hands on customizing CKEdior for a website, in which I needed to add a new button which enabled the admin to add a particular kind of text or HTML tag in the textarea.
So therefore I thought I would share my experience through a simple step by step process of how I managed to achieve the customized feature of adding a new plugin (new button) in the CKEditor toolbar.
Well I just made a button which when clicked will add an image (in this case Truelogic.org Logo) in the textarea content.
Step 1: The basic directory structure of the CKEditor 3.3
( DO KEEP IN MIND THE VERSION OF THE CKEditor BEING USED HERE, DIFFERENT VERSIONS MAY HAVE DIFFERENT FOLDER/DIRECTORY STRUCTURE )
ckeditor/
config.js
plugins/
insert_image/
insert_image_button.png
plugin.js
Step 2: Now, as you may have an idea after seeing the folder structure that you have to create a new folder called “insert_image”, inside the plugins folder.
( IMPORTANT: Folder name is very important because the config.js recognizes the function of the plugin based on the folder name given )
Now the code which you have to paste after creating the “plugin.js” inside the “insert_image” folder is given below , this plugin code allows you to insert a predefined image inside the textarea (in this case Truelogic.org Logo)
(function(){
//The Code is written here, which will be executed when the button is clicked
var a= {
exec:function(editor){
CKEDITOR.instances.txtDescrip.insertHtml("<img src='http://truelogic.org/simple/images/true.png' border=0 />");
//CKEDITOR.instances.ID OF THE TEXTAREA.insertHtml("IMAGE URL");
//above line inserts an IMG tag with the predefined url of the image which points to the truelogic logo
}
},
//The actual button is defined/created here and the associated code is linked with it
b='insert_image';
CKEDITOR.plugins.add(b,{
init:function(editor){
editor.addCommand(b,a); // associating the executable code with the button
editor.ui.addButton('insert_image',{
label:'Insert image',
icon: this.path + 'insert_image_button.png',
//defining the path of the icon image which will be displayed on the toolbar for this button
//easiest would be to have the icon image in the same folder as the plugin.js
command:b
});
}
});
})();
Step 3:
Here is the “insert_image_button.png” image to make things easier for you guys 
This image has to be put inside the “plugins/insert_image/” folder, next to the plugin.js
Step 4:
Here is the code which is going in the config.js:
CKEDITOR.editorConfig = function( config )
{
CKEDITOR.config.toolbar_Basic = [
['Source','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About'],
['insert_image'] //Button added to the toolbar
]
config.toolbar = 'Basic';
config.extraPlugins = "insert_image”; //registering the plugin
};
Tips:
If you don’t want to alter the default setup of the CKEditor toolbar or if you want to show or hide specific plugins on particular pages or just one page, you can do it by writing a few lines of code in the page where you want to make this happen.
For you to understand more clearly, let me give you an example, say I only want around 10 buttons to be displayed in the toolbar for a specific page called “test-editor.html”
<script type="text/javascript">
var editor = CKEDITOR.replace( 'txtDescrip', //var editor = CKEDITOR.replace( 'ID OF THE TEXTAREA',
{
toolbar : [
['Source','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
'/',
['insert_image']
]
});
</script>
Using the above code and pasting it in the page where you want to change the look of the toolbar (hide or display a few of the buttons) will allow the page to only show those buttons or plugins which are mentioned in the code
Just to make it even more easier , here is the full code of the “test-editor.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 strict//EN">
<html>
<head>
<title>Truelogic.org::TestEditor::CKEditor example </title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
// do keep in mind the include path of the CKEditor folder on the web server or the local server
</head>
<body>
<form name="" action="" method="">
<textarea id="txtDescrip" cols="20" rows="5"> </textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'txtDescrip', //var editor = CKEDITOR.replace( 'ID OF THE TEXTAREA',
{
toolbar : [
['Source','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About'],['insert_image'] ]
});
</script>
</form>
</body>
</html>
Small Hints:
‘/’,
- this allows you to add a line break in the middle of the toolbar so that whatever plugin is written after this is displayed in the next line of the toolbar
‘-’
- this allows you to add a small gap between the buttons.
Like for example: the gap between ‘strike-through’ button and the ‘SubScript’ button
Preview of the CKEditor (default) Before adding the new plugin
CKEditor - default toolbar
Preview of the CKEditor (customized) After adding the new plugin
CKEditor - customized toolbar with new plugin
Preview of the textarea when the new plugin button has been clicked
CKEditor - when insert_image button has been clicked
.
