#38 Combo plugin

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 your_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.

[Anonymous]

contains an updated copy of this post

[Anonymous]

Logged In: YES
user_id=787534

FCKeditor 2.3b introduced an 'command name' error with this
plugin which is easily fixed.

Please download the latest version of the plugin
(combo_plugin_20060527.txt) and notice the following line in
this file will fix this problem:
this.CommandName = 'mycombocommand';

[idealyo]

Logged In: YES
user_id=1550423

FCKMyCombo_command.prototype.Execute = function(itemText,
itemLabel) {
if (itemText != "")
FCK.InsertHtml(itemLabel);
}

When i want to add the label, it's not add it but add
[object HTMLDivElement] in the textarea.

Please can you tell me why

Thanks a lot

[OTB]

Logged In: YES
user_id=1022871

I have an IE crash problem with this code :
- i click once on the drop down
- then i click far away the drop down (outside)
- an IE (6.0) crash occur. (nothing on firefox : OK)

Can you help me ?
Thanks a lot.

Here is the code i used, it is exactely the code you have
posted :

fckplugin.js :
--------------

var FCKMyCombo_command = function(name) {
this.Name = name ;
}

// Un item est selectionné
FCKMyCombo_command.prototype.Execute = function(itemText,
itemLabel) {
if (itemText != "") {
FCK.InsertHtml(itemText);
}
}

this.FCKMyCombo_command.prototype.GetState = function() {
return ; }
FCKCommands.RegisterCommand( 'FormuleVariables' , new
FCKMyCombo_command('any_name') ) ;

// creation de la combo
var FCKToolbarMyCombo = function(tooltip,style) {
this.Command = FCKCommands.GetCommand
('FormuleVariables');
this.CommandName = 'mycombocommand';
this.Label = this.GetLabel();
this.Tooltip = tooltip?
tooltip:this.Label; //Doesn't seem to work
this.Style = style;
};

FCKToolbarMyCombo.prototype = new FCKToolbarSpecialCombo;

// Nom du libelle de la combo
FCKToolbarMyCombo.prototype.GetLabel = function(){
return FCKLang.Variables;
};

// Ajout des elements a la liste
FCKToolbarMyCombo.prototype.CreateItems = function(A) {
// utilisation de la variable JS
externe : 'FCKConfig.VARIABLES'
for (var i = 0; i< FCKConfig.VARIABLES.length; i++)
{
this._Combo.AddItem(FCKConfig.VARIABLES[i],
FCKConfig.VARIABLES[i]);
}
}

//Register the combo with the FCKEditor
FCKToolbarItems.RegisterItem( 'FormuleVariables' , new
FCKToolbarMyCombo( 'My Combo',
FCK_TOOLBARITEM_ICONTEXT) ) ;

[Anonymous]

Logged In: YES
user_id=787534

I've tried clicking 'far away' using my own implementation
but was not able to reproduce your problem.

Firstly, I should mention that I do not fully understand the
FCK command/registercommand API, so my suggestions are only
that, suggestions.

Looking at your code I see you have used various names for
your command. I would suggest using the same name:

//FCKCommands.RegisterCommand( 'FormuleVariables' , new
FCKMyCombo_command('any_name') ) ;
FCKCommands.RegisterCommand( 'FormuleVariables' , new
FCKMyCombo_command('FormuleVariables') ) ;

//this.CommandName = 'mycombocommand';
this.CommandName = 'FormuleVariables';

//FCKToolbarItems.RegisterItem( 'FormuleVariables' , new
FCKToolbarMyCombo( 'My Combo', FCK_TOOLBARITEM_ICONTEXT) ) ;
FCKToolbarItems.RegisterItem( 'FormuleVariables', new
FCKToolbarMyCombo( 'FormuleVariables',
FCK_TOOLBARITEM_ICONTEXT));

I use the same name and it works for me. Please let me know
how you progress.

[OTB]

Logged In: YES
user_id=1022871

Thanks for your swiftness.

I fact it seems to be a cache problem, the problem occur
only when i refresh my page.

I will dig in this direction.
Thanks a lot.

[sand]

Logged In: YES
user_id=1490569

i get the following message

>>unknown toolbar button "mycombo"

i am relatively new to FCK Editor. i did not make any
changes to the code above. i just copy - pasted them to
check how it works.

can you please direct me in the right direction
thanks in advance

sandeep

[Anonymous]

Logged In: YES
user_id=787534

This is just a note to help if you are wanting to build the
combo with data from a database. It's pretty easy but I will
assume you know how to get the data and then to create a
javascript array from it.

At the top of your parent window you would have something
like this using your database values
<script type="text/javascript">
var arrComboItems = new Array(
new Array('Item 1 from mysql', '<span
style="text-decoration: underline;color: #0000FF;font-size:
9pt;">Label for Item 1</span>')
, new Array('Item 2 from mysql', '<span
style="text-decoration: underline;color: #0000FF;font-size:
9pt;">Label for Item 2</span>')
, new Array('Item 3 from mysql', '<span
style="text-decoration: underline;color: #0000FF;font-size:
9pt;">Label for Item 3</span>')
);
</script>

Then in the Combo plugin replace the
"this._Combo.AddItem(...)" lines with this:
try {
if (parent.arrComboItems != undefined) {
if (parent.arrComboItems.length == 0) {
this._Combo.AddItem('', '<span style="font-size: 9pt;">No
items available</span>');
} else {
for (var i = 0; i < parent.arrComboItems.length; i++)
this._Combo.AddItem(parent.arrComboItems[i][0],
parent.arrComboItems[i][1]);
}
} else {
this._Combo.AddItem('', '<span style="font-size: 9pt;">No
items available</span>');
}
} catch(err) {
this._Combo.AddItem('', '<span style="font-size: 9pt;">No
items available</span>');
}

[Anonymous]

How to add items to the combo from a database

[oxwebware]

Logged In: YES
user_id=1515639

sandeepseshadri, make sure that all you download the txt
file so that you do not get odd word wraps that break the
javascript

[Justin Wignall]

Logged In: YES
user_id=1045146
Originator: NO

For anyone using ASP.NET wanting to add combo items directly you can use code from file 'How to add items to the combo from a database' and then use 'RegisterArrayDeclaration' to build the javascript array

e.g. (VB.Net from a datatable DT)

Dim row As DataRow
For Each row In DT.Rows
Page.ClientScript.RegisterArrayDeclaration("arrComboItems", "new Array('" & row.Item("value") & "', '" & row.Item("name") & "')")
Next

Hope this helps.

[Maratanos]

Logged In: YES
user_id=2157649
Originator: NO

I wanted to add here that there's a slight tweak you'll probably want to do. In order to have the label you provide for each entry also appear in the box itself while selected (as opposed to the raw value), you need a third parameter to every single call of _Combo.AddItem. This can be taken from anywhere you want, and should be plaintext.