ASP.NET

Integrating TinyMCE Into An MVC 5 Project

I thought I would take some time to address a question that has frequently appeared in a few forum questions over the past month or so and that is “How do I use the TinyMCE Editor within ASP.NET MVC?”.

Since I’ve answered this quite a few times, I thought I would take a few minutes to share the process with the rest of the net so prevent this from popping up in the future.

Let’s address a few of the extremely common questions.

Can I use TinyMCE with ASP.NET MVC? Or Web Forms?

Of course you can. TinyMCE is simply a pure Javascript rich text editor that has no reliance on MVC, Web Forms or any other server-side related technology. All you need to use it is some simple HTML markup and the appropriate TinyMCE Javascript and content files (which are included within the download).

How or where can I download TinyMCE?

The easiest approach would be to download the latest TinyMCE package via NuGet through the following steps:

  • Right-click on your Project.
  • Choose Manage NuGet Packages from the Context menu.
  • Select the Online tab on the left within the dialog box.
  • Search for “TinyMCE” in the upper right-hand corner.
  • Install the TinyMCE package to your project.

If you aren’t using ASP.NET or simply do not have access to NuGet, you can always visit the TinyMCE site and download the latest version of the editor from there.

A Simple Walkthrough for Getting Started with TinyMCE

Let’s create a simple new MVC 5 Application through Visual Studio. For simplicity’s sake, I’ll just be using an Empty Project with the appropriate MVC references added:

Empty Project

Next, you’ll need some way to access the TinyMCE files. Two of the most common approaches (downloading the NuGet package or directly downloading from TinyMCE) are detailed above, this example will use the NuGet approach, but both of them should be similar.

You should now see several new files within a newly created ~/scripts/tinymce folder. This folder contains everything that you need to use and configure the TinyMCE editor.

In order to actually use the editor, you’ll need to create a Controller with a single action that points to a View. For all intents and purposes, we will call this one TinyMCEControllerand it will have an action called “Index” and another Index action that is decorated with an [HttpPost] attribute (and will accept a class that we will define below):

  1. public class TinyMCEController: Controller  
  2. {  
  3.     // An action to display your TinyMCE editor  
  4.     public ActionResult Index()  
  5.     {  
  6.         return View();  
  7.     }  
  8.     // An action that will accept your Html Content  
  9.     [HttpPost]  
  10.     public ActionResult Index(ExampleClass model)  
  11.     {  
  12.         return View();  
  13.     }  
  14. }  
Next, let’s actually flesh out this very simple class that will just have a single, but very important property and an even more important [AllowHtml] attribute decorating it:
  1. // An example class to store your values  
  2. public class ExampleClass    
  3. {  
  4.     // This attributes allows your HTML Content to be sent up  
  5.     [AllowHtml]  
  6.     public string HtmlContent { get; set; }   
  7.   
  8.     public ExampleClass()  
  9.     {  
  10.   
  11.     }  
  12.  }  
The [AllowHtml] attribute is going to by-pass ASP.NET serialization protection (which can aid in preventing nasty XSS or any other types of garbage input that might fly on it). Without this attribute, you would need to disable RequestValidation for the specified action which is a bit overkill in this scenario as you just need to check for HTML.

The next step will be to add a View that targets your Index action. Right-click on your Index Controller Action and choose the available Add View option that appears in the context menu. In this example, we won’t be using a Layout page or a Template, so you can leave those options:

Add View

After generating your View, you’ll need to add a few references in to target and configure your TinyMCE scripts. You’ll also need a very simple <form> element to post your content from the TinyMCE editor as detailed below:
  1. <!-- This View uses your Model -->    
  2. @model TinyMCE.Controllers.ExampleClass  
  3. <!DOCTYPE html>    
  4. <html>    
  5. <head>    
  6.     <meta name="viewport" content="width=device-width" />  
  7.     <title>TinyMCE Example</title>  
  8.     <!-- TinyMCE Script Reference -->  
  9.     <script src="~/scripts/tinymce/tinymce.min.js"></script>  
  10.     <!-- Script to wire up your TinyMCE editor -->  
  11.     <script type="text/javascript">  
  12.         // Initialize your tinyMCE Editor with your preferred options  
  13.         tinyMCE.init({  
  14.             // General options  
  15.             mode: "textareas",  
  16.             theme: "modern",  
  17.             // Theme options  
  18.             theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",  
  19.             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",  
  20.             theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",  
  21.             theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",  
  22.             theme_advanced_toolbar_location: "top",  
  23.             theme_advanced_toolbar_align: "left",  
  24.             theme_advanced_statusbar_location: "bottom",  
  25.             theme_advanced_resizing: true,  
  26.   
  27.             // Example content CSS (should be your site CSS)  
  28.             content_css: "css/example.css",  
  29.         });  
  30.     </script>  
  31. </head>    
  32. <body>    
  33.     <!-- This will automatically post to your Index method (that is decorated with a HttpPost attribute) -->  
  34.     @using (Html.BeginForm())   
  35.     {  
  36.         @Html.AntiForgeryToken()  
  37.         <div>  
  38.             <!-- This will contain your HtmlContent and use the TinyMCE editor-->  
  39.             @Html.TextAreaFor(model => model.HtmlContent)  
  40.   
  41.             <input type="submit" value="Create" />  
  42.         </div>  
  43.     }  
  44. </body>    
  45. </html>    
Obviously, the configuration code that is used above within the <script> tag might look a bit overwhelming. You can visit the TinyMCE Examples page which demonstrates a few varying levels and features depending on your needs.

After adding your View in, you should be able to run your application and see the following:

run your application

Once you hit the Create button within the View, your content will be posted with its associated markup to your Controller and you should be able to see it without any issues:

return view

Alternatives and Other Editors

Although this walk-through explicitly targeted the TinyMCE editor, it is my no means limited to just it. The same basic steps should work with any of the popular client-side Rich Text Editors such as Redactor, CKEditor, HTML Editor and more. You’ll just need to include the proper references and content files and ensure that you are targeting the proper element when using the configuration code.

It should be noted that there are a variety of other NuGet packages out there for using TinyMCE as well if this felt like too much of a hassle. The TinyMCE.MVC relies on an HTML Helper to build and wire up your editors for specific areas and can be useful if you don’t like messing with Javascript at all. It’s just a matter of preference.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs