Pages

2007/11/29

How to modify an existing button in FCKeditor

That button in the toolbar, yes that one that you have been told to put some text at its side so the users can find it easier, how to do it?

If you have read the previous entries you might realize that it's quite easy, the simplecommands shows how to change the appearance of some buttons, and as I have described, it isn't necessary to change the name, you can reuse the existing one so the toolbar will keep on working automatically

The only problem is finding out the exact parameters to re-create the button. Ok, let's modify the 'Image' to show the text at its side. So go to 'editor/_source/internals/fcktoolbaritems.js', this file contains all the default buttons so we can get something useful with very little job, search for 'Image' and you'll find
case 'Image' : oItem = new FCKToolbarButton( 'Image' , FCKLang.InsertImageLbl, FCKLang.InsertImage, null, false, true, 37 ) ; break ;
...
that looks like the code that we need!

In our plugin now we just have to add this code
FCKToolbarItems.RegisterItem( 'Image' , new FCKToolbarButton( 'Image', FCKLang.InsertImageLbl, FCKLang.InsertImage, FCK_TOOLBARITEM_ICONTEXT, false, true, 37 ) ) ;
(we take the call to FCKToolbarButton from the core code and change the style parameter from null to FCK_TOOLBARITEM_ICONTEXT, and then register the newly created button)
and now repeat the rite: save, clear cache, reload editor and we have finished.