Syncfusion Aspnetmvc Richtexteditor

Syncfusion ASP.NET MVC Rich Text Editor

The Syncfusion ASP.NET MVC Rich Text Editor is a WYSIWYG ("what you see is what you get") editor that creates and edits content, returning it as valid HTML markup or Markdown. Both modes use the same @Html.EJS().RichTextEditor() HTML helper — the mode is controlled by the EditorMode property (HTML by default, Markdown for the Markdown Editor).

When to Use This Skill

• Setting up the RTE in an ASP.NET MVC project (NuGet, CDN, ScriptManager)
• Rendering in HTML (WYSIWYG), Markdown, IFrame, or Inline mode
• Configuring toolbar items and toolbar types
• Inserting and managing images, video, audio, tables, and links
• Implementing smart editing features: @mentions, emoji picker, slash menu, mail merge
• Working in Markdown mode: live preview, custom syntax, supported commands
• Reading/setting editor value, auto-save, cursor position
• Paste cleanup and clipboard handling
• Form validation, MaxLength, XSS prevention, read-only mode
• Integrating the AI Assistant (AICommands / AIQuery)
• Customizing styles, placeholder, globalization, third-party libraries
• Accessibility and keyboard navigation

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• NuGet package installation (Syncfusion.EJ2.MVC5)
• Namespace configuration in Views/Web.config
• CDN stylesheet and script in _Layout.cshtml
• ScriptManager registration
• Basic RTE render with HTML helper
• Configuring initial toolbar items

Editor Modes and Types

📄 Read: references/editor-modes.md

• HTML mode (default WYSIWYG)
• Markdown mode (EditorMode.Markdown)
• When to use HTML vs Markdown mode
• IFrame mode (IframeSettings)
• Inline editing mode (InlineMode)
• Resizable editor

Toolbar Configuration

📄 Read: references/toolbar.md

• Toolbar types: Expand, MultiRow, Scrollable, Popup
• Built-in toolbar tool names reference
• Adding custom tools with template
• Toolbar position (top/bottom)
• Quick toolbars (image, link, table context menus)
• Programmatically enable/disable toolbar items

Text Formatting

📄 Read: references/text-formatting.md

• Bold, italic, underline, strikethrough
• Font name, size, color, background color
• Headings and paragraph formats
• Text alignments
• Ordered/unordered lists, indent/outdent
• Blockquote, code block, inline code
• Remove formatting, format painter

Insert Images and Media

📄 Read: references/insert-media.md

• Insert images (upload, URL, base64)
• Image resize, alignment, and alt text
• Insert video and audio
• File browser integration
• Check image size on upload

Tables and Links

📄 Read: references/tables-links.md

• Insert and configure tables
• Table properties and toolbar
• Insert and edit hyperlinks
• Quick toolbar for tables and links

Smart Editing Features

📄 Read: references/smart-editing.md

• Mention support (@ tagging users/objects)
• Emoji picker
• Slash commands menu
• Mail merge fields

Markdown Mode

📄 Read: references/markdown-mode.md

• Markdown toolbar items and configuration
• Full supported markdown syntax reference
• Live preview with Marked.js
• Split-pane preview layout with Splitter
• Custom markdown syntax (Formatter property)
• Mention support in Markdown mode

Editor Value and State

📄 Read: references/editor-value.md

• Setting initial content (Value)
• Getting editor value programmatically
• Auto-save with SaveInterval
• Update value on form submit
• Setting cursor position (setRange)
• Character count display

Paste and Clipboard

📄 Read: references/paste-clipboard.md

• Paste cleanup configuration
• Handling paste events
• Restricting paste from external sources

Validation and Security

📄 Read: references/validation-security.md

• MaxLength with character count
• Form validation integration (required field)
• XHTML validation
• Prevent cross-site scripting (XSS)
• Read-only mode
• Disabling the editor

AI Assistant Integration

📄 Read: references/ai-assistant.md

• AICommands and AIQuery toolbar items
• AiAssistantPromptRequest event
• addAIPromptResponse method
• Streaming responses (typewriter effect)
• AI Assistant customization

Customization and Advanced

📄 Read: references/customization.md

• Custom CSS and style encapsulation
• Placeholder text and custom placeholder style
• Globalization (locale) and RTL support
• Third-party library integration
• Adding Google Fonts
• RTE inside Dialog or Tab

Accessibility and Keyboard Support

📄 Read: references/accessibility.md

• WCAG compliance
• Keyboard navigation shortcuts
• ARIA attributes
• Screen reader support

Events Reference

📄 Read: references/events.md

• Complete list of all Rich Text Editor events
• Event binding in ASP.NET MVC
• Lifecycle, focus, content change, and action events
• Image/media upload events
• Paste and clipboard events
• AI Assistant events
• Dialog and popup events
• Event usage patterns and best practices

Methods Reference

📄 Read: references/methods.md

• Comprehensive client-side method reference
• Content retrieval methods (getHtml, getText, getContent)
• Selection methods (selectAll, selectRange, getRange)
• Command execution (executeCommand)
• Toolbar manipulation methods
• Focus control methods
• Dialog and quick toolbar methods
• AI Assistant methods
• Component lifecycle methods

Properties Reference

📄 Read: references/properties.md

• Complete property reference for Rich Text Editor
• Core properties (Value, EditorMode, Height, Width)
• Toolbar and formatting properties
• Insert settings (image, video, audio, table, link)
• Editor mode settings (IFrame, Inline)
• Paste cleanup and security settings
• Auto-save and undo/redo configuration
• AI Assistant and emoji picker settings
• Localization and styling properties

Quick Start

HTML Mode (WYSIWYG)

View (Index.cshtml):

@(Html.EJS().RichTextEditor("editor")
    .Value(ViewBag.value)
    .Render())

Controller:

public ActionResult Index()
{
    ViewBag.value = "<p>Hello <b>World</b></p>";
    return View();
}

Coding Best Practices

Multi-Property Guidelines

When configuring the Rich Text Editor with multiple properties, it's essential to use the @(...) wrapper to ensure proper execution in ASP.NET MVC. Chain the methods across multiple lines for better readability.

Correct:

@(Html.EJS().RichTextEditor("editor")
    .Value(ViewBag.value)
    .ToolbarSettings(e => e.Items((object)ViewBag.tools))
    .Render())

Avoid:

@Html.EJS().RichTextEditor("editor").Value(ViewBag.value).Render()

Markdown Mode

@using Syncfusion.EJ2.RichTextEditor

@(Html.EJS().RichTextEditor("mdEditor")
    .EditorMode(EditorMode.Markdown)
    .Value(ViewBag.value)
    .Render())

public ActionResult Index()
{
    ViewBag.value = "**Hello** *World*";
    return View();
}

Common Patterns

Choosing HTML vs Markdown Mode

Configuring Toolbar

// In controller
ViewBag.tools = new object[] {
    "Bold", "Italic", "Underline", "|",
    "Formats", "Alignments", "OrderedList", "UnorderedList", "|",
    "CreateLink", "Image", "CreateTable", "|",
    "SourceCode", "Undo", "Redo"
};

@(Html.EJS().RichTextEditor("editor")
    .ToolbarSettings(e => e.Items((object)ViewBag.tools))
    .Value(ViewBag.value)
    .Render())

Use "|" for vertical separator and "-" for horizontal separator in toolbar items.

Key Properties