RichTextEditorModel API in JavaScript RichTextEditor API control

Interface for a class RichTextEditor

Properties

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.

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.

backgroundColor

BackgroundColorModel

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table} from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
  toolbarSettings: {
    items: ['BackgroundColor'],
  },
  backgroundColor: {
    columns: 5,
    colorCode: {
      Custom: [ '#ffff00', '#00ff00', '#00ffff', '#ff00ff', '#0000ff', '#ff0000', '#000080', '#008080', '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000', ''],
    },
  },
});
editorObj.appendTo('#editor');

bulletFormatList

BulletFormatListModel

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

cssClass

string

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

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>.

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    enableAutoUrl: true,
});
editorObj.appendTo('#editor');

enableHtmlEncode

boolean

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

enableHtmlSanitizer

boolean

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

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    enablePersistence: true
});
editorObj.appendTo('#editor');

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.

<div id="editor"></div>

import { RichTextEditor,Toolbar,Link,Image,QuickToolbar,HtmlEditor,Table,Resize} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject( Toolbar,Link,Image,QuickToolbar,,HtmlEditor,Table,Resize);

let editorObj: RichTextEditor = new RichTextEditor({
    enableResize: true
});
editorObj.appendTo('#editor');

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableTabKey

boolean

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    enableTabKey: true
});
editorObj.appendTo('#editor');

enableXhtml

boolean

Indicates whether XHTML is enabled or not.

enabled

boolean

Indicates whether the component is enabled or disabled.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    enabled: true
});
editorObj.appendTo('#editor');

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.

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.

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.

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.

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.

fontColor

FontColorModel

Defines the color palette for the font color toolbar command.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    fontColor: {
        columns: 2,
        colorCode: { 'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}
    },
    toolbarSettings: {
        items: ['FontColor']
    }
});
editorObj.appendTo('#editor');

fontFamily

FontFamilyModel

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
  fontFamily: {
    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" }
    ]
  },
  toolbarSettings: {
    items: ["FontName"]
  }
});
editorObj.appendTo("#editor");

fontSize

FontSizeModel

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);


let editorObj: RichTextEditor = new RichTextEditor({
  fontSize: {
    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" }
    ]
  },
  toolbarSettings: {
    items: ["FontSize"]
  }
});
editorObj.appendTo("#editor");

format

FormatModel

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);


let editorObj: RichTextEditor = new RichTextEditor({
  format: {
    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' },
    ]
  },
  toolbarSettings: {
    items: ["Formats"]
  }
});
editorObj.appendTo("#editor");

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
        items: ['FormatPainter'] 
    },
    formatPainterSettings:{
        allowedFormats: 'span; strong;',
        deniedFormats:'span(important)'
    }
});
editorObj.appendTo("#editor");

formatter

IFormatter

Customize the keyCode to change the key value.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    formatter: null
});
editorObj.appendTo("#editor");

height

string | number

Specifies the height of the Rich Text Editor component.

htmlAttributes

{ : }

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

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”.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    iframeSettings: {
        enable: true
    }
});
editorObj.appendTo("#editor");

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.

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    inlineMode: {
        enable: true
    }
});
editorObj.appendTo("#editor");

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.

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject( Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
  insertImageSettings: {
    allowedTypes: [".jpeg", ".jpg", ".png"],
    display: "inline",
    width: "auto",
    height: "auto",
    saveFormat: "Blob"
  }
});
editorObj.appendTo("#editor");

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.

keyConfig

{ : }

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
  keyConfig: { 'undo': 'ctrl+z', 'redo': 'ctrl+y', 'copy': 'ctrl+c'}
});
editorObj.appendTo("#editor");

locale

string

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

maxLength

number

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    maxLength: 500
});
editorObj.appendTo("#editor");

numberFormatList

NumberFormatListModel

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

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, PasteCleanup
} from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject( Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, PasteCleanup);

let editorObj: RichTextEditor = new RichTextEditor({
  pasteCleanupSettings: {
    prompt: false,
    deniedAttrs: null,
    allowedStyleProps: [
      "background",
      "background-color",
      "border",
      "border-bottom",
      "border-width",
      "clear",
      "visibility",
      "white-space",
      "width"
    ],
    deniedTags: null,
    keepFormat: true,
    plainText: false
  }
});
editorObj.appendTo("#editor");

placeholder

string

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

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’).

<div id="editor"></div>

import { RichTextEditor, Toolbar, Image, Audio, Video, Table, Link, HtmlEditor, QuickToolbar } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Image, Link, Audio, Video, Table, HtmlEditor, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
  quickToolbarSettings: {
    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']
  }
});
editorObj.appendTo("#editor");

readonly

boolean

Disables user interactions on the component when set to true.

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table);

let editorObj: RichTextEditor = new RichTextEditor({
    saveInterval: 500
});
editorObj.appendTo('#editor');

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.

showCharCount

boolean

Enables or disables the display of the character counter.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, Count} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, Count);

let editorObj: RichTextEditor = new RichTextEditor({
    showCharCount: true
});
editorObj.appendTo("#editor");

showTooltip

boolean

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

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.

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar, NodeSelection } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Table, Image, Link, HtmlEditor, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
  tableSettings: {
    width: "100%",
    styles: [
      {
        text: "Dashed Borders",
        command: "Table",
        subCommand: "Dashed"
      },
      {
        text: "Alternate Rows",
        command: "Table",
        subCommand: "Alternate"
      }
    ],
    resize: true,
    minWidth: 0,
    maxWidth: null
  }
});
editorObj.appendTo("#editor");

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
    toolbarSettings: {
            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'
            ]
        },
});
editorObj.appendTo("#editor");

undoRedoSteps

number

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

<div id="editor"></div>

import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Table, Image, Link, HtmlEditor, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
    undoRedoSteps: 10
});
editorObj.appendTo("#editor");

undoRedoTimer

number

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

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.

<div id="editor"></div>

import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
    value: 'rich text editor'
});
editorObj.appendTo("#editor");

valueTemplate

string | Function

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.

<div id="editor">
    <p> Rich Text Editor </p>
</div>

import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar } from "@syncfusion/ej2-richtexteditor";
RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, Table, QuickToolbar);

let editorObj: RichTextEditor = new RichTextEditor({
});
editorObj.appendTo("#editor");

width

string | number

Specifies the width of the Rich Text Editor.