Skip to main content Home Creators syncfusion aspnetmvc-ui-components-skills syncfusion-aspnetmvc-richtexteditor
syncfusion-aspnetmvc-richtexteditor Implement Syncfusion ASP.NET MVC Rich Text Editor for HTML and Markdown editing. This skill covers editor setup with the EJ2 RichTextEditor HTML helper, including WYSIWYG and Markdown modes. Use this when working with toolbar configuration, editor modes (HTML, Markdown, IFrame, Inline), content management, media insertion, smart editing features (@mentions, emoji picker), paste cleanup, form validation, and AI assistant integration.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/aspnetmvc-ui-components-skills --skill syncfusion-aspnetmvc-richtexteditorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-aspnetmvc-richtexteditor description Implement Syncfusion ASP.NET MVC Rich Text Editor for HTML and Markdown editing. This skill covers editor setup with the EJ2 RichTextEditor HTML helper, including WYSIWYG and Markdown modes. Use this when working with toolbar configuration, editor modes (HTML, Markdown, IFrame, Inline), content management, media insertion, smart editing features (@mentions, emoji picker), paste cleanup, form validation, and AI assistant integration. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
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
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
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
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
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
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
Insert and configure tables
Table properties and toolbar
Insert and edit hyperlinks
Quick toolbar for tables and links
Smart Editing Features
Mention support (@ tagging users/objects)
Emoji picker
Slash commands menu
Mail merge fields
Markdown Mode
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
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
Paste cleanup configuration
Handling paste events
Restricting paste from external sources
Validation and Security
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
AICommands and AIQuery toolbar items
AiAssistantPromptRequest eventaddAIPromptResponse methodStreaming responses (typewriter effect)
AI Assistant customization
Customization and Advanced
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
WCAG compliance
Keyboard navigation shortcuts
ARIA attributes
Screen reader support
Events Reference
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
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
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) @(Html.EJS().RichTextEditor("editor")
.Value(ViewBag.value)
.Render())
public ActionResult Index ()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.
@(Html.EJS().RichTextEditor("editor")
.Value(ViewBag.value)
.ToolbarSettings(e => e.Items((object)ViewBag.tools))
.Render())
@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 ()value = "**Hello** *World*" ;
return View();
}
Common Patterns
Choosing HTML vs Markdown Mode Situation Use Rich formatted output stored as HTML EditorMode.HTML (default)Plain-text Markdown stored in DB EditorMode.MarkdownNeed live preview of markdown EditorMode.Markdown + Marked.js + SplitterNeed to render editor inside iframe for style isolation IframeSettings.Enable(true)Edit content inline on the page (no fixed toolbar) InlineMode.Enable(true)
Configuring Toolbar
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 Property Type Purpose EditorModeEditorModeHTML (default) or MarkdownValuestringInitial editor content ToolbarSettingsObject Toolbar items and type IframeSettingsObject Enable iframe editing mode InlineModeObject Enable inline editing MaxLengthintMaximum character limit ShowCharCountboolShow character count SaveIntervalintAuto-save interval (ms) PlaceholderstringPlaceholder text ReadOnlyboolMake editor read-only EnabledboolEnable/disable the editor HeightstringEditor height
More from this repository syncfusion-aspnetmvc-grid Implements Syncfusion EJ2 ASP.NET MVC Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetmvc-pivot-table Use this skill when users ask how to add or configure Syncfusion PivotView/pivot tables in ASP.NET MVC apps. Trigger for MVC integration, data binding, OLAP/cube setup, aggregation, drill-down/drill-through, grouping, filtering, conditional formatting, exporting, or pivot charts. MVC-only, not Core/Blazor/JS.
syncfusion-aspnetmvc-ai-assistview Implement the Syncfusion ASP.NET MVC AI AssistView component — a conversational AI chat interface with prompt/response rendering, prompt suggestions, custom views, toolbar customization, file attachments, speech-to-text, AI backend integrations (Azure OpenAI, Gemini, Ollama, LiteLLM), generative UI with interactive tools, Chain of Thoughts reasoning visualization and text-to-speech audio playback. Use this skill when building AI chat UIs, integrating LLM backends, configuring assistant toolbars, customizing templates, rendering dynamic UI components, or handling voice input/output in ASP.NET MVC applications.
Related occupations SOC
Based on SOC occupation classification
