Integrating FCKeditor in ASP.NET

• Download demo project - 1.48 MB

Introduction

In Basic ASP.NET, FCKeditor can be easily integrated. Here is the link where I found that.

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

Step 2

Unzip the package and put in your project content directory. I like 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.

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 here. 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!

References

• FCKeditor Docs
• jQuery is a new kind of JavaScript Library
• jQuery FCKEditor Plugin v1.3

Conclusion

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

History

• 20^th July, 2008: Initial post