MSMVPS.COM
The Ultimate Destination for Blogs by Current and Former Microsoft Most Valuable Professionals.

Using FCK Editor with ASP.NET MVC

First of, what is this FCKEditor? Well, it's an HTML Text Editor. It's free and open source, cross browser, extensible and there are probably quite a few more buzzwords applicable. Oh... and it's also the default HTML Text Editor provided with DotNetNuke. Fck Editor is soon to be replaced by CK Editor but I'll stick with Fck for now. CK will work mostly the same though.image

First, you'll need to download Fck Editor. Unzip the downloaded file to see what's in there.

You'll need to copy the "editor" folder over to you Contents folder in you ASP.NET MVC website. I chose the path "/Content/Js/ Fck" to paste it in.

Two other files you might want to copy over to this same folder are in the root of the downoaded zipfile: fckeditor.js and fckconfig.js. The latter is expected by the editor and (suprisingly) contains configuration settings for the editor, while the first contains a few nice javascript functions to instanciate the editor.

image 

Next, include the fckeditor.js file in your page:

<script src="<%= Url.Content("~/Content/Js/fck/fckeditor.js") %>" type="text/javascript" ></script>

All set. Now you'll need to add a textarea to your page:

<%= Html.TextArea("FckEditor1", "Some Value", 
new { @name="FckEditor1" })%>

Important thing here, is the name property of the TextArea being set to the same value as the Id of it.

To finish the client side of things off, you'l need to add some javascript to turn the textarea into a FckEditor at runtime. This can be copied from the samples of course, except for the Url.Contents part:

<script type="text/javascript">
window.onload = function()
{
var sBasePath = '<%= Url.Content("~/Content/Js/Fck/") %>';

var oFCKeditor = new FCKeditor( 'FckEditor1' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

Now, to prevent the server error "A potentially dangerous Request.Form value was detected from the client ", you should add the attribute "ValidateInput" to your controller's action method like this":

[ValidateInput(false)]
public ActionResult Save(int id)
{
...
}

With this, you're all set. The contents of the TextArea field you started out with, will contain the contents of the FckEditor control.

Have fun!


Posted Mon, Apr 6 2009 13:22 by Stefan Kamphuis
Filed under: ,

Comments

Dvaid Costelloe wrote re: Using FCK Editor with ASP.NET MVC
on Mon, Apr 6 2009 14:00

Thanks just waht I was looking for.

Any chance of a tutorial or is this sufficient?

Excellent work

Cheers

Stefan Kamphuis wrote re: Using FCK Editor with ASP.NET MVC
on Mon, Apr 6 2009 16:01

I think this should do, but feel free to leave a comment if it doesn't. I can always make things more clear where useful, right?

Cristian Donoso wrote re: Using FCK Editor with ASP.NET MVC
on Tue, Apr 7 2009 19:24

I just tried your code, and everthing worked for me except that I had to use a closing tag to include fckeditor.js:

<script src="<%= Url.Content("~/Content/Js/fck/fckeditor.js") %>" type="text/javascript" ></script>

Dam Thom wrote re: Using FCK Editor with ASP.NET MVC
on Tue, Jun 16 2009 5:58

I can't display the FCK as your post. Please upload an example project.

Thank so much.

Stefan Kamphuis wrote re: Using FCK Editor with ASP.NET MVC
on Tue, Jun 16 2009 6:44

Actually, there was an error in it, pointed out by Christian Donoso, which I corrected only just now:

<script src="<%= Url.Content("~/Content/Js/fck/fckeditor.js") %>" type="text/javascript" ></script>

needs the closing tag...

Hope this helps.

DotNetShoutout wrote Using FCK Editor with ASP.NET MVC - SuperSKa Weblog
on Wed, Jul 22 2009 9:54

Thank you for submitting this cool story - Trackback from DotNetShoutout

Bill Morefield wrote FCKEditor under ASP.NET MVC
on Thu, Sep 24 2009 20:50

FCKEditor under ASP.NET MVC

Twitter Mirror wrote FCK Editor for ASP.NET MVC - http://msmvps.com/blogs/superska/archive/2009/04/06/using-fck-editor-with-asp-net-mvc.aspx
on Thu, Feb 25 2010 16:33

FCK Editor for ASP.NET MVC - msmvps.com/.../using-fck-editor-with

Twitter Mirror wrote Text Editor for MVC http://msmvps.com/blogs/superska/archive/2009/04/06/using-fck-editor-with-asp-net-mvc.aspx
on Wed, May 12 2010 14:17
Разработка приложений wrote Используем FCK редактор в ASP.NET MVC
on Thu, May 13 2010 1:57

Прежде всего, что такое FCKEditor ? Это редактор HTML. Он бесплатен и открыт, является кроссбраузерным

Community Blogs wrote May 20th Links: ASP.NET MVC, ASP.NET, .NET 4, VS 2010, Silverlight
on Fri, May 21 2010 0:56

Here is the latest in my link-listing series .  Also check out my VS 2010 and .NET 4 series and

BusinessRx Reading List wrote May 20th Links: ASP.NET MVC, ASP.NET, .NET 4, VS 2010, Silverlight
on Sat, May 29 2010 13:50

Here is the latest in my link-listing series .  Also check out my VS 2010 and .NET 4 series and

Phydelta wrote Links Interesantes de .NET en general
on Mon, Sep 27 2010 16:20

Links Interesantes de .NET en general

instagram follower bot wrote twitter automation software
on Sun, Jul 28 2013 7:41

instagram software - Using FCK Editor with ASP.NET MVC - SuperSKa Weblog - MSMVPS.COM