HTML Editor

HtmlEditor HTML Editor


The HTML Editor component for Blazor is a WYSIWYG (what you see is what you get) text editor that allows users to format text and add graphics. The document can use HTML or Markdown format.

Supported features:

  1. Inline formats:
  2. Bold, italic, strikethrough text formatting
  3. Font, size, color changes (HTML only)
  4. Block formats:
  5. Headings
  6. Text alignment
  7. Lists (bullet and numbered)
  8. Code blocks
  9. Quotes
  10. HTML and Markdown support
  11. Variable support: produce documents based on templates
  12. Toolbar with adaptive layout support
  13. Insert images: specify a URL or upload from the local file system
  14. Table support

Supported browsers:

Google Chrome (including Android)

Latest

Apple Safari (including iOS)

Latest

Mozilla Firefox

Latest

Microsoft Edge

Latest

Microsoft Edge Legacy

Not supported



The DevExpress AI-powered extension for our Blazor HTML Editor adds AI-related commands to the editor’s toolbar. Commands are designed to process text/HTML content. Available predefined commands are as follows:

  • Ask AI Assistant — allows a user to process text based on a custom prompt.
  • Change Style — rewrites text using a specified style.
  • Change Tone — rewrites text using a specified tone.
  • Expand — expands text.
  • Explain — explains text.
  • Proofread — proofreads text.
  • Shorten — shortens text.
  • Summarize — summarizes text.
  • Translate — translates text into the specified language.

To utilize DevExpress AI-powered extensions, you should register an AI service in your application.

Note: DevExpress AI-powered extensions follow the "bring your own key" principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered extensions in your application.

Declare the DxHtmlEditor.AdditionalItems property and populate it with AI-related toolbar items to integrate the corresponding commands into the HTML Editor.