In this article I will explain with an example, how to implement TinyMCE RichTextBox (RichTextEditor) in ASP.Net Core MVC.
TinyMCE RichTextBox (RichTextEditor) is a JavaScript plugin and is applied to the HTML TextArea element.
Note: For beginners in ASP.Net MVC Core, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
 
 
Model
The following Model class consists of one property PersonalDetails.
public class PersonModel
{
    public string PersonalDetails { get; set; }
}
 
 
Controller
The Controller consists of two 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 call made from the POST function from the View.
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.
 
When the Form is submitted, the posted value is captured through the PersonModel class object and the View is returned along with the object.
public class HomeController : Controller
{
    // GET: Home
    public IActionResult Index()
    {
        return View(new PersonModel());
    }
 
    [HttpPost]
    public IActionResult Index(PersonModel person)
    {
        return View(person);
    }
}
 
 
View
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.
The Form consists of HTML TextArea and a Submit Button.
The TinyMCE plugin is applied to the TextArea by rendering the TinyMCE from its CDN.
When the Submit button is clicked, the Form gets submitted and the value of the PersonalDetails property is displayed using HTML SPAN.
@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">
        Personal Details:
        <textarea cols="20" rows="3" name="PersonalDetails"></textarea>
        <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