# rich-text-editor-default > Rich text editor sample with formatting tools for composing and editing content. **Framework:** angular **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/angular/rich-text-editor-default.json ``` **Install Package(s)** ```bash npm install @syncfusion/ej2-angular-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/tools.component.ts ```typescript /** * Rich Text Editor Overview Sample */ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgStyle } from '@angular/common'; import { ToolbarService, LinkService, ImageService, HtmlEditorService, EmojiPickerService, VideoService, AudioService, FormatPainterService, RichTextEditorModule, QuickToolbarService, PasteCleanupService, CountService, ToolbarSettingsModel, ImageSettingsModel, ActionBeginEventArgs, CodeBlockService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor'; import { RichTextEditorComponent, TableService, FileManagerService, SlashMenuService, ImportExportService } from '@syncfusion/ej2-angular-richtexteditor'; import { FileManagerSettingsModel, QuickToolbarSettingsModel, SlashMenuSettingsModel, ExportPdfModel, ExportWordModel, ImportWordModel } from '@syncfusion/ej2-angular-richtexteditor'; import { createElement, addClass, removeClass, Browser, getComponent } from '@syncfusion/ej2-base'; import * as CodeMirror from 'codemirror'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/css/css.js'; import 'codemirror/mode/htmlmixed/htmlmixed.js'; import { Sidebar } from '@syncfusion/ej2-navigations'; import { MentionComponent, MentionModule } from '@syncfusion/ej2-angular-dropdowns'; @Component({ selector: 'control-content', templateUrl: 'tools.html', encapsulation: ViewEncapsulation.None, providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService, FileManagerService, EmojiPickerService, VideoService, AudioService, FormatPainterService, QuickToolbarService, PasteCleanupService, CountService, SlashMenuService, ImportExportService, CodeBlockService, ClipBoardCleanupService, AutoFormatService], standalone: true, imports: [ RichTextEditorModule, MentionModule, NgStyle] }) export class FullFeatureComponent { @ViewChild('toolsRTE') public rteObj!: RichTextEditorComponent; @ViewChild('editorMention') public mention!: MentionComponent; public emailData: { [key: string]: Object }[] = [ { name: "Selma Rose", initial: 'SR', email: "selma@gmail.com", color: '#FAFDFF', bgColor: '#01579B' }, { name: "Maria", initial: 'MA', email: "maria@gmail.com", color: '#004378', bgColor: '#ADDBFF' }, { name: "Russo Kay", initial: 'RK', email: "russo@gmail.com", color: '#F9DEDC', bgColor: '#8C1D18' }, { name: "Robert", initial: 'RO', email: "robert@gmail.com", color: '#FFD6F7', bgColor: '#37003A' }, { name: "Camden Kate", initial: 'CK', email: "camden@gmail.com", color: '#FFFFFF', bgColor: '#464ECF' }, { name: "Garth", initial: 'GA', email: "garth@gmail.com", color: '#FFFFFF', bgColor: '#008861' }, { name: "Andrew James", initial: 'AJ', email: "james@gmail.com", color: '#FFFFFF', bgColor: '#53CA17' }, { name: "Olivia", initial: 'OL', email: "olivia@gmail.com", color: '#FFFFFF', bgColor: '#8C1D18' }, { name: "Sophia", initial: 'SO', email: "sophia@gmail.com", color: '#000000', bgColor: '#D0BCFF' }, { name: "Margaret", initial: 'MA', email: "margaret@gmail.com", color: '#000000', bgColor: '#F2B8B5' }, { name: "Ursula Ann", initial: 'UA', email: "ursula@gmail.com", color: '#000000', bgColor: '#47ACFB' }, { name: "Laura Grace", initial: 'LG', email: "laura@gmail.com", color: '#000000', bgColor: '#FFE088' }, { name: "Albert", initial: 'AL', email: "albert@gmail.com", color: '#FFFFFF', bgColor: '#00335B' }, { name: "William", initial: 'WA', email: "william@gmail.com", color: '#FFFFFF', bgColor: '#163E02' } ]; public fields: Object = { text: 'name' }; private hostUrl: string = 'https://services.syncfusion.com/angular/production/'; public tools: ToolbarSettingsModel = { items: [ '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'] }; public insertImageSettings: ImageSettingsModel = { saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile', removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile', path: this.hostUrl + 'RichTextEditor/' } public fileManagerSettings: FileManagerSettingsModel = { enable: true, ajaxSettings: { url: this.hostUrl + 'api/RichTextEditor/FileOperations', getImageUrl: this.hostUrl + 'api/RichTextEditor/GetImage', uploadUrl: this.hostUrl + 'api/RichTextEditor/Upload', downloadUrl: this.hostUrl + 'api/RichTextEditor/Download' } }; public quickToolbarSettings: QuickToolbarSettingsModel = { table: ['Tableheader', 'TableRemove', '|', 'TableRows', 'TableColumns', 'TableCell', '|', 'TableEditProperties', 'TableCellProperties', 'Styles', 'BackgroundColor', 'Alignments', 'TableCellVerticalAlign'], text: ['Formats', '|', 'Bold', 'Italic', 'Fontcolor', 'BackgroundColor', '|', 'CreateLink', 'Image', 'CreateTable', 'Blockquote', '|' , 'Unorderedlist', 'Orderedlist', 'Indent', 'Outdent'], showOnRightClick: true, }; public placeholder: string = 'Type something or use @ to tag a user...'; public slashMenuSettings: SlashMenuSettingsModel = { enable: true, items: ['Paragraph', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'OrderedList', 'UnorderedList', 'CodeBlock', 'Blockquote', 'Link', 'Image', 'Video', 'Audio', 'Table', 'Emojipicker', ] }; public importWord: ImportWordModel = { serviceUrl: this.hostUrl + 'api/RichTextEditor/ImportFromWord', }; public exportWord: ExportWordModel = { serviceUrl: this.hostUrl + 'api/RichTextEditor/ExportToDocx', fileName: 'RichTextEditor.docx', stylesheet: ` .e-rte-content { font-size: 1em; font-weight: 400; margin: 0; } ` }; public exportPdf: ExportPdfModel = { serviceUrl: this.hostUrl + 'api/RichTextEditor/ExportToPdf', fileName: 'RichTextEditor.pdf', stylesheet: ` .e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; } ` }; public codeMirror: any; public mirrorConversion(e?: any): void { const id: string = this.rteObj.getID() + 'mirror-view'; let mirrorView: HTMLElement = this.rteObj.element.querySelector('#' + id) as HTMLElement; if (e.targetItem === 'Preview') { this.rteObj.value = this.codeMirror.getValue(); this.rteObj.dataBind(); this.rteObj.rootContainer.classList.remove('e-rte-code-mirror-enabled'); this.rteObj.focusIn(); } else { this.rteObj.rootContainer.classList.add('e-rte-code-mirror-enabled'); this.rteObj.rootContainer.classList.remove('e-source-code-enabled'); const editorVlaue: string = (this.rteObj.element.querySelector('.e-rte-srctextarea') as HTMLTextAreaElement).value; if (!mirrorView) { mirrorView = createElement('div', { className: 'rte-code-mirror', id: id, styles: 'display: none;' }); this.rteObj.rootContainer.appendChild(mirrorView); this.renderCodeMirror(mirrorView, editorVlaue === null ? '' : editorVlaue); } else { this.codeMirror.setValue(editorVlaue); } this.codeMirror.focus(); } } public renderCodeMirror(mirrorView: HTMLElement, content: string): void { const editorFactory = (CodeMirror as any).default ?? CodeMirror; this.codeMirror = editorFactory(mirrorView, { value: content, lineNumbers: true, mode: 'text/html', lineWrapping: true, }); } public handleFullScreen(e: any): void { const sbCntEle = document.querySelector('.sb-content.e-view') as HTMLElement | null; const sbHdrEle = document.querySelector('.sb-header.e-view') as HTMLElement | null; const leftBar = document.querySelector('#left-sidebar') as HTMLElement | null; const sideBarElem = document.body.querySelector('#left-sidebar') as HTMLElement | null; const sideBar = sideBarElem ? (getComponent(sideBarElem, 'sidebar') as Sidebar | undefined) : undefined; if (e.targetItem === 'Maximize') { if (Browser.isDevice && Browser.isIos) { if (sbCntEle) addClass([sbCntEle], ['hide-header']); if (sbHdrEle) addClass([sbHdrEle], ['hide-header']); } if (sideBar){ sideBar.hide(); } } else if (e.targetItem === 'Minimize') { if (Browser.isDevice && Browser.isIos) { if (sbCntEle) removeClass([sbCntEle], ['hide-header']); if (sbHdrEle) removeClass([sbHdrEle], ['hide-header']); } if (sideBar) { sideBar.show(); } if (!Browser.isDevice && leftBar) { addClass([leftBar], ['e-open']); } } } public actionCompleteHandler(e: any): void { if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) { this.mirrorConversion(e); } } public actionBeginHandler(e: ActionBeginEventArgs): void { if (e.requestType === 'Maximize' || e.requestType === 'Minimize') { this.handleFullScreen(e); } } } ``` ### src/components/rich-text-editor-default/tools.html ```html

