In this article I will explain with an example, how to implement TinyMCE RichTextBox (RichTextEditor) in ASP.Net Core Razor Pages.
TinyMCE RichTextBox (RichTextEditor) is a JavaScript plugin and is applied to the HTML TextArea element.
Note: For beginners in ASP.Net MVC Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Razor PageModel (Code-Behind)
The PageModel consists of the following two Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
 
Handler method for handling POST operation
This Handler method handles the call made from the POST function from the Page.
When the Form is submitted, the posted value is captured through the personalDetails parameter and it is assigned to the PersonalDetails property which is later used to display the value on the Page.
public class IndexModel : PageModel
{
    public string PersonalDetails { get; set; }
 
    public void OnGet()
    {
 
    }
 
    public void OnPostSubmit(string personalDetails)
    {
        this.PersonalDetails = personalDetails;
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML TextArea and a Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 
When the Submit button is clicked, the Form gets submitted and the value of the PersonalDetails property is displayed using HTML SPAN.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model TinyMCE_Razor_Core.Pages.IndexModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <form method="post">
        Personal Details:
        <textarea cols="20" rows="3" name="PersonalDetails"></textarea>
        <br/><br/>
        <input type="submit" value="Submit" asp-page-handler="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
ASP.Net Core Razor Pages: TinyMCE RichTextBox (RichTextEditor)
 
 
Downloads
Download Code