RichTextEditorComponent

10 Oct 202524 minutes to read

ejs-richtexteditor represents the Angular richtexteditor Component.

<ejs-richtexteditor></ejs-richtexteditor>

Properties

autoSaveOnIdle boolean

Enables or disables the auto-save option, which performs the save action during idle states after content changes.
If enabled, the editor will save content in idle state based on the saveInterval property’s value.
The change event is triggered if the content has been modified since the last saved state.

Defaults to false

backgroundColor BackgroundColorModel

Defines the color palette for the background color (text highlight color) toolbar command.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    selector: 'app-root',
    template: " <ejs-richtexteditor [toolbarSettings]='tools' [backgroundColor]='backgroundColor' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public backgroundColor: BackgroundColorModel = { columns: 2, colorCode: { 'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}, showRecentColors: true, modeSwitcher: false };
    public tools = {
        items: [ 'BackgroundColor' ]
    };
}

Defaults to {columns: 5,modeSwitcher: false,showRecentColors: true,colorCode: {‘Custom’: [‘#ffff00’, ‘#00ff00’, ‘#00ffff’, ‘#ff00ff’, ‘#0000ff’, ‘#ff0000’,’#000080’, ‘#008080’, ‘#008000’, ‘#800080’, ‘#800000’, ‘#808000’,’#c0c0c0’, ‘#000000’, ‘’]}}

bulletFormatList BulletFormatListModel

Predefines advanced list types that populate the bulletFormatList dropdown in the toolbar.

Defaults to {types: [{ text: ‘None’, value: ‘none’ },{ text: ‘Disc’, value: ‘disc’ },{ text: ‘Circle’, value: ‘circle’ },{ text: ‘Square’, value: ‘square’ }]}

codeBlockSettings CodeBlockSettingsModel

Predefines advanced list types that populate the code block dropdown in the toolbar.

import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, TableService, ToolbarSettingsModel, CodeBlockService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [
        RichTextEditorModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [placeholder]='placeholder' [codeBlockSettings]='codeBlockSettings' ></ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, TableService, CodeBlockService]
})

export class AppComponent {
    public placeholder: string = 'Type something...';
    public tools: ToolbarSettingsModel = {
        items: ['Undo', 'Redo', '|', 'CodeBlock', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Image', 'CreateTable', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
            'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'EmojiPicker', '|', 'SourceCode']
    };
    public codeBlockSettings = {
        languages: [
            { label: "HTML", language: "html" },
            { label: "JavaScript", language: "javascript" },
            { label: "CSS", language: "css" },
            { label: "Plain Text", language: "plaintext" }
        ],
        defaultLanguage: "plaintext"
    };
}

Defaults to {defaultLanguage: ‘plaintext’,languages: [{ language: ‘plaintext’, label: ‘Plain text’ },{ language: ‘c’, label: ‘C’ },{ language: ‘csharp’, label: ‘C#’ },{ language: ‘cpp’, label: ‘C++’ },{ language: ‘css’, label: ‘CSS’ },{ language: ‘diff’, label: ‘Diff’ },{ language: ‘html’, label: ‘HTML’ },{ language: ‘java’, label: ‘Java’ },{ language: ‘javascript’, label: ‘JavaScript’ },{ language: ‘php’, label: ‘PHP’ },{ language: ‘python’, label: ‘Python’ },{ language: ‘ruby’, label: ‘Ruby’ },{ language: ‘sql’, label: ‘SQL’ },{ language: ‘typescript’, label: ‘TypeScript’ },{ language: ‘xml’, label: ‘XML’ }]}

cssClass string

Specifies the CSS class name appended to the root element of the RichTextEditor.
Multiple custom CSS classes can be added.

Defaults to null

editorMode EditorMode

Defines the mode of the RichTextEditor.

  • HTML: Render as an HTML editor using an <IFRAME>, content editable <div>, or <textarea>.
  • Markdown: Render as a Markdown editor using a <textarea>.

Defaults to ‘HTML’

emojiPickerSettings EmojiSettingsModel

Configures emoji picker options in the Rich Text Editor.
Properties:

  • iconsSet: Array representing emoji icons.
  • showSearchBox: Enables/disables the search box.

enableAutoUrl boolean

Enable enableAutoUrl to accept the given URL (relative or absolute) without validating the URL for hyperlinks.
Otherwise, the given URL will automatically convert to an absolute path URL by prefixing it with https:// for hyperlinks.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor' [enableAutoUrl]='true' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
}

Defaults to false

enableHtmlEncode boolean

Determines if source code should be displayed in an encoded format.

Defaults to false

enableHtmlSanitizer boolean

Indicates whether to allow cross-site scripting (XSS) or not.

Defaults to true

enablePersistence boolean

Enables or disables the persistence of the component’s state between page reloads.
If enabled, the value of the Rich Text Editor is retained.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor' [enablePersistence]='true' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
}

Defaults to false

enableResize boolean

Enables or disables the resizing option in the editor.
When enabled, the editor can be resized by dragging the resize icon in its bottom right corner.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor [enableResize]='true'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
}

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableTabKey boolean

Allows the tab key action in the Rich Text Editor content.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor [enableTabKey]='true'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
}

Defaults to false

enableXhtml boolean

Indicates whether XHTML is enabled or not.

Defaults to false

enabled boolean

Indicates whether the component is enabled or disabled.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor [enabled]='true'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
}

Defaults to true

enterKey EnterKey

