Getting Started with ASP.NET MVC Rich Text Editor

The ASP.NET MVC Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section briefly explains how to include ASP.NET MVC Rich Text Editor control in your ASP.NET MVC application using Visual Studio.

Ready to streamline your ASP.NET MVC development? Discover the full potential of ASP.NET MVC controls with AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like Visual Studio, Visual Studio Code, Cursor, CodeStudio and more. Explore AI Coding Assistant

Create an ASP.NET MVC Web App with HTML Helper

Create an ASP.NET MVC Web App using Visual Studio via Microsoft Templates or the ASP.NET MVC Extension. For detailed instructions, refer to the ASP.NET MVC Getting Started documentation.

Install the required ASP.NET MVC package

To add ASP.NET MVC Rich Text Editor control in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for and install the Syncfusion.AspNetMvc.RichTextEditor package. All Syncfusion ASP.NET MVC packages are available in nuget.org. See the NuGet packages topic for details.

Alternatively, you can install the same package using the Package Manager Console with the following command.

Install-Package Syncfusion.AspNetMvc.RichTextEditor -Version 34.2.2

Add the Namespace

After the package is installed, open the ~/Views/Web.config file and import the Syncfusion.EJ2 namespace.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add stylesheet and script resources

The theme stylesheet and script can be referenced from the CDN. Include the stylesheet and script references inside the <head> of ~/Views/Shared/_Layout.cshtml.

<head>
    ...
    <!-- ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.2/fluent2.css" />
    <!-- ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>
</head>

Register the script manager

Open the ~/Views/Shared/_Layout.cshtml file and register the script manager EJS().ScriptManager() at the end of the <body> element as follows.

<body>
...
    <!-- ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Add ASP.NET MVC Rich Text Editor control

Add the ASP.NET MVC Rich Text Editor control in the ~/Views/Home/Index.cshtml file.

@Html.EJS().RichTextEditor("editor").Render()

IMPORTANT

Replace the existing content in the Index.cshtml file with the above code snippet. Ensure that the Rich Text Editor control is assigned a valid ID (for example, "editor"), as the control will not render without it.

Run the Application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The ASP.NET MVC Rich Text Editor control will render in your default web browser.

ASP.NET MVC Rich Text Editor Control

NOTE

View Sample in GitHub.

See Also

  1. Getting Started with ASP.NET MVC using HTML Helper
  2. Getting Started with ASP.NET Core MVC using Tag Helper
  3. How to change the editor type
  4. How to render the iframe
  5. How to render the toolbar in inline mode
  6. Accessibility in Rich Text Editor
  7. Keyboard support in Rich Text Editor
  8. Globalization in Rich Text Editor