I was looking for a good What-You-See-Is-What-You-Get HTML editor that works on the Asp.Net MVC platform, after extensive searching and testing I came up with two solutions: CLEditor as a lightweight ultrafast editor, ideal for basic text operations and TinyMCE as the full featured editor suitable for CMS applications. Both editors are cross browser(IE 6.0+, FF, Safari, Chrome, Opera) and can be used as a JQuery plugin.
CLEditor is an open source jQuery plugin that has the standard text formatting features plus text color and highlight color. It’s a perfect replacement for the textarea control if you need basic text editing, CLEditor renders fast and has only 16KB minified(9KB gzip). The plugin is dual licensed MIT and GPL, that means that it can be used in any kind of application, open or closed source.
You can add CLEditor to your MVC 3 project using this NuGet package or by downloading from the plugin website. If you want CLEditor to produce Transitional XHTML compliant source, download this js file.
Using CLEditor with Asp.Net MVC 3 and JQuery 1.6.1
<textarea id="input" name="input"></textarea>
<link href="@Url.Content("~/Scripts/cleditor/jquery.cleditor.css")" rel="stylesheet" type="text/css" />
CLEditor will synchronize the editor’s xhtml content with the textarea value, meaning that jquery form serialization over ajax will work just fine. You can easily update the editor by calling updateFrame() function after changing the textarea value.
Using TinyMCE with Asp.Net MVC 3
<textarea id="editor" name="editor"></textarea>
tinyMCE.execCommand(‘mceAddControl’, false, ‘editor’);
In order to retrieve the editor HTML content you need to call tinyMCE.get(‘editor’).getContent() function.
If you want to enable file upload in TinyMCE checkout this project on codeplex: TinyMCE with FCKEditor File Upload Manager in ASP.NET MVC 3.
Redactor is by far the best WYSIWYG editor out there, but it comes with a price from 19$ for personal use to 199$ for corporate use. It’s designed for HTML5 output and works on PC (IE8+, FF, Safari, Chrome and Opera), MAC, iPad, iPhone and Android. It has drag & drop file upload, air mode, autosave utility, cleans up the html code on paste, Amazon S3 video and pictures embedding. Redactor can easily handle large amount of text 1000+ pages. In order to use it in your MVC app just download the js files and apply the Redactor jQuery plugin on any textarea field.
I’ve been using Redactor from over a year now and I can say that it has regular updates and the support is great, if you need a WYSIWYG editor that works on every browser desktop or mobile, Redactor is the perfect tool.
Last article update 9 September 2012