Specifies the tag to be inserted when the enter key is pressed.

  • P: Pressing enter inserts a p tag. The default value will be <p><br></p>.
  • DIV: Inserts a div tag instead of the default P tag.
  • BR: Inserts a br tag instead of the default P tag.

Defaults to ‘P’

exportPdf ExportPdfModel

Describes file export options to PDF in the Rich Text Editor, such as:

  • serviceurl: URL used for exporting content to PDF format.
  • fileName: Specifies the default PDF file name upon export.
  • stylesheet: Applies a stylesheet to the exported PDF file.

Defaults to { serviceUrl: null, fileName: ‘Sample.pdf’, stylesheet: null}

exportWord ExportWordModel

Defines file export options for the Rich Text Editor with properties like:

  • serviceurl: The URL utilized for exporting editor content to Word files.
  • fileName: Designates the default name for exported Word files.
  • stylesheet: Applies a stylesheet to the exported Word file.

Defaults to { serviceUrl: null, fileName: Sample.docx, stylesheet: null}

fileManagerSettings FileManagerSettingsModel

Defines image manager options in the Rich Text Editor with the following attributes:

  • enable: Boolean to enable or disable the image manager.
  • ajaxSettings: Configures AJAX settings for image handling.
  • contextMenuSettings: Manages context menu availability and options.
  • navigationPaneSettings: Sets up the navigation pane display and contents.
  • toolbarSettings: Specifies toolbar configuration and visible items.
  • uploadSettings: Manages upload-specific configurations.
Defaults to *{ enable: false, path: ‘/’, ajaxSettings: { getImageUrl: null, url: null, uploadUrl: null }, contextMenuSettings: { visible: true, file: [‘Open’, ‘ ’, ‘Cut’, ‘Copy’, ‘ ’, ‘Delete’, ‘Rename’, ‘ ’, ‘Details’], folder: [‘Open’, ‘ ’, ‘Cut’, ‘Copy’, ‘Paste’, ‘ ’, ‘Delete’, ‘Rename’, ‘ ’, ‘Details’], layout: [‘SortBy’, ‘View’, ‘Refresh’, ‘ ’, ‘Paste’, ‘ ’, ‘NewFolder’, ‘Upload’, ‘ ’, ‘Details’, ‘ ’, ‘SelectAll’] }, navigationPaneSettings: { visible: true, items: [‘NewFolder’, ‘Upload’, ‘Cut’, ‘Copy’, ‘Paste’, ‘Delete’, ‘Download’, ‘Rename’, ‘SortBy’, ‘Refresh’, ‘Selection’, ‘View’, ‘Details’] }, toolbarSettings: { visible: true, items: [‘Upload’, ‘NewFolder’] }, uploadSettings: { autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: ‘’, autoClose: false }}*

floatingToolbarOffset number

Keeps the toolbar fixed at the top of the Rich Text Editor during scrolling and specifies the
toolbar’s offset from the document’s top position.

Defaults to 0

fontColor FontColorModel

Defines the color palette for the font color toolbar command.

import { Component } from '@angular/core';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: 'app-root',
    template: "<ejs-richtexteditor [toolbarSettings]='tools' [fontColor]='fontColor'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
}) 
export class AppComponent {
    public fontColor = {
        columns: 2,
        colorCode: {
            'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']
        },
        showRecentColors: true,
        modeSwitcher: false
    }
    public tools = {
        items: [ 'fontColor']
    };
}

Defaults to {columns: 10,modeSwitcher: false,showRecentColors: true,colorCode: {‘Custom’: [’’, ‘#000000’, ‘#e7e6e6’, ‘#44546a’, ‘#4472c4’, ‘#ed7d31’, ‘#a5a5a5’, ‘#ffc000’, ‘#70ad47’, ‘#ff0000’,’#f2f2f2’, ‘#808080’, ‘#cfcdcd’, ‘#d5dce4’, ‘#d9e2f3’, ‘#fbe4d5’, ‘#ededed’, ‘#fff2cc’, ‘#e2efd9’, ‘#ffcccc’,’#d9d9d9’, ‘#595959’, ‘#aeaaaa’, ‘#acb9ca’, ‘#b4c6e7’, ‘#f7caac’, ‘#dbdbdb’, ‘#ffe599’, ‘#c5e0b3’, ‘#ff8080’,’#bfbfbf’, ‘#404040’, ‘#747070’, ‘#8496b0’, ‘#8eaadb’, ‘#f4b083’, ‘#c9c9c9’, ‘#ffd966’, ‘#a8d08d’, ‘#ff3333’,’#a6a6a6’, ‘#262626’, ‘#3b3838’, ‘#323e4f’, ‘#2f5496’, ‘#c45911’, ‘#7b7b7b’, ‘#bf8f00’, ‘#538135’, ‘#b30000’,’#7f7f7f’, ‘#0d0d0d’, ‘#161616’, ‘#212934’, ‘#1f3763’, ‘#823b0b’, ‘#525252’, ‘#7f5f00’, ‘#375623’, ‘#660000’]}}

fontFamily FontFamilyModel

Predefines font families that populate the font family dropdown in the toolbar.

import { Component } from "@angular/core";
import { ToolbarSettingsModel } from "@syncfusion/ej2-angular-navigations";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, FontFamilyModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [toolbarSettings]='tools' [fontFamily]='fontFamily'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
  public fontFamily: FontFamilyModel = {
    default: "Segoe UI",
    width: "72px",
    items: [{ text: "Segoe UI", value: "Segoe UI" }]
  };
  public tools: ToolbarSettingsModel = {
    items: ["FontName"]
  };
}

Defaults to {default: ‘Segoe UI’,width: ‘65px’,items: [{ text: ‘Segoe UI’, value: ‘Segoe UI’ },{ text: ‘Arial’, value: ‘Arial,Helvetica,sans-serif’ },{ text: ‘Courier New’, value: ‘Courier New,Courier,monospace’ },{ text: ‘Georgia’, value: ‘Georgia,serif’ },{ text: ‘Impact’, value: ‘Impact,Charcoal,sans-serif’ },{ text: ‘Lucida Console’, value: ‘Lucida Console,Monaco,monospace’ },{ text: ‘Tahoma’, value: ‘Tahoma,Geneva,sans-serif’ },{ text: ‘Times New Roman’, value: ‘Times New Roman,Times,serif’ },{ text: ‘Trebuchet MS’, value: ‘Trebuchet MS,Helvetica,sans-serif’ },{ text: ‘Verdana’, value: ‘Verdana,Geneva,sans-serif’ }]}

fontSize FontSizeModel

Defines the predefined font sizes that populate the font size dropdown in the toolbar.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, FontSizeModel } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarSettingsModel } from "@syncfusion/ej2-angular-navigations";

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [toolbarSettings]='tools' [fontSize]='fontSize'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public fontSize: FontSizeModel = { 
        default: '10pt',
        width: '60px',
        items: [
            { text: '8', value: '8pt' },
            { text: '10', value: '10pt' }
        ]
    }
    public tools: ToolbarSettingsModel = {
        items: ["FontSize"]
    };
}

