FCKeditor is 2.5 out of the door!

The version 2.5 of FCKeditor has been released, go and get it!

This release brings the new Style system that allows to control exactly how the formatting should be applied to the content, making it possible to get rid of <font> tags if you can't stand them

There have been lots of fixes and improvements, another special thing about this milestone is that finally Opera and Safari are officially supported. There are still some caveats, but fortunately they will be fixed sooner than later.

In order to use Safari you must use the latest 3.x version (it's already included in 10.4.11 and Leopard), for Opera you need to use a 9.5 beta, but unfortunately the latest version available right now has a regression that doesn't allow any script to run inside an editable element, so you need to use a previous version (prior to 9656 IIRC) or wait a little until they release a new version without this bug.

If you are upgrading from a previous version, take your time, read the release notes, including all the 2.5beta changes, as noted in the Upgrade guide all the connectors have been changed they should be easier to use and with greater flexibility, but you must take the time to adjust them to your needs

We all the people that contribute to FCKeditor hope that you enjoy this version and remember that there are more goodies planned for the future

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.

IRC channel for FCKeditor development

Frederico has announced that those interested in the development of FCKeditor can join the #fckeditor channel at irc.freenode.net, it will be an interesting experiment to check if it does bring more interactivity and eases the communication (sometimes it's good to have a live chat instead of talking through a ticket).

Don't be misleaded, that channel is aimed at development, not support. If you have some question about how to use FCKeditor you should start checking the wiki and then the FCKeditor support forums. Probably you can find all the info that you need without asking anybody and much mode details

Built-in plugins in FCKeditor

It's a good idea to know what is available in your downloaded files before searching for that functionality elsewhere, so I'm gonna do a quick review of the plugins available for the FCKeditor 2.5 version.

Go to the 'editor/plugins' folder and you'll see some folders, each one is a plugin:

• autogrow
• bbcode
• dragresizetable
• placeholder
• simplecommands
• tablecommands

Besides those ones, you cand find as an extra bonus two other plugins under '_samples/_plugins':

• findreplace
• samples

Let's review quickly each one of them.

autogrow

I've already mentioned this plugin in my introductory article about plugins. It does allow the editing area to grow automatically until it reaches the maximum height.

bbcode

This plugin shows how to use one of the new features of the 2.5 series, the ' Data Processor'. To test it load the 'editor/plugins/bbcode/_sample/_sample.html' file.

As you can see, instead of HTML now the editor generates BBCode when you switch to source mode, or when the data is posted back to the server. The BBCode support is quite limited, after all it's an example for the moment, but it could be further developed like the integration with WikiMedia and give the users a full WYSIWYG environment that does generate BBCode with no HTML at all.

dragresizetable

This plugin is another new element for 2.5, it does allow the user to resize table columns with the mouse, just like in MS Word. Due to its size it hasn't been included in the core files, but it's a very nice add-on.

To use it you just need to load the plugin, it doesn't add any button, it will be available as soon as you add a table and try to resize one of its columns:FCKConfig.Plugins.Add( 'dragresizetable' ) ;

placeholder

I did mention it also in the introductory article, it allows the user to insert 'placeholders' in the text that they are editing. It's a very interesting plugin to analyze and study because you can fine-tune it to match your needs (for example change the dialog to show a [select]) (wow, this blogger post editor is wonderful, it doesn't know how to switch between > and &gt; and so it can DESTROY all your content)

I'll try to finish this entry, but it's quite ugly having to use just the plain HTML editing instead of being able to use a decent WYSIWYG editor like a trimmed down FCKeditor here

simplecommands

