Integrating TinyMCE Editor (WYSIWYG) to an ASP.NET MVC Application

Pankaj Mohapatra

4.00/5 (3 votes)

May 16, 2022

CPOL

2 min read

9684

417

Integrating TinyMCE editor In ASP.NET MVC

Download source code - 47.1 MB

Introduction

This is a step by step process of Integrating TinyMCE editor (WYSIWYG) into an ASP.NET MVC application.

Background

There are multiple WYSIWYG editors available which allow users to do text formatting in web applications and keep the output in HTML format. One of them is TinyMCE editor.

Integrating TinyMCE in ASP.NET MVC

Create an ASP.NET MVC Web application.
Choose MVC and click on the OK button.
To integrate TinyMCE, the easiest approach would be to download the latest TinyMCE package via NuGet through the following steps:
Right-click on the project.
Choose Manage NuGet Packages from the Context menu.
Select the Browse tab on the left within the dialogue box.
Search for “TinyMCE” in the upper right-hand corner.
Install the TinyMCE package to your project.
Select TinyMCE latest version to install, by clicking on the Install button, all the necessary folders will be added inside the Scripts folder.
Exclude tinymce.d.ts from the project, if it is there as we do not have a typescript transpiler installed. If we don't exclude it, build might fail due to errors (Example: cannot find name 'InputEvent', etc.). As we are not using typescript to integrate TinyMCE, instead it's been done using JavaScript.
Add a model, TinyMCE.cs is the model created (we can give any name) with a string type property and named it HtmlContent with [AllowHtml] attribute.
```
using System.Web.Mvc;
namespace TinyMCE_Integration_MVC.Models
{
    public class TinyMCE
    { 
        [AllowHtml]
        public string HtmlContent { get; set; }
    }
}
```
Note: The [AllowHtml] data annotation is used to allow sending HTML content or codes to the server which by default is disabled by ASP.NET MVC to avoid XSS (Cross-Site Scripting) attacks.

Clear the default content from the Index.cshtml page. And add the below code to Index.cshtml.

@model TinyMCE_Integration_MVC.Models.TinyMCE
ViewBag.Title = "Home Page";
<div class="row">
 using (Html.BeginForm())
 Html.TextAreaFor(model => model.HtmlContent)
< input type="submit" value="Submit" />
</div>

Add /Scripts/tinymce/tinymce.min.js to BundleConfig.cs.

bundles.Add(new Bundle("~/bundles/js").Include("~/Scripts/tinymce/tinymce.min.js"));

Refer the bundle in _Layout.cshtml.
```
@Scripts.Render("~/bundles/js")
```

Then, the next step is to add the below script to the <head> section of _Layout.cshtml.

<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
selector: '#HtmlContent' // change this value according to your HTML
</script>

In HomeController.cs, add one more Index action method with model (TinyMCE.cs type) as to receive the HTML content on Submit button click from Index.cshtml. the Index method with data annotation [HttpPost].

using System.Web.Mvc;
using TinyMCE_Integration_MVC.Models;
namespace TinyMCE_Integration_MVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(TinyMCE tinyMCEModel)
        {
            return View();
        }
    }
}

Run the application to see the TinyMCE editor.

Thank you for reading!

History

16^th May, 2022: Initial version