Saturday 31 August 2013

Free Rich Text Editor for Asp.net MVC apps, simple 2 steps to use

Today I just make a search for free text editors for asp.net mvc applications and I find TinyMCE there ( http://www.tinymce.com ) , very useful , effective and powerful , I am just using its jquery package to maintain all editing on client side which actually maintained by itself , we just have its final raw html for storage to database and show as @Html.Raw(Content from database), its very simple two steps process :

1) Just run this command in visual studio package manager console

     Install-Package TinyMCE.MVC.JQuery
This will install all necessary files and plugins your application needed and will create a view in shared folder which will be used as an editor ( partial view ) where you will call this editor functionality.

2) Second thing is write following Annotation on the top of model property to which you want to open in editor while creating or editing , e.g lets say you have Blog model which have title and body properties  and it is obious you will want to open Body in editor while creating or updating entity, so use this annotation on the top of that property like this  :

 [UIHint("tinymce_jquery_full"), AllowHtml]
        public string Body { get; set; }



And that's all, you are ready to go and use your rich editor to write your text with style.


For more detailed tutorial go to : http://www.tugberkugurlu.com/archive/tinymce-html-text-editior-and-asp-net-mvc-setting-it-up-has-become-easy-with-nuget.

Just make sure one thing that your _layout.cshtml has included jquery library as this tool is built in javascript and run on the top of it. So Enjoy :)

No comments:

Post a Comment