Defaults to {default: ‘10pt’,width: ‘35px’,items: [{ text: ‘8’, value: ‘8pt’ },{ text: ‘10’, value: ‘10pt’ },{ text: ‘12’, value: ‘12pt’ },{ text: ‘14’, value: ‘14pt’ },{ text: ‘18’, value: ‘18pt’ },{ text: ‘24’, value: ‘24pt’ },{ text: ‘36’, value: ‘36pt’ }]}

format FormatModel

Predefines a collection of paragraph styles along with quote and code styles
that populate the format dropdown in the toolbar.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, FormatModel } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarSettingsModel } from "@syncfusion/ej2-angular-navigations";
@Component({
    selector: "app-root",
    template: " <ejs-richtexteditor [toolbarSettings]='tools' [format]='format'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public format: FormatModel = {
        default: 'Paragraph',
        width:'65px',
        types: [
            { text: 'Paragraph', value: 'P'},
            { text: 'Heading 1', value: 'H1' },
            { text: 'Heading 2', value: 'H2' },
            { text: 'Heading 3', value: 'H3' },
            { text: 'Heading 4', value: 'H4' },
            { text: 'Heading 5', value: 'H5' },
            { text: 'Heading 6', value: 'H6' },
            { text: 'Preformatted', value: 'Pre' },
        ]
    }
    public tools: ToolbarSettingsModel = {
        items: ["Formats"]
    };
}

Defaults to {default: ‘Paragraph’,width: ‘65px’,types: [{ text: ‘Paragraph’, value: ‘P’},{ text: ‘Heading 1’, value: ‘H1’ },{ text: ‘Heading 2’, value: ‘H2’ },{ text: ‘Heading 3’, value: ‘H3’ },{ text: ‘Heading 4’, value: ‘H4’ },{ text: ‘Heading 5’, value: ‘H5’ },{ text: ‘Heading 6’, value: ‘H6’ },{ text: ‘Preformatted’, value: ‘Pre’ }]}

formatPainterSettings FormatPainterSettingsModel

Configures the format painter options in the Rich Text Editor.
Properties:

  • allowedFormats: Tags selectors that allow format copying.
  • deniedFormats: Tag selectors that prevent format copying.
import { Component } from "@angular/core";
import { RichTextEditorModule, ToolbarService, LinkService, HtmlEditorService, QuickToolbarService, ImageService, TableService, ToolbarSettingsModel, FormatPainterService,FormatPainterSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@component({
    selector: "app-root",
    template: "<ejs-richtexteditor id = 'formatPainterRTE'  [toolbarSettings]='toolbarSettings' [formatPainterSettings]='formatPainterSettings'></ejs-richtexteditor>",
    providers: [HtmlEditorService, ToolbarService, FormatPainterService, QuickToolbarService, ImageService, LinkService, TableService],
    standalone: true,
    imports: [RichTextEditorModule]
})

export class AppComponent {
  public toolbarSettings: ToolbarSettingsModel = {
    items: ['FormatPainter']
  };
  public formatPainterSettings: FormatPainterSettingsModel = {
    allowedFormats: 'span; strong;',
    deniedFormats: 'span(important)'
  };
}

Defaults to {allowedFormats: ‘b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; ol; ul; li; pre;’,deniedFormats: null}

formatter IFormatter

Customize the keyCode to change the key value.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, IFormatter } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [formatter]='formatter'></ejs-richtexteditor>",
    providers: [HtmlEditorService, ToolbarService, QuickToolbarService, ImageService, LinkService, TableService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
  public formatter: IFormatter = null;
}

Defaults to null

height string|number

Specifies the height of the Rich Text Editor component.

Defaults to “auto”

htmlAttributes { : }

Allows specifying additional HTML attributes like title, name, etc.
Accepts multiple attributes in a key-value pair format.

Defaults to {}

iframeSettings IFrameSettingsModel

