# rich-text-editor-default

> Rich text editor with file manager, image, mention, import/export, slash menu, code mirror source view, and full toolbar.

**Framework:** aspnet-mvc  **Component:** RichTextEditor  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/rich-text-editor-default.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.RichTextEditor
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/rich-text-editor-default/Overview.cshtml

```cshtml
@using Syncfusion.EJ2
@using EJ2MVCSampleBrowser.Models
@using Syncfusion.EJ2.DropDowns
@section ControlsSection{
    <div class="control-section">
        <div class="control-wrapper">
            @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()
            @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()
        </div>
    </div>
    @{
    #if RELEASE
        var cssFile = "~/Content/RichTextEditor/codemirror.css";
    #else
        var cssFile = "~/Content/RichTextEditor/codemirror.min.css";
    #endif
    }
    <link href="@Url.Content(cssFile)" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/css/css.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/htmlmixed/htmlmixed.js" type="text/javascript"></script>

    <style>
        .e-rte-code-mirror-enabled .rte-code-mirror {
            display: block !important;
            /* To show the custom source code view. */
        }

        .e-rte-code-mirror-enabled .e-rte-content {
            display: none !important;
            /* To hide the editor area when custom source code enabled. */
        }

        /** Mention template styles **/
        .editor-mention-item-template {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .em-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .em-avatar {
            width: 32px;
            height: 32px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 500;
            text-indent: 0px;
            line-height: 13px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .em-name {
            color: rgb(16, 24, 40);
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
            margin-bottom: 5px;
        }

        .em-email {
            color: gray;
            font-size: 12px;
            font-weight: 400;
            line-height: 14px;
        }

        #default_rte-edit-view_options li {
            padding: 10px !important;
            height: 60px;
        }

        body[class*="-dark"] .em-name {
            color: #fff !important;
        }

        /** custom source code styles **/
        body[class*="-dark"] .rte-code-mirror .cm-tag {
            color: #00ff00;
        }

        body[class*="-dark"] .rte-code-mirror .cm-string {
            color: blue;
        }

        body[class*="-dark"] .rte-code-mirror .cm-attribute {
            color: #f00;
        }

        body[class*="-dark"] .rte-code-mirror .CodeMirror-gutters,
        body[class*="-dark"] .rte-code-mirror .CodeMirror {
            background-color: transparent;
            color: #fff;
        }

        .sb-header {
            z-index: 100;
        }

        .sb-content.e-view.hide-header {
            top: 0 !important;
        }

        .sb-header.e-view.hide-header {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var rteObj, myCodeMirror, mentionObj;
        function created() {
            rteObj = this;
        }
        function MentionCreated() {
            mentionObj = this;
        }
        function mirrorConversion(e) {
            const id = rteObj.getID() + 'mirror-view';
            const rteContainer = rteObj.element.querySelector('.e-rte-container');
            let mirrorView = rteObj.element.querySelector('#' + id);
            if (e.targetItem === 'Preview') {
                rteObj.value = myCodeMirror.getValue();
                rteObj.dataBind();
                rteContainer.classList.remove('e-rte-code-mirror-enabled');
                rteObj.focusIn();
            } else {
                rteContainer.classList.add('e-rte-code-mirror-enabled');
                rteContainer.classList.remove('e-source-code-enabled');
                let editorValue = rteObj.element.querySelector('.e-rte-srctextarea').value;
                if (!mirrorView) {
                    mirrorView = ej.base.createElement('div', { className: 'rte-code-mirror', id: id, styles: 'display: none;' });
                    rteContainer.appendChild(mirrorView);
                    renderCodeMirror(mirrorView, editorValue === null ? '' : editorValue);
                }
                else {
                    myCodeMirror.setValue(editorValue === null ? '' : editorValue);
                }
                myCodeMirror.focus();
            }
        }
        function renderCodeMirror(mirrorView, content) {
            myCodeMirror = CodeMirror(mirrorView, {
                value: content,
                lineNumbers: true,
                mode: 'text/html',
                lineWrapping: true,
            });
        }
        function handleFullScreen(e) {
            var sbCntEle = document.querySelector('.sb-content.e-view');
            var sbHdrEle = document.querySelector('.sb-header.e-view');
            var sideBarElem = document.body.querySelector('#left-sidebar');
            var sideBar = ej.base.getComponent(sideBarElem, 'sidebar');
            var leftBar;
            var transformElement;
            if (ej.base.Browser.isDevice) {
                leftBar = document.querySelector('#right-sidebar');
                transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');
            }
            else {
                leftBar = document.querySelector('.sb-left-pane');
                transformElement = document.querySelector('#right-pane');
            }
            if (e.targetItem === 'Maximize') {
                if (ej.base.Browser.isDevice && ej.base.Browser.isIos) {
                    ej.base.addClass([sbCntEle, sbHdrEle], ['hide-header']);
                }
                sideBar.hide();
                if (!ej.base.Browser.isDevice) {
                    transformElement.style.marginLeft = '0px';
                }

                transformElement.style.transform = 'inherit';
                transformElement.style.zIndex = 1001;
            }
            else if (e.targetItem === 'Minimize') {
                if (ej.base.Browser.isDevice && ej.base.Browser.isIos) {
                    ej.base.removeClass([sbCntEle, sbHdrEle], ['hide-header']);
                }
                sideBar.show();
                if (!ej.base.Browser.isDevice) {
                    ej.base.addClass([leftBar], ['e-open']);
                }
                transformElement.style.transform = 'translateX(0px)';
                transformElement.style.zIndex = "";
            }
        }
        function actionBeginHandler(e) {
            if (e.requestType === 'EnterAction' && mentionObj.element.classList.contains('e-popup-open')) {
                e.cancel = true;
            }
            if (e.requestType === 'Maximize' || e.requestType === 'Minimize') {
                handleFullScreen(e);
            }
        }
        function actionCompleteHandler(e) {
            if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
                mirrorConversion(e);
            }
        }
    </script>
}

```

