In this article I will explain with an example, how to implement TinyMCE RichTextBox (RichTextEditor) in ASP.Net Core (.Net Core) MVC.
TinyMCE RichTextBox (RichTextEditor) is a JavaScript plugin and is applied to the HTML TextArea element.
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

Model

The following Model class consists of one property PersonalDetails to which the following Data Annotation attributes have been applied.
1. Display – Data Annotation attribute is used for displaying the Label for the property.
2. Required – Data Annotation attribute is used for validation of the property.
3. AllowHtml – Data Annotation attribute is used for enabling posting of HTML content via input fields which by default is disabled.
Note: For more details on AllowHtml, please refer my article What is AllowHtml attribute, its Uses and Examples in ASP.Net MVC.
 
public class PersonModel
{
    [Display(Name = "Personal Details:")]
    [Required(ErrorMessage = "Personal Details is required.")]
    [AllowHtml]
    public string PersonalDetails{ get; set; }
}
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned along with the object of the PersonModel class object.
 

Action method for handling POST operation

This Action method handles the POST operation when the Form is submitted and it accepts PersonModel class object as a parameter.
Note: This example uses Model class object for capturing Form field values, for more details please refer my article ASP.Net Core: Form Submit (Post) Example.
 
Finally, the PersonModel class object is returned to the View.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View(new PersonModel());
    }
 
    [HttpPost]
    public IActionResult Index(PersonModel person)
    {
        return View(person);
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
 

Implementing Validation

The Form consists of a Label element, an HTML INPUT TextBox, a SPAN element and a Submit Button.
The TextBox have been set with the following Tag Helpers attributes: -
asp-for – The Model property to which validation will be performed. In this case PersonalDetails.
asp-validation-for – Displaying the validation message for the Model property.
 

Implementing JavaScript TinyMCE library

Inside the View, the following script file is inherited:
1. tinymce.min.js
 

Initializing TinyMCE (RichTextEditor)

TinyMCE (RichTextEditor) is initialized using init function and applied to an HTML TextArea element.
 

Submitting the Form

When the Submit Button is clicked, the content of the TinyMCE TextArea is fetched using value of the PersonalDetails property and is rendered using the Html.Raw Helper Method and displayed in HTML SPAN element.
@model TinyMCE_MVC_Core.Models.PersonModel
@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Index">
        <label asp-for="PersonalDetails"></label>
        <textarea cols="20" rows="3" asp-for="PersonalDetails"></textarea>
        <span asp-validation-for="PersonalDetails" class="error"></span>
        <br /><br />
        <input type="submit" value="Submit" />
        <br />
        <span>@Html.Raw(Model.PersonalDetails)</span> 
    </form>
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector:'textarea', width: 300 });
    </script>
</body>
</html>
 
 

Screenshot

Implement TinyMCE RichTextBox (RichTextEditor) in ASP.Net Core
 
 

Downloads

Download Code