Welcome to the Angular Rich Text Editor

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.

Do you know the key features of the editor?

  • Basic features include headings, block quotes, numbered lists, bullet lists, and support to insert images, tables, audio, and video.
  • Inline styles include bold, italic, underline, strikethrough, hyperlinks,InlineCode, 😀 and more.
  • The toolbar has multi-row, expandable, and scrollable modes. The Editor supports an inline toolbar, a floating toolbar, and custom toolbar items.
  • Integration with Syncfusion® Mention control lets users tag other users. To learn more, check out the documentation and demos.
  • Paste from MS Word - 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 here.
  • 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 more.

Auto Formatting – Write Faster, Format Smarter

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.

Effortless Formatting Shortcuts

Action Shortcut
Bulleted List Start a line with * or - followed by a space
Numbered List Start a line with 1. or i. followed by a space
Checklist / To-do Start a line with [ ] or [x] followed by a space
Headings (H1 to H6) Use #, ##, ###, ####, #####, or ###### followed by a space
Block Quote Start a line with > followed by a space
Code Block Start a line with ``` followed by a space
Horizontal Line Start a line with --- followed by a space
Bold Text Type **text** or __text__
Italic Text Type *text* or _text_
Inline Code Type `text`
Strikethrough Type ~~text~~

Elevating Your Content with Images

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 insertImageSettings to upload, save, or remove them.

The Editor can integrate with the Syncfusion® Image Editor to crop, rotate, annotate, and apply filters to images. Check out the demos here.

Sky with sun

Easily access Audio, Image, Link, Video, and Table operations through the quick toolbar by right-clicking on the corresponding element with your mouse.

 @{{data.name}}
{{data.initial}}
{{data.name}}
```