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
- 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 > 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
No comments:
Post a Comment