« Recovered My Hacked Site
Using Asirra in ASP.Net MVC »

Creating Custom FCKeditor Combo Plugin

A simple demonstration on how to create custom FCKeditor combo plugin.

Introduction:

FCKeditor is a widely used html based text editor. In an earlier post I have shown how to integrate FCKeditor in ASP.Net. You can easily create and install custom plugin for FCKeditor.

Here I have prepared a custom month combo plugin. User can select month from January to December and insert the selected month into the editor.

Complete Scenario

Description:

Step 1:

Create a folder named “monthcombo” in “\editor\plugins” folder. Create a javascript file named “fckplugin.js” in the folder “monthcombo”. Now open the “fckplugin.js” file by any editor.

Step 2:

Inititalize the month combo as follows.

// Initialize the Month Combo
var monthCombo = function (name)
{
  this.Name = name;
}

Step 3:

Create function for executing the command.

// Execute the Command
monthCombo.prototype.Execute = function(itemText, itemLabel) 
{
    if (itemText != "")
        FCK.InsertHtml("<span>" + itemText + "</span>");
}

Step 4:

Create function for managing the plugin behavior.

// Manage the plugin behavior
monthCombo.prototype.GetState = function()
{
    return FCK_TRISTATE_OFF; // FCK_TRISTATE_OFF or  FCK_TRISTATE_ON
}

Step 5:

Register the month combo command.

// Register the command.
FCKCommands.RegisterCommand( 'MonthCombo' ,  new  monthCombo('Month Combo') ) ;

Step 6:

Create the toolbar button and set its prototype as follows.

// Create the toolbar button.
var monthComboToolbar = function(tooltip,  style)
{
    this.CommandName   = 'MonthCombo';
    this.Label         = this.GetLabel();
    this.Tooltip       = tooltip?  tooltip : this.Label;
    this.Style         = style;  //FCK_TOOLBARITEM_ICONTEXT OR FCK_TOOLBARITEM_ONLYTEXT
}
 
// Set the toolbar prototype.
monthComboToolbar.prototype = new  FCKToolbarSpecialCombo;

Step 7:

Create function for the label of the toolbar that is to be appeared on the toolbar.

// Label to appear in the FCK toolbar
monthComboToolbar.prototype.GetLabel  = function()
{
    return "Month Combo";
}

Step 8:

Add items to the combo list.

//Add the items to the combo list
monthComboToolbar.prototype.CreateItems  =  function(A)
{
    var months = Array("January", "February", "March",  "April",
                       "May", "June", "July",  "August",
                       "September", "October", "November",  "December");
 
    for (var i = 0; i < months.length; i++)
    {
        this._Combo.AddItem(months[i],  months[i]);
    }
}

Step 9:

Register the combo with the FCKeditor.

//Register the combo with the FCKeditor
FCKToolbarItems.RegisterItem('MonthCombo' , new monthComboToolbar( 'Month Combo', FCK_TOOLBARITEM_ICONTEXT ) ) ; // FCK_TOOLBARITEM_ONLYICON or FCK_TOOLBARITEM_ONLYTEXT  or  FCK_TOOLBARITEM_ICONTEXT

Step 10:

Save the “fckplugin.js”. We are near the end. Now open the “fckconfig.js” file located in the root directory. Add the month combo plugin as follows:

//Add Month Combo Plugin
FCKConfig.Plugins.Add( 'monthcombo' );

Step 11:

Finally, add this combo [‘MonthCombo’] to FCKConfig.ToolbarSets["Default"] or FCKConfig.ToolbarSets["Basic"] settings as follows.

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About', 'MonthCombo']
] ;

Reference:

Creating & Installing a Plugin in FCKeditor

Conclusion:

Download the plugin here. MonthCombo

convert this post to pdf.
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Reddit
  • Simpy
  • StumbleUpon
  • DotNetKicks
  • DZone
  • Furl
  • email
  • TwitThis

Tags: , , ,

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

This entry was posted on Tuesday, November 25th, 2008 at 11:02 pm and is filed under FCKeditor, General, Javascript, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “Creating Custom FCKeditor Combo Plugin”


  1. fantastic tool
    easy to integrate and expand myself

    thank you very much
    building a better world together…

    Steven


  2. i notice on the Execute function

    the itemLabel returns the value object instead of the text from the dropdown.

    how do you reference this to return the text?


  3. btw, my drop down has 01 for itemText and January for itemLabel

    itemLabel shows up in the drop down, just not in the execute function


  4. well i figured out away around it.
    Only thing i noticed is if you have a dynamic php call via ajax on
    your fckplugin.js on inital load the drop down works. On subsequent
    loads (i.e. move off the page and back too it) the drop down won’t load.

    errrrrrrrrrr


  5. I did all the above mention codes but the month combo is not display in my page


  6. @santhose Remember, if you make any changes for FCKeditor, you must clear cache completely. Otherwise, the changes wouldn’t affect. Try again.
    Thanks.

  7. santhose Says:
    July 2nd, 2009 at 5:13 pm

    I am using .Net3.5 in IE8-browser.I didn’t find any error in code.Every thing excute sucesessfully .But The new month combo is not visibled in FCKeditor. And I tried clearing cache also.but fail to display..
    Thanks
    Santhose


  8. Thanks a million! Been trying a long time to get this sorted :)


  9. can we display a dropdown from database in ASP.Net in fckeditor toolbar if yes can anybody please provide a link or something to begin with. Thanks in advance.


  10. Valentica,
    Great article! It was a great help!

    Do you know how I can create a custom TextColor like drop down interface?


  11. Great tutorial!!! Thanks

Leave a Reply