Configures iframe mode items in the Rich Text Editor.
Properties:

  • enable: Boolean to place editor content in an iframe, isolating it from the page.
  • attributes: Custom style for displaying content inside the iframe. Applied to iframe body.
  • resources: Adds styles and scripts to the iframe.
    1. styles[]: Array of CSS files for the iframe content.
    2. scripts[]: Array of JS script files for the iframe.
  • metaTags[]: Array of meta tags for iframe’s head, setting metadata (http-equiv, charset, etc.).
  • sandbox: String array defining iframe sandbox attributes, controlling security restrictions. Default includes “allow-same-origin”.
import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, IFrameSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [iframeSettings]='iframe'></ejs-richtexteditor>",
    providers: [HtmlEditorService, ToolbarService, QuickToolbarService, ImageService, LinkService, TableService],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
  public iframe: IFrameSettingsModel = { enable: true };
}

Defaults to {enable: false,attributes: null,resources: { styles: [], scripts: [] },metaTags: [],sandbox: null,}

importWord ImportWordModel

Configures the options for importing Word files in the Rich Text Editor component.
The serviceUrl property specifies the server endpoint URL where the uploaded Word file will be processed.

Defaults to { serviceUrl: null}

inlineMode InlineModeModel

Configures the inline edit mode for the Rich Text Editor with the following options:

  • enable: A boolean value to enable or disable the inline edit mode.
  • onSelection: Determines how the toolbar is activated:
    • If set to true, the toolbar appears inline upon text selection.
    • If set to false, the toolbar opens when clicking on the target element.
import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService,InlineModeModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [inlineMode]='inlineMode' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
  public inlineMode: InlineModeModel = { enable: true, onSelection: true };
}

Defaults to { enable: false, onSelection: true}

insertAudioSettings AudioSettingsModel

Defines the options for inserting audio files in the Rich Text Editor, including properties such as:

  • allowedTypes: Specifies the file extensions for audio files allowed to be inserted, listed as a comma-separated string (e.g., ‘.wav’, ‘.mp3’).
  • layoutOption: Sets the default layout for audio files when inserted into the Rich Text Editor. The options are ‘Inline’ and ‘Break’.
  • saveFormat: Determines the format used to store audio files in the Rich Text Editor, either ‘Base64’ or ‘Blob’.

    Choose ‘Base64’ for frequently inserted small audio files without the need for a specific storage location.

  • saveUrl: Provides the service URL responsible for handling audio file uploads and storage on the server.
  • path: Specifies the storage path for audio files and the reference for displaying them.
  • maxFileSize: Sets the maximum file size allowed for audio file uploads.

Defaults to { allowedTypes: [‘.wav’, ‘.mp3’, ‘.m4a’, ‘.wma’], layoutOption: ‘Inline’, saveFormat: ‘Blob’, saveUrl: null, path: null, maxFileSize: 30000000}

insertImageSettings ImageSettingsModel

Specifies the options for inserting images in the Rich Text Editor. Includes properties such as:

  • allowedTypes: Specifies the allowed image file extensions as a comma-separated list (e.g., ‘.jpg’, ‘.png’).
  • display: Sets the default display mode for an inserted image, either ‘inline’ or ‘block’.
  • width: Specifies the default width for an inserted image.
  • saveFormat: Indicates the format for storing images in the editor (Base64 or Blob).

    Select Base64 for numerous small images without a specific physical storage location.

  • height: Defines the default height for an inserted image.
  • saveUrl: Specifies the URL for the service that handles image upload and storage on the server.
  • path: Determines the storage location for images and their display path.
  • maxFileSize: Sets the maximum file size allowed for image uploads.
import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService,ImageSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [insertImageSettings]='insertImageSettings'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
    public insertImageSettings: ImageSettingsModel = {
        allowedTypes: ['.jpeg', '.jpg', '.png'],
        display: 'inline',
        width: 'auto',
        height: 'auto',
        saveFormat: 'Blob', 
        saveUrl: null,
        path: null,
    }
}

Defaults to { allowedTypes: [‘.jpeg’, ‘.jpg’, ‘.png’], display: ‘inline’, width: ‘auto’, height: ‘auto’, saveFormat: ‘Blob’, saveUrl: null, path: null, maxFileSize: 30000000}

insertVideoSettings VideoSettingsModel

Specifies video insert options in the Rich Text Editor, detailing properties such as:

  • allowedTypes: Allowed video file extensions as a comma-separated list (e.g., ‘.mp4’, ‘.mov’).
  • layoutOption: Determines the display mode for videos (‘Inline’ or ‘Break’).
  • width: Sets default width for inserted videos.
  • saveFormat: Format for storing video files (Base64 or Blob).

    Select Base64 for numerous small video inserts without defined storage requirements.

  • height: Sets default height for inserted videos.
  • saveUrl: URL of the service for handling video uploads and server storage.
  • path: Identifies the path for storing and displaying videos.
  • maxFileSize: Maximum file size allowed for video uploads.

Defaults to { allowedTypes: [‘.mp4’, ‘.mov’, ‘.wmv’, ‘.avi’], layoutOption: ‘Inline’, width: ‘auto’, height: ‘auto’, saveFormat: ‘Blob’, saveUrl: null, path: null, maxFileSize: 30000000}

keyConfig { : }

