RichTextEditorComponent

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','']}}
    public tools = {
        items: [ 'BackgroundColor' ]
    };
}

Defaults to {columns: 5,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’ }]}

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','']
        }
    }
    public tools = {
        items: [ 'fontColor']
    };
}

Defaults to {columns: 10,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.

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

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.

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}

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.

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

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 [toolbarSettings]='tools' [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: 'hide',
        link: ['Open', 'Edit', 'UnLink'],
        image: ['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'Display', 'AltText', 'Dimension'],
        audio: ['AudioReplace', 'AudioRemove', 'AudioLayoutOption'],
        video: ['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension'],
        table: ['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'],
        text: ['Bold', 'Italic', 'FontColor', 'BackgroundColor']
    }
    public tools: ToolbarSettingsModel = {
        items: ['CreateTable', 'CreateLink', 'Image', 'Audio','Video']
    };
}

Defaults to {enable: true,actionOnScroll: ‘hide’,link: [‘Open’, ‘Edit’, ‘UnLink’],image: [‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ’-’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’],audio: [‘AudioReplace’, ‘AudioRemove’, ‘AudioLayoutOption’],video: [‘VideoReplace’, ‘VideoAlign’, ‘VideoRemove’, ‘VideoLayoutOption’, ‘VideoDimension’],}

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.

• 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 = {
        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,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

closeDialog

Closes a specified dialog within the Rich Text Editor.

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.

Returns void

enableToolbarItem

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

Returns void

executeCommand

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

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.

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.

Returns string

selectAll

Selects all content within the RichTextEditor.

Returns void

selectRange

Selects a specific content range or element.

Returns void

showDialog

Displays a specified dialog within the Rich Text Editor.

Returns void

showEmojiPicker

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

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.

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.

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.