This plugin shows how to create new versions of the existing ones, in this case it removes the text besides the 'source' button and the dropdown previews. This is the source of the plugin: FCKToolbarItems.RegisterItem( 'SourceSimple' , new FCKToolbarButton( 'Source', FCKLang.Source, null, FCK_TOOLBARITEM_ONLYICON, true, true, 1 ) ) ; FCKToolbarItems.RegisterItem( 'StyleSimple' , new FCKToolbarStyleCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontNameSimple' , new FCKToolbarFontsCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontSizeSimple' , new FCKToolbarFontSizeCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontFormatSimple', new FCKToolbarFontFormatCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; As you can see, it creates new ToolbarItems based on the existing buttons or combos

To use it you must add the plugin FCKConfig.Plugins.Add( 'simplecommands' ) ; and then replace your buttons in the toolbar with the new versions.

Another approach would be to create the new items reusing the existing names, that way you don't have to modify the toolbar, it will just work after loading the plugin FCKToolbarItems.RegisterItem( 'Source' , new FCKToolbarButton( 'Source', FCKLang.Source, null, FCK_TOOLBARITEM_ONLYICON, true, true, 1 ) ) ; FCKToolbarItems.RegisterItem( 'Style' , new FCKToolbarStyleCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontName' , new FCKToolbarFontsCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontSize' , new FCKToolbarFontSizeCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ; FCKToolbarItems.RegisterItem( 'FontFormat', new FCKToolbarFontFormatCombo( null, FCK_TOOLBARITEM_ONLYTEXT ) ) ;

This plugin can be tested with the javascript sample 06

tablecommands

This one is very similar to the 'simplecommands', it does create toolbar buttons that you can use based on the table commands that usually are available only on the context menu. This is the code: FCKToolbarItems.RegisterItem( 'TableInsertRowAfter' , new FCKToolbarButton( 'TableInsertRowAfter' , FCKLang.InsertRowAfter, null, null, null, true, 62 ) ) ; FCKToolbarItems.RegisterItem( 'TableDeleteRows' , new FCKToolbarButton( 'TableDeleteRows' , FCKLang.DeleteRows, null, null, null, true, 63 ) ) ; FCKToolbarItems.RegisterItem( 'TableInsertColumnAfter' , new FCKToolbarButton( 'TableInsertColumnAfter' , FCKLang.InsertColumnAfter, null, null, null, true, 64 ) ) ; FCKToolbarItems.RegisterItem( 'TableDeleteColumns' , new FCKToolbarButton( 'TableDeleteColumns', FCKLang.DeleteColumns, null, null, null, true, 65 ) ) ; FCKToolbarItems.RegisterItem( 'TableInsertCellAfter' , new FCKToolbarButton( 'TableInsertCellAfter' , FCKLang.InsertCellAfter, null, null, null, true, 58 ) ) ; FCKToolbarItems.RegisterItem( 'TableDeleteCells' , new FCKToolbarButton( 'TableDeleteCells' , FCKLang.DeleteCells, null, null, null, true, 59 ) ) ; FCKToolbarItems.RegisterItem( 'TableMergeCells' , new FCKToolbarButton( 'TableMergeCells' , FCKLang.MergeCells, null, null, null, true, 60 ) ) ; FCKToolbarItems.RegisterItem( 'TableHorizontalSplitCell' , new FCKToolbarButton( 'TableHorizontalSplitCell' , FCKLang.SplitCell, null, null, null, true, 61 ) ) ; FCKToolbarItems.RegisterItem( 'TableCellProp' , new FCKToolbarButton( 'TableCellProp' , FCKLang.CellProperties, null, null, null, true, 57 ) ) ;

This plugin can be tested with the javascript sample 06

findreplace

This sample plugin shows how to create some commands that popup a dialog and interact with the page

This plugin can be tested with the javascript sample 06

samples

There are two parts in this plugin, the first one creates a new 'Style' dropdown with modified width // Here we define our custom Style combo, with custom widths. var oMyBigStyleCombo = new FCKToolbarStyleCombo() ; oMyBigStyleCombo.FieldWidth = 250 ; oMyBigStyleCombo.PanelWidth = 300 ; FCKToolbarItems.RegisterItem( 'My_BigStyle', oMyBigStyleCombo ) ;

The second part shows how to add a context menu item for the images so they are opened in a new window

This plugin can be tested with the javascript sample 06

Plugins and FCKeditor (1-Introduction)

I'm gonna try to explain how to create and use plugins with FCKeditor.

What's a plugin

The first step would be to understand what is a plugin with regards to FCKeditor. A plugin is basically a javascript file that it's loaded alongside the main FCKeditor code, so you can extend or change some functionality without the need to change the core files. This way you can keep new functionality separated from the main code and upgrades are easier.

With a plugin you can add a new button to the toolbar, new comboboxes, change the interface somehow or even apparently don't do anything, just add some JS code

Every plugin will be based on a directory, and that directory must have a file named fckplugin.js, by default the directory must be placed under the 'editor/plugins/' folder (there are several ones in the default install, go and check them, they can provide lots of info as they are working plugins with all the code, you just need to add them to your editor)

How to add some plugins

To add a plugin to your editor you just need to specify the folder name in your config. By default you can find a commented line that shows how to load the autogrow plugin: // FCKConfig.Plugins.Add( 'autogrow' ) ; remove the comments(//), clear the cache of your browser and reload the editor. Now it should grow automatically as you enter more content until it reach the FCKConfig.AutoGrowMax limit.

Usually you want to add new buttons to the toolbar, in that case you need two steps to add the plugin.

The first one is to load the plugin, this time the PlaceHolder FCKConfig.Plugins.Add( 'placeholder', 'en,it,de,fr' ) ; As we can see here, a plugin can have different languages available. In that case the function must be called first with the name of the folder, and then a comma separated string of the languages available (each one is a .js file under the /lang/ folder of that plugin), the editor will try to load the one that matches the user language or the English one by default.

The second step to add the button is to add the command provided by the plugin to the toolbar that you want to use. The name of the command doesn't have to match the folder, and a plugin can contain more than a single command.

In this case we can modify the toolbar this way: FCKConfig.ToolbarSets["Default"] = [ ['Placeholder', 'Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], '/', ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], '/', ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ;

Now do the same routine: save, clear the cache and reload the editor. If you see the new button as the first item, then everything is fine. If you have an error "Unknown toolbar item 'Placeholder'", then it means that you have written something wron:

1. Check the case it must match the folder name to load the plugin and the command name to add it to the toolbar.
2. Check that the placeholder folder is under your plugins folder.
3. Try to check the server logs to verify that the placeholder/fckplugin.js file is correctly loaded (you can also check it with Firebug under the Net tab, or with Fiddler)

Now you have your new button in FCKeditor. You can use the Placeholder command just like the rest of commands, and from that code you can try to create your own ones.

Further reading: Analysis of a plugin at FCKeditor's wiki, repository of FCKeditor's plugins at Sourceforge.

Another blog has born

Finally I've started a blog, I don't know if I'll keep posting on it for long or if I'll get bored and then I'll forget about it, but let's try it and see the outcome.