Customizes key actions in the RichTextEditor.
For example, German keyboard users can customize key actions using these shortcuts.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService} from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [keyConfig]='keyConfig' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public keyConfig: { [key: string]: string } = {
        'undo': 'ctrl+z',
        'redo': 'ctrl+y',
        'copy': 'ctrl+c'
    }
}

Defaults to null

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

maxLength number

Specifies the maximum number of characters allowed in the Rich Text Editor.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [maxLength]='maxLength'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService ],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
    public maxLength: number = 500;
}

Defaults to -1

numberFormatList NumberFormatListModel

Predefines advanced list types that populate the numberFormatList dropdown in the toolbar.

Defaults to {types: [{ text: ‘None’, value: ‘none’ },{ text: ‘Number’, value: ‘decimal’ },{ text: ‘Lower Greek’, value: ‘lowerGreek’ },{ text: ‘Lower Roman’, value: ‘lowerRoman’ },{ text: ‘Upper Alpha’, value: ‘upperAlpha’ },{ text: ‘Lower Alpha’, value: ‘lowerAlpha’ },{ text: ‘Upper Roman’, value: ‘upperRoman’ }]}

pasteCleanupSettings PasteCleanupSettingsModel

Configures paste options in the Rich Text Editor.
Properties:

  • prompt: Boolean to enable or disable paste prompt.
  • deniedAttrs: Attributes to restrict during paste.
  • allowedStyleProps: Style properties allowed when pasting.
  • deniedTags: Tags to restrict when pasting.
  • keepFormat: Boolean to keep or remove format when pasting.
  • plainText: Boolean to paste as plain text.
import { Component } from "@angular/core";
import { } from '@syncfusion/ej2-angular-richtexteditor';
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, PasteCleanupService, PasteCleanupSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [pasteCleanupSettings]='pasteCleanupSettings'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
        LinkService, ImageService, PasteCleanupService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public pasteCleanupSettings: PasteCleanupSettingsModel = { 
        prompt: false,
        deniedAttrs: null,
        allowedStyleProps: [
            'background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'],
        deniedTags: null,
        keepFormat: true,
        plainText: false
    }
}

Defaults to {prompt: false,deniedAttrs: null,allowedStyleProps: [‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’,’border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’,’direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’,’height’, ‘left’, ‘line-height’, ‘list-style-type’, ‘margin’, ‘margin-top’, ‘margin-left’,’margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’,’overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’,’padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-transform’, ‘text-indent’,’top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’, ‘flex-direction’],deniedTags: null,keepFormat: true,plainText: false}

placeholder string

Specifies the placeholder text for the content area of the RichTextEditor when it is empty.

Defaults to null

quickToolbarSettings QuickToolbarSettingsModel

Specifies the items to be rendered in the quick toolbar based on the target element.
Properties:

  • enable: Boolean to show or hide the quick toolbar.
  • actionOnScroll: Options for quick toolbar behavior on scroll:
    1. hide: The quick toolbar closes when the parent element is scrolled.
    2. none: The quick toolbar stays open even if the parent element is scrolled.
  • link: Specifies items in the quick toolbar for links (‘Open’, ‘Edit’, ‘UnLink’).
  • image: Specifies items in the quick toolbar for images (‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’).
  • text: Specifies items in the quick toolbar for text (‘Cut’, ‘Copy’, ‘Paste’).
  • audio: Specifies items for audio (‘AudioReplace’, ‘AudioRemove’, ‘AudioLayoutOption’).
  • video: Specifies items for video (‘VideoReplace’, ‘VideoAlign’, ‘VideoRemove’, ‘VideoLayoutOption’, ‘VideoDimension’).
import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, AudioService,
  HtmlEditorService, QuickToolbarService, QuickToolbarSettingsModel,ToolbarSettingsModel, VideoService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [quickToolbarSettings]='quickToolbarSettings'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService, AudioService, VideoService ],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public quickToolbarSettings: QuickToolbarSettingsModel = {
        enable: true,
        actionOnScroll: 'none',
        link: ['Open', 'Edit', 'UnLink'],
        table: ['Tableheader', 'TableRemove', '|', 'TableRows', 'TableColumns', '|' , 'Styles', 'BackgroundColor', 'Alignments', 'TableCellVerticalAlign'],
        image: ['AltText', 'Caption', '|', 'Align', 'Display', '|', 'InsertLink', 'OpenImageLink', 'EditImageLink', 'RemoveImageLink', '|', 'Dimension', 'Replace', 'Remove'],
        audio: ['AudioLayoutOption', 'AudioReplace', 'AudioRemove'],
        video: ['VideoLayoutOption', 'VideoAlign', '|', 'VideoDimension', 'VideoReplace', 'VideoRemove'],
        text: ['Bold', 'Italic', 'FontColor', 'BackgroundColor']
    }
}
Defaults to *{enable: true,actionOnScroll: ‘none’,link: [‘Open’, ‘Edit’, ‘UnLink’],table: [‘Tableheader’, ‘TableRemove’, ‘ ’, ‘TableRows’, ‘TableColumns’, ‘ ’ , ‘Styles’, ‘BackgroundColor’, ‘Alignments’, ‘TableCellVerticalAlign’],image: [‘AltText’, ‘Caption’, ‘ ’, ‘Align’, ‘Display’, ‘ ’, ‘InsertLink’, ‘OpenImageLink’, ‘EditImageLink’, ‘RemoveImageLink’, ‘ ’, ‘Dimension’, ‘Replace’, ‘Remove’],audio: [‘AudioLayoutOption’, ‘AudioReplace’, ‘AudioRemove’],video: [‘VideoLayoutOption’, ‘VideoAlign’, ‘ ’, ‘VideoDimension’, ‘VideoReplace’, ‘VideoRemove’],}*

