{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-default",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "default",
  "dependencies": [
    "Syncfusion.AspNetMvc.RichTextEditor"
  ],
  "description": "Rich text editor with file manager, image, mention, import/export, slash menu, code mirror source view, and full toolbar.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/rich-text-editor-default.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-default/Overview.cshtml",
      "content": "@using Syncfusion.EJ2\n@using EJ2MVCSampleBrowser.Models\n@using Syncfusion.EJ2.DropDowns\n@section ControlsSection{\n    <div class=\"control-section\">\n        <div class=\"control-wrapper\">\n            @Html.EJS().RichTextEditor(\"default\").QuickToolbarSettings(e => { e.Table((object)ViewData[\"Table\"]); e.Text((object)ViewData[\"Text\"]); e.ShowOnRightClick(true); }).ToolbarSettings(e => e.Items((object)ViewData[\"Tools\"])).FileManagerSettings(e => { e.Enable(true); e.AjaxSettings((object)ViewData[\"AjaxSettings\"]); }).ShowCharCount(true).Created(\"created\").Value((string)ViewData[\"RTEValue\"]).EnableXhtml(true).InsertImageSettings((Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings)ViewData[\"InsertImageSettings\"]).ImportWord((Syncfusion.EJ2.RichTextEditor.RichTextEditorImportWord)ViewData[\"ImportWord\"]).ExportWord((Syncfusion.EJ2.RichTextEditor.RichTextEditorExportWord)ViewData[\"ExportWord\"]).ExportPdf((Syncfusion.EJ2.RichTextEditor.RichTextEditorExportPdf)ViewData[\"ExportPdf\"]).SlashMenuSettings((Syncfusion.EJ2.RichTextEditor.RichTextEditorSlashMenuSettings)ViewData[\"SlashMenuSettings\"]).ActionBegin(\"actionBeginHandler\").ActionComplete(\"actionCompleteHandler\").EnableTabKey(true).Render()\n            @Html.EJS().Mention(\"mention\").Target(\"#default_rte-edit-view\").Created(\"MentionCreated\").SortOrder(SortOrder.Ascending).ItemTemplate(\"<div class=\\\"editor-mention-item-template\\\"><div class=\\\"em-header\\\"><div class=\\\"em-avatar\\\" style=\\\"background-color: ${BgColor}; color: ${Color}\\\"><div class=\\\"em-initial\\\">${Initial}</div></div></div><div class=\\\"em-content\\\"><div class=\\\"em-name\\\">${Name}</div><div class=\\\"em-email\\\">${Email}</div></div></div>\").NoRecordsTemplate(\"No item related to the search\").DisplayTemplate(\"<a href=mailto:${Name} title=${Email}> @${Name}</a>\").PopupWidth(\"250px\").PopupHeight(\"200px\").DataSource((IEnumerable<EmailDatas>)ViewData[\"EmailData\"]).Fields(new MentionFieldSettings { Text = \"Name\" }).Render()\n        </div>\n    </div>\n    @{\n    #if RELEASE\n        var cssFile = \"~/Content/RichTextEditor/codemirror.css\";\n    #else\n        var cssFile = \"~/Content/RichTextEditor/codemirror.min.css\";\n    #endif\n    }\n    <link href=\"@Url.Content(cssFile)\" rel=\"stylesheet\" />\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js\" type=\"text/javascript\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js\" type=\"text/javascript\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js\" type=\"text/javascript\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js\" type=\"text/javascript\"></script>\n\n    <style>\n        .e-rte-code-mirror-enabled .rte-code-mirror {\n            display: block !important;\n            /* To show the custom source code view. */\n        }\n\n        .e-rte-code-mirror-enabled .e-rte-content {\n            display: none !important;\n            /* To hide the editor area when custom source code enabled. */\n        }\n\n        /** Mention template styles **/\n        .editor-mention-item-template {\n            width: 100%;\n            height: 100%;\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n        }\n\n        .em-content {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n\n        .em-avatar {\n            width: 32px;\n            height: 32px;\n            text-align: center;\n            border-radius: 50%;\n            font-size: 12px;\n            font-weight: 500;\n            text-indent: 0px;\n            line-height: 13px;\n            color: #fff;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .em-name {\n            color: rgb(16, 24, 40);\n            font-size: 14px;\n            font-weight: 400;\n            line-height: 14px;\n            margin-bottom: 5px;\n        }\n\n        .em-email {\n            color: gray;\n            font-size: 12px;\n            font-weight: 400;\n            line-height: 14px;\n        }\n\n        #default_rte-edit-view_options li {\n            padding: 10px !important;\n            height: 60px;\n        }\n\n        body[class*=\"-dark\"] .em-name {\n            color: #fff !important;\n        }\n\n        /** custom source code styles **/\n        body[class*=\"-dark\"] .rte-code-mirror .cm-tag {\n            color: #00ff00;\n        }\n\n        body[class*=\"-dark\"] .rte-code-mirror .cm-string {\n            color: blue;\n        }\n\n        body[class*=\"-dark\"] .rte-code-mirror .cm-attribute {\n            color: #f00;\n        }\n\n        body[class*=\"-dark\"] .rte-code-mirror .CodeMirror-gutters,\n        body[class*=\"-dark\"] .rte-code-mirror .CodeMirror {\n            background-color: transparent;\n            color: #fff;\n        }\n\n        .sb-header {\n            z-index: 100;\n        }\n\n        .sb-content.e-view.hide-header {\n            top: 0 !important;\n        }\n\n        .sb-header.e-view.hide-header {\n            display: none;\n        }\n    </style>\n    <script type=\"text/javascript\">\n        var rteObj, myCodeMirror, mentionObj;\n        function created() {\n            rteObj = this;\n        }\n        function MentionCreated() {\n            mentionObj = this;\n        }\n        function mirrorConversion(e) {\n            const id = rteObj.getID() + 'mirror-view';\n            const rteContainer = rteObj.element.querySelector('.e-rte-container');\n            let mirrorView = rteObj.element.querySelector('#' + id);\n            if (e.targetItem === 'Preview') {\n                rteObj.value = myCodeMirror.getValue();\n                rteObj.dataBind();\n                rteContainer.classList.remove('e-rte-code-mirror-enabled');\n                rteObj.focusIn();\n            } else {\n                rteContainer.classList.add('e-rte-code-mirror-enabled');\n                rteContainer.classList.remove('e-source-code-enabled');\n                let editorValue = rteObj.element.querySelector('.e-rte-srctextarea').value;\n                if (!mirrorView) {\n                    mirrorView = ej.base.createElement('div', { className: 'rte-code-mirror', id: id, styles: 'display: none;' });\n                    rteContainer.appendChild(mirrorView);\n                    renderCodeMirror(mirrorView, editorValue === null ? '' : editorValue);\n                }\n                else {\n                    myCodeMirror.setValue(editorValue === null ? '' : editorValue);\n                }\n                myCodeMirror.focus();\n            }\n        }\n        function renderCodeMirror(mirrorView, content) {\n            myCodeMirror = CodeMirror(mirrorView, {\n                value: content,\n                lineNumbers: true,\n                mode: 'text/html',\n                lineWrapping: true,\n            });\n        }\n        function handleFullScreen(e) {\n            var sbCntEle = document.querySelector('.sb-content.e-view');\n            var sbHdrEle = document.querySelector('.sb-header.e-view');\n            var sideBarElem = document.body.querySelector('#left-sidebar');\n            var sideBar = ej.base.getComponent(sideBarElem, 'sidebar');\n            var leftBar;\n            var transformElement;\n            if (ej.base.Browser.isDevice) {\n                leftBar = document.querySelector('#right-sidebar');\n                transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');\n            }\n            else {\n                leftBar = document.querySelector('.sb-left-pane');\n                transformElement = document.querySelector('#right-pane');\n            }\n            if (e.targetItem === 'Maximize') {\n                if (ej.base.Browser.isDevice && ej.base.Browser.isIos) {\n                    ej.base.addClass([sbCntEle, sbHdrEle], ['hide-header']);\n                }\n                sideBar.hide();\n                if (!ej.base.Browser.isDevice) {\n                    transformElement.style.marginLeft = '0px';\n                }\n\n                transformElement.style.transform = 'inherit';\n                transformElement.style.zIndex = 1001;\n            }\n            else if (e.targetItem === 'Minimize') {\n                if (ej.base.Browser.isDevice && ej.base.Browser.isIos) {\n                    ej.base.removeClass([sbCntEle, sbHdrEle], ['hide-header']);\n                }\n                sideBar.show();\n                if (!ej.base.Browser.isDevice) {\n                    ej.base.addClass([leftBar], ['e-open']);\n                }\n                transformElement.style.transform = 'translateX(0px)';\n                transformElement.style.zIndex = \"\";\n            }\n        }\n        function actionBeginHandler(e) {\n            if (e.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {\n                e.cancel = true;\n            }\n            if (e.requestType === 'Maximize' || e.requestType === 'Minimize') {\n                handleFullScreen(e);\n            }\n        }\n        function actionCompleteHandler(e) {\n            if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {\n                mirrorConversion(e);\n            }\n        }\n    </script>\n}\n"
    },
    {
      "target": "src/components/rich-text-editor-default/OverviewController.cs",
      "content": "using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing System.Web.Mvc;\nusing EJ2MVCSampleBrowser.Models;\n\nnamespace EJ2MVCSampleBrowser.Controllers\n{\n    public partial class RichTextEditorController : Controller\n    {\n        public ActionResult Overview()\n        {\n            ViewData[\"RTEValue\"] = \"<h2>Welcome to the Syncfusion<sup>®</sup> Rich Text Editor</h2><p>The Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><h3>Do you know the key features of the editor?</h3><ul><li>Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.</li><li>Inline styles include <b>bold</b>, <em>italic</em>, <span style=\\\"text-decoration: underline\\\">underline</span>, <span style=\\\"text-decoration: line-through\\\">strikethrough</span>, <a href=\\\"https://ej2.syncfusion.com/demos/#/material/rich-text-editor/tools.html\\\">hyperlinks</a>, <code>InlineCode</code>, 😀 and more.</li><li>The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.</li><li>Integration with Syncfusion<sup>®</sup> Mention control lets users tag other users. To learn more, check out the <a href=\\\"https://ej2.syncfusion.com/documentation/rich-text-editor/mention-integration\\\">documentation</a> and <a href=\\\"https://ej2.syncfusion.com/demos/#/material/rich-text-editor/mention-integration.html\\\">demos</a>.</li><li><b>Paste from MS Word</b> - helps to reduce the effort while converting the Microsoft Word content to HTML format with format and styles. To learn more, check out the documentation <a href=\\\"https://ej2.syncfusion.com/documentation/rich-text-editor/paste-cleanup\\\">here</a>.</li><li>Other features: placeholder text, character count, form validation, enter key configuration, resizable editor, IFrame rendering, tooltip, source code view, RTL mode, persistence, HTML Sanitizer, autosave, and <a href=\\\"https://ej2.syncfusion.com/documentation/api/rich-text-editor/\\\">more</a>.</li></ul><h3>Auto Formatting – Write Faster, Format Smarter</h3><p>Boost your productivity with Auto Formatting, a powerful feature that lets you style content instantly using simple, familiar Markdown-style shortcuts. No need to reach for the toolbar — just type and watch your content transform in real time.</p><h4>Effortless Formatting Shortcuts</h4><table class=\\\"e-rte-table\\\"><thead><tr><th>Action</th><th>Shortcut</th></tr></thead><tbody><tr><td>Bulleted List</td><td>Start a line with <code>*</code> or <code>-</code> followed by a space</td></tr><tr><td>Numbered List</td><td>Start a line with <code>1.</code> or <code>i.</code> followed by a space</td></tr><tr><td>Checklist / To-do</td><td>Start a line with <code>[ ]</code> or <code>[x]</code> followed by a space</td></tr><tr><td>Headings (H1 to H6)</td><td>Use <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, or <code>######</code> followed by a space</td></tr><tr><td>Block Quote</td><td>Start a line with <code>&gt;</code> followed by a space</td></tr><tr><td>Code Block</td><td>Start a line with <code>```</code> followed by a space</td></tr><tr><td>Horizontal Line</td><td>Start a line with <code>---</code> followed by a space</td></tr><tr><td>Bold Text</td><td>Type <code>**text**</code> or <code>__text__</code></td></tr><tr><td>Italic Text</td><td>Type <code>*text*</code> or <code>_text_</code></td></tr><tr><td>Inline Code</td><td>Type <code>`text`</code></td></tr><tr><td>Strikethrough</td><td>Type <code>~~text~~</code></td></tr></tbody></table><h3>Elevating Your Content with Images</h3><p>Images can be added to the editor by pasting or dragging into the editing area, using the toolbar to insert one as a URL, or uploading directly from the File Browser. Easily manage your images on the server by configuring the <a href=\\\"https://ej2.syncfusion.com/documentation/api/rich-text-editor/#insertimagesettings\\\">insertImageSettings</a> to upload, save, or remove them.</p><p>The Editor can integrate with the Syncfusion<sup>®</sup> Image Editor to crop, rotate, annotate, and apply filters to images. Check out the demos <a href=\\\"https://ej2.syncfusion.com/demos/#/material/rich-text-editor/image-editor-integration.html\\\">here</a>.</p><p><img src=\\\"https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png\\\" alt=\\\"Sky with sun\\\" style=\\\"width:440px;\\\"></p><blockquote><p><em>Easily access Audio, Image, Link, Video, and Table operations through the quick toolbar by right-clicking on the corresponding element with your mouse.</em></p></blockquote>\";\n            ViewData[\"Tools\"] = new object[]  { \"Undo\", \"Redo\", \"|\", \"ImportWord\", \"ExportWord\", \"ExportPdf\", \"|\",\n                \"Bold\", \"Italic\", \"Underline\", \"StrikeThrough\", \"InlineCode\", \"|\", \"CreateLink\", \"Image\", \"CreateTable\", \"CodeBlock\",\n                \"HorizontalLine\", \"Blockquote\", \"|\", \"LineHeight\", \"Formats\", \"Alignments\", \"|\", \"BulletFormatList\", \"NumberFormatList\", \"Checklist\", \"|\", \"Outdent\", \"Indent\", \"|\",\n                \"FontColor\", \"BackgroundColor\", \"FontName\", \"FontSize\", \"|\", \"LowerCase\", \"UpperCase\", \"|\", \"SuperScript\", \"SubScript\", \"|\",\n                \"EmojiPicker\", \"FileManager\", \"Video\", \"Audio\", \"|\", \"FormatPainter\", \"ClearFormat\",\n                \"|\", \"Print\", \"FullScreen\", \"|\", \"SourceCode\"};\n            string hostUrl = \"https://services.syncfusion.com/aspnet/production/\";\n            ViewData[\"AjaxSettings\"] = new\n            {\n                url = hostUrl + \"api/RichTextEditor/FileOperations\",\n                getImageUrl = hostUrl + \"api/RichTextEditor/GetImage\",\n                uploadUrl = hostUrl + \"api/RichTextEditor/Upload\",\n                downloadUrl = hostUrl + \"api/RichTextEditor/Download\"\n            };\n            ViewData[\"InsertImageSettings\"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings\n            {\n                SaveUrl = hostUrl + \"api/RichTextEditor/SaveFile\",\n                RemoveUrl = hostUrl + \"api/RichTextEditor/DeleteFile\",\n                Path = hostUrl + \"RichTextEditor/\"\n            };\n            ViewData[\"Text\"] = new[] {\n                \"Formats\", \"|\", \"Bold\", \"Italic\", \"Fontcolor\", \"BackgroundColor\", \"|\", \"CreateLink\", \"Image\", \"CreateTable\", \"Blockquote\", \"|\", \"Unorderedlist\", \"Orderedlist\", \"Indent\", \"Outdent\"\n            };\n            ViewData[\"Table\"] = new[] {\n                \"Tableheader\", \"TableRemove\", \"|\", \"TableRows\", \"TableColumns\", \"TableCell\", \"|\" , \"TableEditProperties\", \"TableCellProperties\", \"Styles\", \"BackgroundColor\", \"Alignments\", \"TableCellVerticalAlign\"\n            };\n            ViewData[\"EmailData\"] = new EmailDatas().EmailList();\n            ViewData[\"ImportWord\"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImportWord\n            {\n                ServiceUrl = hostUrl + \"api/RichTextEditor/ImportFromWord\",\n            };\n            ViewData[\"ExportWord\"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorExportWord\n            {\n                ServiceUrl = hostUrl + \"api/RichTextEditor/ExportToDocx\",\n                FileName = \"RichTextEditor.docx\",\n                Stylesheet = \".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }\"\n            };\n\n            ViewData[\"ExportPdf\"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorExportPdf\n            {\n                ServiceUrl = hostUrl + \"api/RichTextEditor/ExportToPdf\",\n                FileName = \"RichTextEditor.pdf\",\n                Stylesheet = \".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }\"\n            };\n            ViewData[\"SlashMenuSettings\"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorSlashMenuSettings\n            {\n                Enable = true,\n                Items = new object[] { \"Paragraph\", \"Heading 1\", \"Heading 2\", \"Heading 3\", \"Heading 4\", \"OrderedList\", \"UnorderedList\",\n            \"CodeBlock\", \"Blockquote\", \"Link\", \"Image\", \"Video\", \"Audio\", \"Table\", \"Emojipicker\"\n                }\n            };\n            return View();\n        }\n    }\n}\n"
    }
  ]
}