Here is a template you can use to create a toolbar plugin that uses a drop-down list (combo) to insert text/html into the textarea. It is similar in appearance to the Style/Font combo's
Disclaimer:
-I am not a FCKeditor guru, just a web developer who has managed to get this plugin working. I've included it here to give something back to the FCKeditor project in the hope it helps someone else.
-This works for me, I can't guarantee it will work for you. I have tested this on linux (FF 1.07 and 1.5) and WinXP (IE6 and FF 1.07 and 1.5).
Changes to your custom config.js file (or fckconfig.js)
===============
1. Add the following line
FCKConfig.Plugins.Add( 'mycombo' ) ;
2. Add the 'mycombo' item to your toolbarset. Eg:
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About'], ['mycombo']
] ;
Create the plugin
===============
1. Create the directory 'mycombo'
mkdir you_path_to/FCKeditor/editor/plugins/mycombo
2. Create a file called fckplugin.js in this directory with this:
//********START********
/*
1st, define the 'command' to execute when an item from the list is selected - ie, insert the text.
*/
var FCKMyCombo_command = function(name) {
/*
The 'name' parameter doesn't do anything. You could define above using:
a) var FCKMyCombo_command = function() {
or
b) var FCKMyCombo_command = function(name, var1, var2, var3) {
or
c) what ever you like
Just remember to reflect this at the 'FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name') ) ;' line below.
EG:
a) FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command() ) ;
b) FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name', 'var1', 'var2', 'var3') ) ;
c) what ever you like
*/
this.Name = name ;
}
//This get's executed when an item from the combo list gets selected
FCKMyCombo_command.prototype.Execute = function(itemText, itemLabel) {
if (itemText != "")
FCK.InsertHtml(itemText);
}
//was getting GetState is not a function (or similar) errors, so added this.
FCKMyCombo_command.prototype.GetState = function() {
return;
}
FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name') ) ;
/*
2nd, create the Combo object
*/
var FCKToolbarMyCombo=function(tooltip,style){
this.Command=FCKCommands.GetCommand('mycombocommand');//the command to execute when an item is selected
this.Label=this.GetLabel();
this.Tooltip=tooltip?tooltip:this.Label; //Doesn't seem to work
this.Style=style; //FCK_TOOLBARITEM_ICONTEXT OR FCK_TOOLBARITEM_ONLYTEXT
};
FCKToolbarMyCombo.prototype=new FCKToolbarSpecialCombo;
//Label to appear in the FCK toolbar
FCKToolbarMyCombo.prototype.GetLabel=function(){
return "My Combo";
};
//Add the items to the combo list
FCKToolbarMyCombo.prototype.CreateItems=function(A){
//this._Combo.AddItem(itemText, itemLabel); //see FCKMyCombo_command.prototype.Execute = function(itemText, itemLabel) above
this._Combo.AddItem('Item 1 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 1</span>');
this._Combo.AddItem('Item 2 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 2</span>');
this._Combo.AddItem('Item 3 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 3</span>');
}
//Register the combo with the FCKEditor
FCKToolbarItems.RegisterItem( 'mycombo' , new FCKToolbarMyCombo( 'My Combo', FCK_TOOLBARITEM_ICONTEXT ) ) ; //or FCK_TOOLBARITEM_ONLYTEXT
//********END********
That's it. You may need to clear your browser's cache, then simply refresh. Any comments and suggestions for improvement are welcomed.
Disclaimer:
-I am not a FCKeditor guru, just a web developer who has managed to get this plugin working. I've included it here to give something back to the FCKeditor project in the hope it helps someone else.
-This works for me, I can't guarantee it will work for you. I have tested this on linux (FF 1.07 and 1.5) and WinXP (IE6 and FF 1.07 and 1.5).
Changes to your custom config.js file (or fckconfig.js)
===============
1. Add the following line
FCKConfig.Plugins.Add( 'mycombo' ) ;
2. Add the 'mycombo' item to your toolbarset. Eg:
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About'], ['mycombo']
] ;
Create the plugin
===============
1. Create the directory 'mycombo'
mkdir you_path_to/FCKeditor/editor/plugins/mycombo
2. Create a file called fckplugin.js in this directory with this:
//********START********
/*
1st, define the 'command' to execute when an item from the list is selected - ie, insert the text.
*/
var FCKMyCombo_command = function(name) {
/*
The 'name' parameter doesn't do anything. You could define above using:
a) var FCKMyCombo_command = function() {
or
b) var FCKMyCombo_command = function(name, var1, var2, var3) {
or
c) what ever you like
Just remember to reflect this at the 'FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name') ) ;' line below.
EG:
a) FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command() ) ;
b) FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name', 'var1', 'var2', 'var3') ) ;
c) what ever you like
*/
this.Name = name ;
}
//This get's executed when an item from the combo list gets selected
FCKMyCombo_command.prototype.Execute = function(itemText, itemLabel) {
if (itemText != "")
FCK.InsertHtml(itemText);
}
//was getting GetState is not a function (or similar) errors, so added this.
FCKMyCombo_command.prototype.GetState = function() {
return;
}
FCKCommands.RegisterCommand( 'mycombocommand' , new FCKMyCombo_command('any_name') ) ;
/*
2nd, create the Combo object
*/
var FCKToolbarMyCombo=function(tooltip,style){
this.Command=FCKCommands.GetCommand('mycombocommand');//the command to execute when an item is selected
this.Label=this.GetLabel();
this.Tooltip=tooltip?tooltip:this.Label; //Doesn't seem to work
this.Style=style; //FCK_TOOLBARITEM_ICONTEXT OR FCK_TOOLBARITEM_ONLYTEXT
};
FCKToolbarMyCombo.prototype=new FCKToolbarSpecialCombo;
//Label to appear in the FCK toolbar
FCKToolbarMyCombo.prototype.GetLabel=function(){
return "My Combo";
};
//Add the items to the combo list
FCKToolbarMyCombo.prototype.CreateItems=function(A){
//this._Combo.AddItem(itemText, itemLabel); //see FCKMyCombo_command.prototype.Execute = function(itemText, itemLabel) above
this._Combo.AddItem('Item 1 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 1</span>');
this._Combo.AddItem('Item 2 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 2</span>');
this._Combo.AddItem('Item 3 text to insert', '<span style="color:#000000;font-weight: normal; font-size: 10pt;">Item 3</span>');
}
//Register the combo with the FCKEditor
FCKToolbarItems.RegisterItem( 'mycombo' , new FCKToolbarMyCombo( 'My Combo', FCK_TOOLBARITEM_ICONTEXT ) ) ; //or FCK_TOOLBARITEM_ONLYTEXT
//********END********
That's it. You may need to clear your browser's cache, then simply refresh. Any comments and suggestions for improvement are welcomed.
RE: HOW-TO: combo plugin
I'd never noticed the plugin section before.
I've added it as you suggested. See http://sourceforge.net/tracker/index.ph ... tid=737639
RE: HOW-TO: combo plugin
I think that it would be nice if you could add this to the Wiki or to the plugins section as an example to avoid being forgotten as time passes.
RE: HOW-TO: combo plugin
is there a site you can show me where it is working?
to get the feel of what you did?
I do not know what I am doing, but I am wanting to creat a drop down list of links so when I highlight a word, and pick a line from the dropdown, it will wrap the codes around the word forming a link..
doable?
RE: HOW-TO: combo plugin
What you are trying to do certainly sounds 'doable', I've not tried working with selected/highlighted text yet but that would definitely be a good idea. At the moment I just insert the whole <a>the text</a> from the combo plugin and then edit 'the text', so if you can get this working your way it'd be great to see you javascript posted here too.
Regards,
Marcus
RE: HOW-TO: combo plugin