Skip to main content Startseite Ersteller syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-rich-text-editor
syncfusion-aspnetcore-rich-text-editor Implements the Syncfusion ASP.NET Core Rich Text Editor (ejs-richtexteditor tag helper) supporting HTML (WYSIWYG) and Markdown editing modes. Set editorMode='Markdown' for Markdown; default is HTML. Use this skill for toolbar configuration, image upload, table editing, inline or iframe mode, AI assistant integration, mentions, and form validation with rich text in ASP.NET Core projects.
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-rich-text-editorDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... name syncfusion-aspnetcore-rich-text-editor description Implements the Syncfusion ASP.NET Core Rich Text Editor (ejs-richtexteditor tag helper) supporting HTML (WYSIWYG) and Markdown editing modes. Set editorMode='Markdown' for Markdown; default is HTML. Use this skill for toolbar configuration, image upload, table editing, inline or iframe mode, AI assistant integration, mentions, and form validation with rich text in ASP.NET Core projects. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
Implementing the Syncfusion ASP.NET Core Rich Text Editor
The Syncfusion ASP.NET Core Rich Text Editor (<ejs-richtexteditor>) is a single component that supports two editing modes:
HTML mode (default) — WYSIWYG editor producing valid HTML markupMarkdown mode (editorMode="Markdown") — plain-text markdown editor with optional HTML preview
Both modes share the same tag helper, toolbar system, events, and most features. Choose the mode based on what your output format needs to be.
Editor Mode Decision
User wants to edit formatted content → output is HTML?
└─ Use default HTML mode (no editorMode needed)
User wants to write/edit Markdown text?
└─ Set editorMode="Markdown"
└─ Add Marked.js for live preview (see references/markdown-features.md)
When to Use This Skill
Adding a rich text / WYSIWYG editor to an ASP.NET Core Razor page or MVC view
Implementing a Markdown editor in ASP.NET Core
Configuring toolbars, toolbar types, or custom toolbar tools
Handling image, video, or audio uploads within the editor
Inserting and managing tables
Enabling inline editing, iframe mode, or resizable editor
Integrating AI assistant, mentions, emoji picker, slash menu, or mail merge
Getting, setting, or saving editor values; auto-save; character count
Form validation with rich text content
Read-only or disabled editor states
XSS prevention and security
Accessibility, keyboard support, globalization, RTL
Handling editor events (lifecycle, focus, toolbar, upload, dialog, AI)
Looking up available properties, types, and defaults
Calling editor methods programmatically from JavaScript
Navigation Guide
Getting Started
NuGet installation and tag helper registration
CDN stylesheet and script references
Basic HTML editor (default mode)
Basic Markdown editor (editorMode="Markdown")
Initial value binding via ViewBag
Toolbar configuration basics
Editor Modes & Display Options
HTML mode vs Markdown mode (editorMode property)
IFrame mode for isolated editing (iframeSettings)
Inline editing mode (inlineMode)
Resizable editor (enableResize)
Setting editor height and width
Toolbar Configuration
Toolbar types: Expand, MultiRow, Scrollable, Popup
Sticky / floating toolbar (enableFloating, floatingToolbarOffset)
Toolbar position (top / bottom)
Quick toolbar for images, links, text, and tables
HTML mode toolbar items reference
Markdown mode toolbar items reference
Text Formatting
Basic text styles: Bold, Italic, Underline, StrikeThrough, InlineCode
Font name, size, color, background color
Headings and paragraph formats
Text alignments and indent/outdent
Lists (ordered/unordered), blockquote, quotation formatting
Markdown Features
Full supported markdown syntax reference
Custom markdown format configuration
Live Markdown-to-HTML preview with Marked.js
Table and image insertion in Markdown mode
Mention support in Markdown mode
Media & Links
Image insertion, upload to server, drag-and-drop
Image quick toolbar (caption, alt text, dimensions, alignment)
Video and audio insertion
Link insertion and quick toolbar
File browser integration
Tables
Inserting tables and configuring the CreateTable tool
Table quick toolbar (rows, columns, merge, split, styles)
Cell properties, background color, alignment
Nesting tables
Table selection and copy/paste
Smart Editing Features
Emoji picker
Slash menu
Mentions integration with the Mention component
Mail merge
Format painter
Code block formatting
AI Assistant
Enabling AICommands and AIQuery toolbar items
Streaming and non-streaming AI response handling
AiAssistantPromptRequest eventaddAIPromptResponse method
Editor Value & Content Management
Getting and setting HTML/Markdown values
getHtml(), getText(), getCharCount() methodsAuto-save with saveInterval
Placeholder text
Character count (showCharCount, maxLength)
HTML-encoded value (enableHtmlEncode)
Source code / code view editing
Paste and clipboard cleanup
Import and export (Word/PDF)
Undo/redo management
Validation & Security
Form validation integration (FormValidator)
Read-only mode (readonly)
Disable editor (enabled)
XSS prevention (enableHtmlSanitizer, beforeSanitizeHtml)
XHTML validation
Style encapsulation
Customization
Custom toolbar tools (template-based buttons)
Built-in toolbar items reference
CSS styling and theme customization
Enter key / Shift+Enter key behavior (enterKey, shiftEnterKey)
execCommand API for programmatic formattingThird-party integrations (CodeMirror)
enableToolbarItem / disableToolbarItem methods
Accessibility & Globalization
WCAG 2.2 AA compliance
ARIA roles and attributes
Keyboard shortcuts (HTML and Markdown modes)
Localization and globalization (locale, enableRtl)
Events
Lifecycle events: Created, Destroyed
Focus/blur events: Focus, Blur, Change
Toolbar/command events: ActionBegin, ActionComplete
Paste/clipboard events: BeforePasteCleanup, AfterPasteCleanup, BeforeClipboardWrite
Dialog events: BeforeDialogOpen, DialogOpen, BeforeDialogClose, DialogClose
Popup events: BeforePopupOpen, BeforePopupClose, BeforeQuickToolbarOpen
Image upload events: ImageSelected, BeforeImageUpload, ImageUploading, ImageUploadSuccess, ImageUploadFailed, ImageRemoving, AfterImageDelete, BeforeImageDrop
Media upload events: FileSelected, BeforeFileUpload, FileUploading, FileUploadSuccess, FileUploadFailed, FileRemoving, AfterMediaDelete, BeforeMediaDrop
Security events: BeforeSanitizeHtml
Export events: DocumentExporting
AI Assistant events: AiAssistantPromptRequest, AiAssistantStopRespondingClick, AiAssistantToolbarClick
Properties
Complete property reference with types, defaults, and descriptions
Core properties: Value, EditorMode, Placeholder, CssClass, Locale
State flags: Enabled, Readonly, EnableResize, EnablePersistence, EnableRtl, EnableTabKey
Content & encoding: EnableHtmlEncode, EnableHtmlSanitizer, EnableXhtml, EnableAutoUrl, EnableClipboardCleanup
Character count & auto-save: ShowCharCount, MaxLength, SaveInterval, AutoSaveOnIdle
Key behavior: EnterKey, ShiftEnterKey, FloatingToolbarOffset
Undo/redo: UndoRedoSteps, UndoRedoTimer
Complex settings objects: ToolbarSettings, QuickToolbarSettings, IframeSettings, InlineMode, InsertImageSettings, InsertVideoSettings, InsertAudioSettings, PasteCleanupSettings, TableSettings, FontFamily, FontColor, BackgroundColor, Format, SlashMenuSettings, EmojiPickerSettings, FormatPainterSettings, CodeBlockSettings, AiAssistantSettings, ImportWordSettings, ExportWordSettings, ExportPdfSettings, FileManagerSettings
Methods
Content methods: getHtml(), getText(), getContent(), getSelectedHtml(), getXhtml(), getCharCount(), selectAll(), selectRange(), print()
Command execution: executeCommand() with full CommandName enum reference
Toolbar methods: enableToolbarItem(), disableToolbarItem(), removeToolbarItem()
Focus methods: focusIn(), focusOut()
Inline toolbar: showInlineToolbar(), hideInlineToolbar()
Dialog methods: showDialog(), closeDialog()
Undo/redo: clearUndoRedo()
Source code: showSourceCode()
Full screen: showFullScreen()
Emoji picker: showEmojiPicker()
AI Assistant: addAIPromptResponse(), executeAIPrompt(), getAIPromptHistory(), clearAIPromptHistory(), showAIAssistantPopup(), hideAIAssistantPopup()
Lifecycle: refresh(), refreshUI(), dataBind(), destroy()
Security: sanitizeHtml()
Quick Start
HTML Editor (default) <!-- _ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2
<!-- _Layout.cshtml <head> -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<!-- _Layout.cshtml <body> end -->
<ejs-scripts></ejs-scripts>
<!-- Index.cshtml -->
<ejs-richtexteditor id="editor" value="@ViewBag.value">
<e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
public ActionResult Index ()value = "<p>Start editing here...</p>" ;
ViewBag.tools = new [] {
"Bold" , "Italic" , "Underline" , "|" ,
"Formats" , "Alignments" , "OrderedList" , "UnorderedList" , "|" ,
"CreateLink" , "Image" , "CreateTable" , "|" ,
"SourceCode" , "|" , "Undo" , "Redo"
};
return View();
}
Markdown Editor <ejs-richtexteditor id="markdown-editor" editorMode="Markdown" value="@ViewBag.value">
<e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
public ActionResult Index ()value = "**Hello World** — start writing *markdown* here." ;
ViewBag.tools = new [] {
"Bold" , "Italic" , "StrikeThrough" , "InlineCode" , "|" ,
"Formats" , "Blockquote" , "OrderedList" , "UnorderedList" , "|" ,
"CreateLink" , "Image" , "CreateTable" , "|" , "Undo" , "Redo"
};
return View();
}
Common Patterns
Read editor value on form submit <form id="form-element">
<ejs-richtexteditor id="rte" name="rteContent" value="@ViewBag.value"></ejs-richtexteditor>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').onsubmit = function () {
var rte = document.getElementById('rte').ej2_instances[0];
console.log(rte.getHtml());
};
</script>
Image upload to server <ejs-richtexteditor id="editor">
<e-richtexteditor-insertimagesettings
saveUrl="/Home/SaveImage"
removeUrl="/Home/RemoveImage"
path="./Uploads/">
</e-richtexteditor-insertimagesettings>
</ejs-richtexteditor>
Inline editing <ejs-richtexteditor id="inline" value="@ViewBag.value">
<e-richtexteditor-inlinemode enable="true" onSelection="true"></e-richtexteditor-inlinemode>
</ejs-richtexteditor>
Character count with limit <ejs-richtexteditor id="editor" showCharCount="true" maxLength="500" value="@ViewBag.value">
</ejs-richtexteditor>
Mehr aus diesem Repository syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core 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-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
