Click here to Skip to main content
15,868,016 members
Articles / Programming Languages / C#
Tip/Trick

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

Rate me:
Please Sign up or sign in to vote.
4.00/5 (3 votes)
16 May 2022CPOL2 min read 8.3K   357   6   3
Integrating TinyMCE editor In ASP.NET MVC
In this article, you will see how to integrate TinyMCE editor version 6.0.2 to ASP.NET MVC application.

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

  1. Create an ASP.NET MVC Web application.
  2. Choose MVC and click on the OK button.
  3. To integrate TinyMCE, the easiest approach would be to download the latest TinyMCE package via NuGet through the following steps:
  4. Right-click on the project.
  5. Choose Manage NuGet Packages from the Context menu.
  6. Select the Browse tab on the left within the dialogue box.
  7. Search for “TinyMCE” in the upper right-hand corner.
  8. Install the TinyMCE package to your project.
  9. Select TinyMCE latest version to install, by clicking on the Install button, all the necessary folders will be added inside the Scripts folder.
  10. 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.
  11. 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.
    C#
    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.

  12. Clear the default content from the Index.cshtml page. And add the below code to Index.cshtml.
    chtml
    @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>
  13. Add /Scripts/tinymce/tinymce.min.js to BundleConfig.cs.
    C#
    bundles.Add(new Bundle("~/bundles/js").Include("~/Scripts/tinymce/tinymce.min.js"));
  14. Refer the bundle in _Layout.cshtml.
    chtml
    @Scripts.Render("~/bundles/js")
  15. Then, the next step is to add the below script to the <head> section of _Layout.cshtml.
    HTML
    <script type="text/javascript">
    // Initialize your tinyMCE Editor with your preferred options
    selector: '#HtmlContent' // change this value according to your HTML
    </script>
  16. 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].
    C#
    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();
            }
        }
    }
  17. Run the application to see the TinyMCE editor.

Thank you for reading!

History

  • 16th May, 2022: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
Currently working as a Senior software developer. Worked on various tools including C# Programming Language, JavaScript, HTML, ASP .NET MVC, MVVM, JCL, VSAM, DB2, SQL Server. Have good working knowledge in ReactJs as well.

Comments and Discussions

 
SuggestionPicture is worth a thousand words Pin
Cliff Buckley18-May-22 3:35
Cliff Buckley18-May-22 3:35 
PraiseThe article is good & helpfull. Pin
sailesh prasad singh16-May-22 6:09
sailesh prasad singh16-May-22 6:09 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA16-May-22 0:53
professionalȘtefan-Mihai MOGA16-May-22 0:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.