### src/components/rich-text-editor-default/OverviewController.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web.Mvc;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers
{
    public partial class RichTextEditorController : Controller
    {
        public ActionResult Overview()
        {
            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>";
            ViewData["Tools"] = new object[]  { "Undo", "Redo", "|", "ImportWord", "ExportWord", "ExportPdf", "|",
                "Bold", "Italic", "Underline", "StrikeThrough", "InlineCode", "|", "CreateLink", "Image", "CreateTable", "CodeBlock",
                "HorizontalLine", "Blockquote", "|", "LineHeight", "Formats", "Alignments", "|", "BulletFormatList", "NumberFormatList", "Checklist", "|", "Outdent", "Indent", "|",
                "FontColor", "BackgroundColor", "FontName", "FontSize", "|", "LowerCase", "UpperCase", "|", "SuperScript", "SubScript", "|",
                "EmojiPicker", "FileManager", "Video", "Audio", "|", "FormatPainter", "ClearFormat",
                "|", "Print", "FullScreen", "|", "SourceCode"};
            string hostUrl = "https://services.syncfusion.com/aspnet/production/";
            ViewData["AjaxSettings"] = new
            {
                url = hostUrl + "api/RichTextEditor/FileOperations",
                getImageUrl = hostUrl + "api/RichTextEditor/GetImage",
                uploadUrl = hostUrl + "api/RichTextEditor/Upload",
                downloadUrl = hostUrl + "api/RichTextEditor/Download"
            };
            ViewData["InsertImageSettings"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings
            {
                SaveUrl = hostUrl + "api/RichTextEditor/SaveFile",
                RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile",
                Path = hostUrl + "RichTextEditor/"
            };
            ViewData["Text"] = new[] {
                "Formats", "|", "Bold", "Italic", "Fontcolor", "BackgroundColor", "|", "CreateLink", "Image", "CreateTable", "Blockquote", "|", "Unorderedlist", "Orderedlist", "Indent", "Outdent"
            };
            ViewData["Table"] = new[] {
                "Tableheader", "TableRemove", "|", "TableRows", "TableColumns", "TableCell", "|" , "TableEditProperties", "TableCellProperties", "Styles", "BackgroundColor", "Alignments", "TableCellVerticalAlign"
            };
            ViewData["EmailData"] = new EmailDatas().EmailList();
            ViewData["ImportWord"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImportWord
            {
                ServiceUrl = hostUrl + "api/RichTextEditor/ImportFromWord",
            };
            ViewData["ExportWord"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorExportWord
            {
                ServiceUrl = hostUrl + "api/RichTextEditor/ExportToDocx",
                FileName = "RichTextEditor.docx",
                Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }"
            };

            ViewData["ExportPdf"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorExportPdf
            {
                ServiceUrl = hostUrl + "api/RichTextEditor/ExportToPdf",
                FileName = "RichTextEditor.pdf",
                Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }"
            };
            ViewData["SlashMenuSettings"] = new Syncfusion.EJ2.RichTextEditor.RichTextEditorSlashMenuSettings
            {
                Enable = true,
                Items = new object[] { "Paragraph", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "OrderedList", "UnorderedList",
            "CodeBlock", "Blockquote", "Link", "Image", "Video", "Audio", "Table", "Emojipicker"
                }
            };
            return View();
        }
    }
}

```