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
Preview of the CKEditor (customized) After adding the new plugin
Preview of the textarea when the new plugin button has been clicked
Just what I was looking for!
Next question: DO you know how to alter the skin altogether? I always used FCKeditor but that is no longer supported and IE9 messes it up. You had a great FamFamFam skin which I want to add to CKeditor. Can it be done?
Well since you asked that question about how to change the looks or the skin of CKEditor ,I managed to write a new blog just to explain how to do that.
Here is the link to the blog where i have mentioned 2 ways of changing the skin and other few attributes of CKEditor, Hope it helps 🙂
http://truelogic.org/wordpress/?p=402
or you could just go to the next blog which is the same 🙂
Do let me know if anything is hard to understand.
Hi!
Thanks it was very helpful!
If I want to just open a new page in a new browser window when clicking on the added button, what would be the code for plugin.js ?
Thanks!
Nevermind thanks I figured it out:
Just replaced your line above:
CKEDITOR.instances.txtDescrip.insertHtml(“”);
With:
window.open(‘http://www.google.com’);
Hehe… Well thanx for letting me know … sorry i couldn’t reply sooner because of the holiday season i was off the internet for the last couple of days.
Hope i can be of service to you in the future. 🙂
I followed this tutorial, the button is added, but the click on the button results just with nothing…
no image added
what to do?
Are you using the exact same code which I have given here … or did you change something according to your functionality ???
It would be a little easier for me to find out the problem if you could post the lines of code here 🙂 ?
sorry, I wrote everything, than the Captcha got wrong and all my text was gone.
so in short:
your example is not universal enough
you assume the text-area “txtDescrip” and use that for referring the function to insert the html
as my instance is defined as “post-content” (GetSimple CMS), this cannot work
please help out with a more universal integration
by the way, there is a missing apostrophe in the second toolbar-example above
Cheers, Connie
and when I change to the name of my instance, the script goes into endless…
I changed the name and path of the image which should be included to load it from my server, but that did not stop the script as well
so in the moment I am unsuccessful
By the instance you mean the button which has to be created (in this case insert_image) and the icon image used to display in the toolbar …right?
no, i mean that:
the textarea has the name “content-post”
the editor by this does “var editor = CKEDITOR.replace( ‘content-post’, …)
so I had to use in plugin.js:
… CKEDITOR.instances.content-post.insertHtml(“<img …
and I changed the URL of the image which was to insert into HTML to an URL "at my server" as cross-domain-include is not always allowed, now the code is:
(function(){
var a= {
exec:function(editor){
CKEDITOR.instances.post-content.insertHtml("”);
}
},
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
command:b
});
}
});
})();
Cheers, Connie
the saving of the post eliminated the URL of the insertHTML…
You should try and change the name of the plugin from “content-post” to “content_post” or “contentPost” because i don’t think CKEditor takes or allows hyphen in the ID name of the instance / plugin.
Thanx a lot for the feedback … i have made certain changes based on your suggestions. I hope it makes it a little easier to understand now.
no, the ID is used by GetSimpleCMS some time now and it works
I cannot change it as am just a user of that CMS
hmmmm…well that can create a problem because i tried using the same name “content-post” and its said that it does not recognise it properly so i tried changing it to other options which i have mentioned before and it worked fine 🙂
And even after that i searched for other options to make it work , so i found that CKEditor does not support hyphens(-) in the ID names 🙁
well, I got success:
change this
“CKEDITOR.instances.post-content.insertHtml(…)”
to this
“editor.insertHtml(….) ”
it works in Firefox 3.6.16, will test with other browsers
cool…and thanx for sharing with me as well :). I hope it works smoothly from here on.
Hi,
I am Usha Iyer, an Acquisition Editor with Packt Publishing. As an Acquisition Editor, it is my role to evaluate, develop and ultimately bring book ideas to publication. I am also responsible for finding the right author for any book; bringing them onboard, then working with them as the book is written.
I have begun to develop a microcontent ( microcontent title meaning just 60 pages long ) title on ‘CKEditor’, and am now looking for an author to write this book.
Please contact me if you are interested in writing this book and I would love to discuss the opportunity with you further.
Even if you do not want to involve yourself in the project, can you please suggest someone who may suit this project?
Thanks,
Usha
Email: ushai@packtpub.com