readonly boolean

Disables user interactions on the component when set to true.

Defaults to false

saveInterval number

Specifies the save interval in milliseconds for automatically saving the content.
The change event is triggered if the content changes from the last saved interval.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, QuickToolbarSettingsModel,ToolbarSettingsModel, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [saveInterval]='saveInterval'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public saveInterval: number = 500;
}

Defaults to 10000

shiftEnterKey ShiftEnterKey

Specifies tags to be inserted when the Shift + Enter keys are pressed.

  • BR - When the Shift + Enter key is pressed, a br tag will be inserted, which is the default behavior.
  • P - When the Shift + Enter key is pressed, a p tag will be inserted instead of the default br tag.
  • DIV - When the Shift + Enter key is pressed, a div tag will be inserted instead of the default br tag.

Defaults to ‘BR’

showCharCount boolean

Enables or disables the display of the character counter.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, CountService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [showCharCount]='true'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService, CountService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
}

Defaults to false

showTooltip boolean

Configures whether a tooltip should be displayed for the Rich Text Editor toolbar.

Defaults to true

slashMenuSettings SlashMenuSettingsModel

Configuration options for the slash menu feature in the Editor, used to display a mention popup.
Properties:

  • enable: A boolean indicating whether the slash menu is enabled in the Editor.
  • items: An array specifying the list of items to be displayed in the slash menu.
  • popupWidth: Defines the width of the slash menu popup. Accepts values in pixels, numbers, or percentages. Numeric values are treated as pixels.
  • popupHeight: Defines the height of the slash menu popup. Accepts values in pixels, numbers, or percentages. Numeric values are treated as pixels.

Defaults to {enable: false,items: [‘Paragraph’, ‘Heading 1’, ‘Heading 2’, ‘Heading 3’, ‘Heading 4’, ‘OrderedList’, ‘UnorderedList’,’CodeBlock’, ‘BlockQuote’],popupWidth: ‘300px’,popupHeight: ‘320px’}

tableSettings TableSettingsModel

Specifies the options for inserting tables in the Rich Text Editor, featuring properties like:

  • styles: Automatically appends a CSS class to tables for consistent styling.
  • width: Defines default table width upon insertion.
  • minWidth: Sets the minimum width for inserted tables.
  • maxWidth: Indicates the maximum permissible width for tables.
  • resize: Enables or disables table resizing functionality.
import { Component } from "@angular/core";

import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, TableSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [tableSettings]='tableSettings'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public tableSettings: TableSettingsModel = {
        width: '100%',
        styles: [
            { text: 'Dashed Borders', command:'Table', subCommand: 'Dashed' },
            { text: 'Alternate Rows', command: 'Table', subCommand: 'Alternate' }
        ],
        resize: true,
        minWidth: 0,
        maxWidth: null
    }
}

Defaults to { width: ‘100%’, styles: [ { text: ‘Dashed Borders’, class: ‘e-dashed-borders’, command: ‘Table’, subCommand: ‘Dashed’ }, { text: ‘Alternate Rows’, class: ‘e-alternate-rows’, command: ‘Table’, subCommand: ‘Alternate’ } ], resize: true, minWidth: 0, maxWidth: null}

toolbarSettings ToolbarSettingsModel

Specifies the configuration for the toolbar, including the alignment and rendering type.
By default, the toolbar floats at the top of the RichTextEditor.
When you scroll down, the toolbar will move with the page applying the specified offset.
Properties:

  • enable: A boolean value to show or hide the toolbar.

  • enableFloating: A boolean value to enable or disable the floating toolbar.
    This keeps the toolbar fixed at the top of the RichTextEditor during scrolling.

  • type: Defines the toolbar type, with the following options:
    1. Expand: Overflowing toolbar items are hidden and can be accessed by clicking the expand arrow.
    2. MultiRow: Overflowing toolbar items wrap into the next row.
    3. Scrollable: Toolbar items are on a single line and can be scrolled horizontally if they overflow.
    4. Popup: Overflowing toolbar items wrap into a popup container.
  • position: Defines the toolbar position, with the following options:
    1. Top: Positions the toolbar at the top of the RichTextEditor.
    2. Bottom: Positions the toolbar at the bottom of the RichTextEditor.
  • items: An array specifying the items aligned horizontally in the toolbar.
    ’ ’ and ‘-‘ can be used to insert vertical and horizontal separator lines in the toolbar.
  • itemConfigs: Allows the modification of the default toolbar item configuration, such as the icon class.

By default, the toolbar is rendered with a scrollable option on mobile devices and does not support other toolbar types.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: " <ejs-richtexteditor  [toolbarSettings]='tools' ></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
    public tools: ToolbarSettingsModel = {
        enable: true,
        position: ToolbarPosition.Top,
        type: ToolbarType.Expand,
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase','SuperScript', 'SubScript', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateTable', 'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
        ]
    };
}
Defaults to *{enable: true,enableFloating: true,position: ToolbarPosition.Top,type: ToolbarType.Expand,items: [‘Bold’, ‘Italic’, ‘Underline’, ‘ ’, ‘Formats’, ‘Alignments’, ‘OrderedList’,’UnorderedList’, ‘ ’, ‘CreateLink’, ‘Image’, ‘ ’, ‘SourceCode’, ‘Undo’, ‘Redo’],itemConfigs: {}}*

