HtmlEditor

• Oct 07, 2025
• 3 minutes to read

HtmlEditor is a client-side WYSIWYG editor that allows users to format text and visual content, and to export it as HTML. HTML Editor supports browser spellcheck functionality.

Run Demo: HtmlEditor Read Tutorial

Getting Started

The HtmlEditor UI Control is based on the DevExtreme HtmlEditor component.

To add this control to your project, follow instructions in the following help topics:

• Configure a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

HtmlEditorBasics.cshtml

@section ExternalDependencies {
    <script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.3/dist/dx-quill.min.js"></script>
}

@(Html.DevExtreme().HtmlEditor()
    .Value("<b>Html</b> content")
    .Toolbar(t => t.Items(
        i => {
            i.Add().Name(HtmlEditorToolbarItem.Undo);
            i.Add().Name(HtmlEditorToolbarItem.Redo);
        }
    ))
)

HtmlEditorController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class HtmlEditorController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• Inline Formats
  HTML Editor includes various inline formatting options:

  • Bold, italic, strikethrough, and underscore
  • Typeface, font size, and text color

• Block Formats
  HTML Editor supports block formatting such as:

  • Headers
  • Lists (ordered and unordered)
  • Code blocks
  • Quotes

• Image Upload
  Images can be uploaded by one of the following methods: drag-and-drop images onto the form, select files from the file system, or specify a URL. After an image is uploaded, you can enable image resize.

• Mentions
  Insert mentions to reference others within text conversations.

• Tables
  Users can insert and modify tables with built-in UI elements. You can allow users to resize tables.

• Built-in Format Customization
  You can modify the existing formats to fit specific requirements.

• Advanced Format Conversion
  The HTML Editor’s default value type is HTML. You can convert the value from HTML to another markup language, for instance, Markdown.

  #include btn-open-demo with { href: “https://demos.devexpress.com/ASPNetCore/Demo/HtmlEditor/MarkdownSupport/“ }

• Mail Merge
  Integrate variables to be replaced with real data during text processing.

• Adaptive Toolbar
  The HTML Editor’s built-in adaptive toolbar contains buttons and drop-down menus that allow users to edit and format content. You can use predefined items or create custom ones.

• Data Validation and Spellcheck
  HTML Editor supports browser spellcheck functionality. The component includes various validation rules and real-time validation feedback. You can also adjust the error message position.

API

Server-Side API

Initialization

Call the HtmlEditor() method to create a HtmlEditor control. This action initializes a HtmlEditorBuilder instance. Use the instance methods to specify HtmlEditor options and event handlers.

Options

For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the HtmlEditor options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme HtmlEditor options.

Methods

For a list of available methods, see DevExtreme HtmlEditor methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on HtmlEditor accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: HtmlEditor