Introduction

In this article I will explain to you how you can create a rich textbox editor for your MVC application. Actually, I was working in one project and I needed a much faster and more reliable Rich Textbox Editor. So there is a free and better Rich Textbox Editor available, which is really so reliable, called TinyMCE.

What is TinyMCE

This is a platform independent web-based Java Script HTML WYSIWYG editor control released as open source under LGPL. Really this editor enables us to convert HTML text area fields or other HTML elements to editor instances. This is a pure Java Script Rich TextBox editor. This editor has lots of features some are like
  • Text Formatting
  • Tables Designer
  • Media File Editor
  • Cut, Copy, Paste Options.
  • List Designer
  • Hyperlink
How to use this TinyMCE in Project

First of all right click on your MVC project and click on Manage Nuget Package. After then one dialog box will be open, search for "TinyMCE" and you will get "TinyMCE.MVC" package. Install that "TinyMCE.MVC".

After Installing TinyMCE.MVC, inside the script folder of your project you will get one folder more with the name TinyMCE. As I discussed above that TinyMCE is completely a java script editor so inside that tinymce folder you will get mostly Java Script files.



Apart from this Script folder after installing TinyMCE in our project you will get one more folder inside View> Shared with name "EditorTemplates."
Inside this editor Template you will get two cshtml file "tinymce_full.cshtml" and "tinymce_full_compressed.cshtml" Both file contents are the same but one is a compressed version and one is a full version. These files are very important for us because by these files we can modify our Editor with the features that we want.
Now to use this Editor in our view I am creating one model class with name About where I will specify fields which I want to save into the database.
So I am writing the following code for about class.
  1. using System;
  2. using System.ComponentModel.DataAnnotations;
  3. using System.Web.Mvc;
  5. namespace RTBEditor.Models
  6. {
  7. public class About
  8. {
  9. public int UserID { get; set; }
  10. [AllowHtml]
  11. [UIHint("tinymce_full")]
  12. [Display(Name = "About")]
  13. public string AboutMe { get; set; }
  14. }
  15. }
Here I am using two attributes.
  • [AllowHtml]:

    This attribute is very important. Because whatever you will type in your Text Editor will be the complete HTML Code. And for security reasons MVC does not allow to to POST HTML content. By this attribute MVC will allow you to accept HTML content for AboutMe Property.

  • [UIHint("tinymce_full")]:

    This attribute allows as to use "tinymce_fill.cshtml" template. If you want to use Compressed template then you can use this attribute as [UIHint("tinymce_full_compressed")]. Which will allow you to use compressed template.
Why I am using [UIHint("tinymce_full")] attribute:

Because I will modify in my template and in compressed version it will be difficult for me to change something into the template.
How will we use this inside View: To show this Text Editor in View we will just write the following code:
  1. @Html.EditorFor(model => model.AboutMe)
My View Code :
  1. @model RTBEditor.Models.About
  3. @{
  4. ViewBag.Title = "Index";
  5. Layout = "~/Views/Shared/_Layout.cshtml";
  6. }
  8. <h2>Index</h2>
  11. @using (Html.BeginForm())
  12. {
  13. @Html.AntiForgeryToken()
  15. <div class="form-horizontal">
  16. <h4>About</h4>
  17. <hr />
  18. @Html.ValidationSummary(true)
  20. <div class="form-group">
  21. @Html.LabelFor(model => model.AboutMe, new { @class = "col-md-12" })
  22. <div class="col-md-12">
  23. @Html.EditorFor(model => model.AboutMe)
  24. @Html.ValidationMessageFor(model => model.AboutMe)
  25. </div>
  26. </div>
  28. <div class="form-group">
  29. <div class="col-md-offset-2 col-md-10">
  30. <input type="submit" value="Create" class="btn btn-default" />
  31. </div>
  32. </div>
  33. </div>
  34. }
  36. <div>
  37. @Html.ActionLink("Back to List", "Index")
  38. </div>
  40. @section Scripts {
  41. @Scripts.Render("~/bundles/jqueryval")
  42. }
Output:
How to remove template extra options from this Editor:

To remove some features from this editor you can modify tinymce_full.cshtml. Whatever functions you want keep this you can also modify the complete editor and its feature.
Note:

I will modify in tinymce_full.cshtml because I am using [UIHint("tinymce_full")] Attribute in my model. if you are using [UIHint("tinymce_full_compressed")] Attribute then modify tinymce_full_compressed.cshtml file.
I am removing some functionalities by commenting the code in tinymce_full.cshtml. I am changing in Theme Options.
  1. // Theme options
  2. theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
  3. theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  4. //theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  5. //theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
  6. theme_advanced_toolbar_location : "top",
  7. theme_advanced_toolbar_align : "left",
  8. theme_advanced_statusbar_location : "bottom",
  9. theme_advanced_resizing : false,
as you can see I have commented theme_advanced_buttons3 and theme_advanced_buttons4. So now after commenting My output will be as following:
You can download this complete project from following GitHub Link.
Read more articles on ASP.NET: