A Tale of Valentica

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.

Introduction

In Basic ASP.Net, FCKeditor can be easily integrated. Here is the link where I found that. http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Integration/ASP.NET

However, to integrate FCKeditor in ASP.Net MVC environment, we have to follow some tricky steps. Here I will show how to integrate using core javascript as well as using Jquery.

Using Javascript:

Step 1

Download the FCKeditor from http://www.fckeditor.net/download.

Step 2

Unzip the package and put in your project content directory. I liked to make a directory “Javascript” under “Content” directory and put “unzipped fckeditor” here. I have also put fckeditorapi.js in “Javascript” folder. You can get more information on FCKeditor API here

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API

Step 3

I have added a MVC view file in Home folder and named it as “Fck.aspx”. To view this file, I included a method in HomeController, as follows.

/// <summary>
/// Show FCK Editor View Page
/// </summary>
public void Show()
{
    RenderView("Fck");
}

Step 4

In Fck.aspx, include the fckeditor.js and fckeditorapi.js file:

<script type="text/javascript" src="../../Content/Javascript/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="../../Content/Javascript/fckeditorapi.js"></script>

Include the following to replace textarea (named ‘content’) by FCKeditor. Here I have included InsertContent(), ShowContent() and ClearContent() methods to perform some extra actions.

<script type="text/javascript">
window.onload = function()
{
    var oFCKeditor = new FCKeditor( 'content' ) ;
    oFCKeditor.BasePath = "/Content/Javascript/fckeditor/" ;
    oFCKeditor.Height = 300;
    oFCKeditor.ReplaceTextarea() ;
}
 
function InsertContent()
{
    var oEditor = FCKeditorAPI.GetInstance('content') ;
    var sample = document.getElementById("sample").value;
    oEditor.InsertHtml(sample);
}
 
function ShowContent()
{
    var oEditor = FCKeditorAPI.GetInstance('content') ;
    alert(oEditor.GetHTML());
}
 
function ClearContent()
{
    var oEditor = FCKeditorAPI.GetInstance('content');
    oEditor.SetHTML("");
}
</script>

Here is the html content:

<div>
  <input id="sample" type="text" />
  <input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />

  <input id="cmdClear" type="button" value="Clear Content" onclick="ClearContent()" />
  <br /> <br />
  <textarea id="content" cols="30" rows="10"></textarea>
  <br />
  <input id="cmdShow" type="button" value="Show Content" onclick="ShowContent()" />
</div>

Step 5

Now build the application and run. Click the “FCK Editor” link and get the result.

Using JQuery

Step 1

Download jquery from http://www.jquery.com. I have put jquery-1.2.6.pack.js and jquery.FCKEditor.js in my “Javascript” folder”.

Step 2

I have added a MVC view file in Home folder and named it as “FckJquery.aspx”. To view this file, I included a method in HomeController, as follows.

/// <summary>
/// Show FCK Editor By JQuery
/// </summary>
public void View()
{
    RenderView("FckJquery");
}

Step 3

In FckJquery.aspx, include the jquery-1.2.6.pack.js, fckeditor.js and jquery.FCKEditor.js file:

<script type="text/javascript" src="../../Content/Javascript/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../../Content/Javascript/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="../../Content/Javascript/jquery.FCKEditor.js"></script>

Include the following to replace textarea (named ‘content’) by FCKeditor. Here I have included InsertContent(), ShowContent() and ClearContent() methods to perform some extra actions.

<script type="text/javascript">
$(document).ready(function(){
    $.fck.config = {path: '/Content/Javascript/fckeditor/', height: 300 };
    $('textarea#content').fck();
});
 
function InsertContent()
{
    var sample = document.getElementById("sample").value;
    $.fck.insertHtml('fck1', sample);
}
 
function ShowContent()
{
    alert($.fck.content('fck1', ''));
}
 
function ClearContent()
{
    $.fck.clearHtml('fck1');
}
</script>

Here is the html content:

<div>
  <input id="sample" type="text" />
  <input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />

  <input id="cmdClear" type="button" value="Clear Content" onclick="ClearContent()" />
  <br /> <br />
  <textarea id="content" cols="30" rows="10"></textarea>
  <br />
  <input id="cmdShow" type="button" value="Show Content" onclick="ShowContent()" />
</div>

Step 4

In jquery.FCKEditor.js file, I have included two functions. Function insertHtml() inserts html content into fckeditor and clearHtml() clears the content.

// insert Html Content
insertHtml: function(i, v) {
  try{
    var x = FCKeditorAPI.GetInstance(i);
 
    if(v) x.InsertHtml(v);
    else return '';
  }
  catch(e) { return ''; };
},
 
// clear Html Content
clearHtml: function(i) {
  try{
    var x = FCKeditorAPI.GetInstance(i);
 
    x.SetHTML('');
  }
  catch(e) { return ''; };
},

Step 5

Now build the application and run. Click the “FCK Editor By JQuery” link and get the result. Enjoy It!

Source Code

Here is the source code FCKeditorMvcDemo

References

http://docs.fckeditor.net

http://www.jquery.com

http://www.fyneworks.com/jquery/FCKEditor

Conclusion

Next I will try to give some demonstration on how to build plugins in FCKeditor. Till then bye.

convert this post to pdf.