undoRedoSteps number

Specifies the number of undo history steps stored in the undo/redo manager.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [undoRedoSteps]='30'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]
})
export class AppComponent {
}

Defaults to 30

undoRedoTimer number

Specifies the interval time in milliseconds for storing actions in the undo/redo manager.
The minimum value is 300 milliseconds.

Defaults to 300

value string

Specifies the initial content to be displayed in the RichTextEditor’s content area. It should be a string.
The editor’s content can also be dynamically loaded from a database, AJAX, etc.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor [value]='value'></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
    public value = 'rich text editor';
}

Defaults to null

valueTemplate any

Accepts a template design and assigns it as the content of the Rich Text Editor.
The built-in template engine provides options to compile a template string into an executable function.
For example, it supports expression evaluation similar to ES6 template string literals.

import { Component } from "@angular/core";
import { ToolbarService, LinkService, RichTextEditorModule, HtmlEditorService, QuickToolbarService, ImageService, TableService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    selector: "app-root",
    template: "<ejs-richtexteditor> <ng-template #valueTemplate> rich text editor</ng-template></ejs-richtexteditor>",
    providers: [ ToolbarService, HtmlEditorService, QuickToolbarService, TableService,
    LinkService, ImageService],
    standalone: true,
    imports: [RichTextEditorModule]

})
export class AppComponent {
}

Defaults to null

width string|number

Specifies the width of the Rich Text Editor.

Defaults to ‘100%’

Methods

clearUndoRedo

Clears the undo and redo stacks and resets the undo and redo toolbar status to disable the buttons.

Returns void

closeDialog

Closes a specified dialog within the Rich Text Editor.

Parameter Type Description
type DialogType The type of dialog to close.

Returns void

destroy

Destroys the component by detaching or removing all event handlers,
attributes, and CSS classes. It also clears the component’s element content.

Returns void

disableToolbarItem

Disables the specified toolbar items in the Rich Text Editor component.

Parameter Type Description
items string | string[] A single item or a collection of items to be disabled in the toolbar.
muteToolbarUpdate (optional) boolean Determines whether to mute updates of the toolbar item status in the Rich Text Editor.

Returns void

enableToolbarItem

Enables the specified toolbar items in the Rich Text Editor component.

Parameter Type Description
items string | string[] A single item or a collection of items to be enabled in the toolbar.
muteToolbarUpdate (optional) boolean Determines whether to mute updates of the toolbar item status in the Rich Text Editor.

Returns void

executeCommand

Executes a specified command within the rich text editor, optionally utilizing additional parameters to tailor execution.

Parameter Type Description
commandName CommandName The name of the command to be executed, such as ‘importWord’, ‘insertHTML’, and others.
value (optional) string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs | ITableCommandsArgs | FormatPainterSettingsModel | IAudioCommandsArgs | IVideoCommandsArgs | ICodeBlockCommandsArgs
- An optional parameter that supplies the necessary value relevant to the command. This could be a string, an HTMLElement, or specific argument types like ILinkCommandsArgs, etc., contingent on the command requirements.
option (optional) ExecuteCommandOption Specifies additional options for executing the command, such as enabling features like undo functionality.

Returns void

focusIn

Focuses the Rich Text Editor component.

Returns void

focusOut

Blurs the Rich Text Editor component, removing focus.

Returns void

getCharCount

Calculates the maximum number of characters currently in the Rich Text Editor.

Returns number

getContent

Retrieves the HTML or text content inside the RichTextEditor.

Returns Element

getHtml

Retrieves the HTML content from the Rich Text Editor.

Returns string

getRange

Get the selected range from the RichTextEditor’s content.

Returns Range

getSelectedHtml

Retrieves the HTML representation of the selected content as a string.

Returns string

getSelection

Retrieves the HTML markup from the currently selected content in RichTextEditor.

Returns string

getText

Retrieves the text content as a string.

Returns string

getXhtml

Retrieves XHTML validated HTML content from the Rich Text Editor
when the enableXhtml property is set to true.

Returns string

hideInlineToolbar

Hides the inline quick toolbar.

Returns void

print

Prints all the pages of the RichTextEditor by default.

Returns void

refreshUI

Refreshes the view of the editor.

Returns void

removeToolbarItem

Removes the specified toolbar items from the Rich Text Editor component.

Parameter Type Description
items string | string[] A single item or a collection of items to be removed from the toolbar.

Returns void

sanitizeHtml

Sanitizes an HTML string to prevent cross-site scripting (XSS) attacks.
This method is applicable when the editor mode is specifically set to HTML.

Parameter Type Description
value string The HTML content to be sanitized for security purposes.

Returns string

selectAll

Selects all content within the RichTextEditor.

Returns void

selectRange

Selects a specific content range or element.

Parameter Type Description
range Range Specify the range you want to select within the content.
This method is used to select a particular sentence, word, or the entire document.

Returns void

showDialog

Displays a specified dialog within the Rich Text Editor.

Parameter Type Description
type DialogType The type of dialog to display.

Returns void

showEmojiPicker

Displays the emoji picker. If coordinates are provided, it positions the picker at those locations.

Parameter Type Description
x (optional) number The x-axis position for the emoji picker.
y (optional) number The y-axis position for the emoji picker.

Returns void

showFullScreen

Displays the Rich Text Editor component in full-screen mode.

Returns void

showInlineToolbar

Displays the inline quick toolbar.

Returns void

showSourceCode

