How to use rich text editor in MVC application

In this post I will discuss how to use a rich text editor in MVC application. In classic ASP.Net application we had lot of server controls that wrapped open source WYSIWYG javascript controls. Good news is that in MVC applications you do not need those server control wrappers. Model binding makes the integration of these javascript controls smooth. For current project I am using Tiny MCE rick text editor. Since I have been using this RTE for this blog as well, so I decided to stick with it. This does not mean that using other controls like CK Editor in MVC application is different. Same technique applies for those controls as well.

Using Tiny MCE in MVC

Here are simple steps you can follow to use Tiny MCE rich text editor in your MVC application.

• Download Tiny MCE from their site

• Copy the downloaded file in your MVC application. The following screenshot shows the folder structure in my application.

  

• Include Tiny MCE javascript file tiny_mce.js in your page. You can include it in your layout page or individual pages. If you are using RTE extensively in lot of pages of your application, then I will recommend including it in your layout page.

   bundles.Add(new ScriptBundle("~/bundles/tinymceeditor").Include("~/Editors/tiny_mce/tiny_mce.js"));
   ..
   ..
   @Scripts.Render("~/bundles/tinymceeditor")
              

• On the page where you want to use editor, initialize Tiny MCE object. Follow code shows simple use of this control.

  <script language="javascript" type="text/javascript">
      tinyMCE.init({
          theme: "advanced",
          mode: "textareas",
          width: "60%",
          height: "200px"
      });
  </script>
              

  The critical part of the above initialization code is mode property. By setting this value to textareas you indicate that Tiny MCE editor should attach itself to all input controls of type textarea. If you have multiple text area controls on your page and you do not want to attach rich text editor to all, then you can use other property values for mode. For example by using value of exact you can specify IDs of text area controls that will be attached to rich text editor. You can read more about different values of mode property in Tiny MCE documentation.

• Only step left now is to bind your model property to this text area. Following code snippet how this can be accomplished so easily.

  @using (Html.BeginForm("SendMessage", "ContactUs"))
  {
      @Html.ValidationSummary()
      <table class="tblForm largeForm" style="width: 100%; margin: 0;">
          <tr>
              <td style="vertical-align: top; padding: 0 40px 0 0;">
                  <ul class="fl">
                      <li><label class="lbl">
                          @Karobar.Resources.Labels.Name</label>@Html.EditorFor(m=>m.Name)</li>
                      <li><label class="lbl">
                          @Karobar.Resources.Labels.EmailAddress</label>@Html.EditorFor(m=>m.Email)</li>
                      <li><label class="lbl">
                          @Karobar.Resources.Labels.Message</label>@Html.TextAreaFor(m=>m.MessageText)</li>
                      <li>
                          <input type="submit" class="button button-blue" value="Send"/></li>
                  </ul>
              </td>
          </tr>
      </table>
  }
  
  [HttpPost]
  [ValidateInput(false)]
  public ActionResult SendMessage(Models.ContactUs model)
  {
    return View(model);
  }
              

  Notice use of ValidateInput attribute on controller action. This is important. When you will submit the form to server, you will end up with following exception.

  Server Error in '/Dashboard' Application.
  --------------------------------------------------------------------------------
   A potentially dangerous Request.Form value was detected from the client (MessageText="<p>This is my messag...").
              

  The reason you will get this exception is because Tiny MCE control will contain HTML content. When form submits this content to server, MVC framework will validate the content to make sure there is no cross site scripting attack attempt by sending dangerous content like scripts, html etc. To avoid this exception, you will need to turn off validation for this action by setting appropriate value for ValidateInput attribute.

After performing above steps, your MVC application is all set to use rich text editor.