Toggles the display of the HTML/Markdown source code within the editor.

Returns void

Events

actionBegin EmitType<ActionBeginEventArgs>

This event triggers before executing a command via toolbar items.
Cancel this event to prevent the command from executing by setting the cancel argument to true.

actionComplete EmitType<ActionCompleteEventArgs>

This event triggers after executing a command via toolbar items.

afterImageDelete EmitType<AfterImageDeleteEventArgs>

This event triggers when a selected image is removed from the Rich Text Editor content.

afterMediaDelete EmitType<AfterMediaDeleteEventArgs>

This event triggers when selected media is removed from the Rich Text Editor content.

afterPasteCleanup EmitType<object>

This event triggers after cleaning up copied content.

beforeDialogClose EmitType<BeforeCloseEventArgs>

This event triggers before a dialog is closed.
Cancel this event to prevent the dialog from closing by setting the cancel argument to true.

beforeDialogOpen EmitType<BeforeOpenEventArgs>

This event triggers before a dialog is opened.
Cancel this event to prevent the dialog from opening by setting the cancel argument to true.

beforeFileUpload EmitType<BeforeUploadEventArgs>

This event triggers before the media audio/video upload process starts.

beforeImageDrop EmitType<ImageDropEventArgs>

This event triggers before an image is dropped.

beforeImageUpload EmitType<BeforeUploadEventArgs>

This event triggers before the image upload process starts.

beforeMediaDrop EmitType<MediaDropEventArgs>

This event triggers before a media is dropped.

beforePasteCleanup EmitType<PasteCleanupArgs>

This event triggers before cleaning up copied content.

beforeQuickToolbarOpen EmitType<BeforeQuickToolbarOpenArgs>

This event triggers before the quick toolbar opens.

beforeSanitizeHtml EmitType<BeforeSanitizeHtmlArgs>

This event triggers before sanitizing the value. Applicable only when editorMode is HTML.

blur EmitType<Object>

This event triggers when the Rich Text Editor loses focus.

change EmitType<ChangeEventArgs>

This event triggers when the Rich Text Editor loses focus and changes have been made to the content.

created EmitType<Object>

This event triggers when the Rich Text Editor is rendered.

destroyed EmitType<Object>

This event triggers when the Rich Text Editor is destroyed.

dialogClose EmitType<Object>

This event triggers after a dialog has been closed.

dialogOpen EmitType<Object>

This event triggers when a dialog is opened.

fileRemoving EmitType<RemovingEventArgs>

This event triggers when selected media is removed from the insert audio/video dialog.

fileSelected EmitType<SelectedEventArgs>

This event triggers when media is selected or dragged into the insert media audio/video dialog.

fileUploadFailed EmitType<Object>

This event triggers when there is an error during media upload.

fileUploadSuccess EmitType<Object>

This event triggers when media has been successfully uploaded to the server side.

fileUploading EmitType<UploadingEventArgs>

This event triggers when media begins uploading in the insert media audio/video dialog.

focus EmitType<Object>

This event triggers when the Rich Text Editor gains focus.

imageRemoving EmitType<RemovingEventArgs>

This event triggers when a selected image is removed from the insert image dialog.

imageSelected EmitType<SelectedEventArgs>

This event triggers when an image is selected or dragged into the insert image dialog.

imageUploadFailed EmitType<ImageFailedEventArgs>

This event triggers when there is an error during image upload.

imageUploadSuccess EmitType<ImageSuccessEventArgs>

This event triggers when an image has been successfully uploaded to the server side.

imageUploading EmitType<UploadingEventArgs>

This event triggers when an image upload begins in the insert image dialog.
It provides access to the upload details through the event arguments.

quickToolbarClose EmitType<Object>

This event triggers after the quick toolbar has been closed.

quickToolbarOpen EmitType<Object>

This event triggers when the quick toolbar is opened.

resizeStart EmitType<ResizeArgs>

This event triggers when resizing starts for various elements including tables, images, videos, and the overall editor.

resizeStop EmitType<ResizeArgs>

This event triggers when resizing stops for various elements including tables, images, videos, and the overall editor.

resizing EmitType<ResizeArgs>

This event triggers when resizing elements such as tables, images, videos, and the overall Rich Text Editor.

selectionChanged EmitType<SelectionChangedEventArgs>

This event triggers when a non-empty text selection is made or updated in the Rich Text Editor.
Fires in both HTML and Markdown modes, providing detailed information about the current selection.

<div id="editor">
import {
  RichTextEditor,
  Toolbar,
  Image,
  Link,
  HtmlEditor,
  QuickToolbar,
  Table,
  SelectionChangedEventArgs,
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table);
let editorObj: RichTextEditor = new RichTextEditor({
  selectionChanged: selectionChanged,
});
editorObj.appendTo('#editor');
function selectionChanged(args: SelectionChangedEventArgs): void {
  console.log(args.selectedContent);
  console.log(args.selection);
  console.log(args.editorMode);
}

slashMenuItemSelect EmitType<SlashMenuItemSelectArgs>

This event triggers when a slash menu item in the popup is selected by the user using mouse, tap, or keyboard navigation.

toolbarClick EmitType<Object>

This event triggers when a Rich Text Editor toolbar item is clicked.

toolbarStatusUpdate EmitType<Object>

This event is deprecated and no longer works. Use the updatedToolbarStatus event for undo/redo status.

updatedToolbarStatus EmitType<ToolbarStatusEventArgs>

This event triggers when the toolbar items status is updated.