React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

RichTextEditorComponent

RichTextEditor represents the react RichTextEditor.

<RichTextEditor/>

Properties

autoSaveOnIdle

boolean

Enables or disables the auto-save option which performs the save action while in the idle state after typed content. If enabled, the Rich Text Editor will save the content on idle state with saveInterval property’s value. The change event will be triggered if the content has changed from the last saved state.

Defaults to false.

backgroundColor

BackgroundColorModel

Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,BackgroundColorModel } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

     private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'BackgroundColor']
    };

     private backgroundColor : BackgroundColorModel = { columns: 2, colorCode: { 'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}}

    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.toolbarSettings} backgroundColor={this.backgroundColor} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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

cssClass

string

Specifies the CSS class name appended with the root element of the RichTextEditor. One or more custom CSS classes can be added to a RichTextEditor.

Defaults to null

editorMode

string

Specifies the editing mode of the RichTextEditor.

  • HTML - Render Rich Text Editor as HTML editor using <IFRAME> element or content editable <div> element or <textarea> element.
  • Markdown - Render Rich Text Editor as markdown editor using <textarea>.

Defaults to ‘HTML’

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 absolute path URL by prefixing https:// for hyperlinks.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

      private enableAutoUrl : boolean = true;

    render() {
        return (
            <RichTextEditorComponent  enableAutoUrl ={this.enableAutoUrl} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to false

enableHtmlEncode

boolean

specifies the value whether the source code is displayed with encoded format.

Defaults to false.

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence

boolean

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

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private enablePersistence : boolean = true;

    render() {
        return (
            <RichTextEditorComponent  enablePersistence ={this.enablePersistence} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to false.

enableResize

boolean

Enables or disables the resizing option in the editor. If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.

import { HtmlEditor, Image, Inject, Resize, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private enableResize : boolean = true;

    render() {
        return (
            <RichTextEditorComponent  enableResize ={this.enableResize} >
                <Inject services={[Link, Resize, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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 { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private enableTabKey : boolean = true;

    render() {
        return (
            <RichTextEditorComponent  enableTabKey ={this.enableTabKey} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to false

enableXhtml

boolean

Specifies a value that indicates whether the xhtml is enabled or not.

Defaults to false.

enabled

boolean

Specifies a value that indicates whether the component is enabled or not.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private enabled : boolean = true;

    render() {
        return (
            <RichTextEditorComponent  enabled ={this.enabled} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to true.

fileManagerSettings

FileManagerSettingsModel

Specifies the image manager options in Rich Text Editor component and control with the following properties.

  • enable - set boolean value to enable or disable the image manager.
  • ajaxSettings - Specifies the AJAX settings of the image manager.
  • contextMenuSettings - Specifies the context menu settings of the image manager.
  • navigationPaneSettings - Specifies the navigation pane settings of the image manager.
  • toolbarSettings - Specifies the group of items aligned horizontally in the toolbar.
  • uploadSettings - Specifies the upload settings for the image manager.

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

Preserves the toolbar at the top of the Rich Text Editor on scrolling and specifies the offset of the floating toolbar from documents top position

Defaults to 0

fontColor

FontColorModel

Predefine the color palette that can be rendered for font color toolbar command .

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,FontColorModel } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

     private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'FontColor']
    };

     private fontColor : FontColorModel = { columns: 2, colorCode: { 'Custom': ['#ffff00',  '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}}

    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.toolbarSettings} fontColor={this.fontColor} >
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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

Predefine the font families that populate in font family dropdown list from the toolbar.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,FontFamilyModel } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

     private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'FontName']
    };

    private fontFamily: FontFamilyModel = {
    default: "Segoe UI",
    width: "65px",
    items: [{ text: "Segoe UI", value: "Segoe UI" }]
  };


    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.toolbarSettings} fontFamily={this.fontFamily}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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

Predefine the font sizes that populate in font size dropdown list from the toolbar.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,FontSizeModel } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

     private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'FontSize']
    };

     private fontSize: FontSizeModel ={ default: '8', width: '35px', items: [ { text: '8', value: '8pt' },{ text: '10', value: '10pt' } ]}


    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.toolbarSettings} fontSize={this.fontSize}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to { default: ‘10’, 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

Predefine the collection of paragraph styles along with quote and code style that populate in format dropdown from the toolbar.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,FormatModel } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

     private toolbarSettings: ToolbarSettingsModel = {
        items: [ 'Formats']
    };

      private format : FormatModel ={ default: 'Paragraph', width:'65px', types: [ { text: 'Paragraph' }, { text: 'Code' }, { text: 'Quotation' }, { text: 'Heading 1' }, { text: 'Heading 2' }, { text: 'Heading 3' }, { text: 'Heading 4' }, { text: 'Heading 5' }, { text: 'Heading 6' } ]}


    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.toolbarSettings} format={this.format}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to { default: ‘Paragraph’, width: ‘65px’, types: [ { text: ‘Paragraph’ }, { text: ‘Code’ }, { text: ‘Quotation’ }, { text: ‘Heading 1’ }, { text: ‘Heading 2’ }, { text: ‘Heading 3’ }, { text: ‘Heading 4’ }, { text: ‘Heading 5’ }, { text: ‘Heading 6’ } ]}

formatter

IFormatter

Customize keyCode to change the key value.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

      private formatter : IFormatter =null;

    render() {
        return (
            <RichTextEditorComponent formatter={this.formatter}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to null

height

string | number

Specifies the height of the Rich Text Editor component.

Defaults to “auto”

htmlAttributes

Object

Allows additional HTML attributes such as title, name, etc., and It will be accepts n number of attributes in a key-value pair format.

Defaults to {}.

iframeSettings

IFrameSettingsModel

Specifies the items to be rendered in an iframe mode, and it has the following properties.

  • enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
  • attributes - Custom style to be used inside the iframe to display content. This style is added to the iframe body.

  • resources - we can add both styles and scripts to the iframe.

    1. styles[] - An array of CSS style files to inject inside the iframe to display content

    2. scripts[] - An array of JS script files to inject inside the iframe

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,IFrameSettingsModel} from ‘@syncfusion/ej2-react-richtexteditor’; import * as React from ‘react’; import * as ReactDOM from ‘react-dom’; import { SampleBase } from ‘../common/sample-base’;

export class Default extends SampleBase<{}, {}> {

 private iframe: IFrameSettingsModel = { enable: true };

render() {
    return (
        <RichTextEditorComponent iframeSettings={this.iframe}>
            <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
        </RichTextEditorComponent>
    );
}

}

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

<h3 class="doc-prop-wrapper" id="inlinemode" data-Path="inlinemode-inlineMode">
<a href="#inlinemode" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>inlineMode</span>

<span class="doc-prop-type"> [`InlineModeModel`](./inlineModeModel)
</span>

</h3>


Enable or disable the inline edit mode.
* enable - set boolean value to enable or disable the inline edit mode.
* onSelection - If its set to true, upon selecting the text, the toolbar is opened in inline.
If its set to false, upon clicking to the target element, the toolbar is opened.
``` tsx

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

      private inlineMode: object = { enable: true, onSelection: true };

    render() {
        return (
            <RichTextEditorComponent inlineMode={this.inlineMode}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to { enable: false, onSelection: true}

insertImageSettings

ImageSettingsModel

Specifies the image insert options in Rich Text Editor component and control with the following properties.

  • allowedTypes - Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
  • display - Sets the default display for an image when it is inserted in to the RichTextEditor. Possible options are: ‘inline’ and ‘block’.
  • width - Sets the default width of the image when it is inserted in the RichTextEditor.

  • saveFormat - Specifies the format to store the image in the Rich Text Editor (Base64 or Blob).

    If you want to insert a lot of tiny images in the editor and don’t want a specific physical location for saving images, you can opt to save format as Base64.

  • height - Sets the default height of the image when it is inserted in the RichTextEditor.
  • saveUrl - Specifies the service URL of save action that will receive the uploaded files and save them in the server.

  • path - Specifies the path of the location to store the images and refer it to display the images.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,ImageSettingsModel} from ‘@syncfusion/ej2-react-richtexteditor’; import * as React from ‘react’; import * as ReactDOM from ‘react-dom’; import { SampleBase } from ‘../common/sample-base’;

export class Default extends SampleBase<{}, {}> {

private insertImageSettings :ImageSettingsModel = { allowedTypes: [‘.jpeg’, ‘.jpg’, ‘.png’], display: ‘inline’, width: ‘auto’, height: ‘auto’, saveFormat: ‘Blob’, saveUrl: null, path: null}

render() {
    return (
        <RichTextEditorComponent insertImageSettings={this.insertImageSettings}>
            <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
        </RichTextEditorComponent>
    );
}

}

Defaults to *{ allowedTypes: ['.jpeg', '.jpg', '.png'], display: 'inline', width: 'auto', height: 'auto', saveFormat: 'Blob' saveUrl: null, path: null,}*

<h3 class="doc-prop-wrapper" id="keyconfig" data-Path="keyconfig-keyConfig">
<a href="#keyconfig" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>keyConfig</span>

<span class="doc-prop-type"> ``Object``
</span>

</h3>


Customizes the key actions in RichTextEditor.
For example, when using German keyboard, the key actions can be customized using these shortcuts.
``` tsx

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

   private keyConfig : Object= {
    'undo': 'ctrl+z',
    'redo': 'ctrl+y',
    'copy': 'ctrl+c'
    }

    render() {
        return (
            <RichTextEditorComponent keyConfig={this.keyConfig}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private maxLength :number = 500;

    render() {
        return (
            <RichTextEditorComponent maxLength={this.maxLength}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to -1

pasteCleanupSettings

PasteCleanupSettingsModel

Specifies the pasting options in Rich Text Editor component and control with the following properties.

  • prompt - Set boolean value to enable or disable the prompt when pasting.
  • deniedAttrs - Specifies the attributes to restrict when pasting in RTE.
  • allowedStyleProps - Specifies the allowed style properties when pasting in RTE.
  • deniedTags - Specifies the tags to restrict when pasting in RTE.
  • keepFormat - Set boolean value to keep or remove the from when pasting.

  • plainText - Set boolean value to paste as plain text or not.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,PasteCleanupSettingsModel} from ‘@syncfusion/ej2-react-richtexteditor’; import * as React from ‘react’; import * as ReactDOM from ‘react-dom’; import { SampleBase } from ‘../common/sample-base’;

export class Default extends SampleBase<{}, {}> {

  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}

render() {
    return (
        <RichTextEditorComponent pasteCleanupSettings={this.pasteCleanupSettings}>
            <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
        </RichTextEditorComponent>
    );
}

}

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', '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}*

<h3 class="doc-prop-wrapper" id="placeholder" data-Path="placeholder-placeholder">
<a href="#placeholder" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>placeholder</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


Specifies the placeholder for the RichTextEditor’s content used when the Rich Text Editor body is empty.

Defaults to *null.*

<h3 class="doc-prop-wrapper" id="quicktoolbarsettings" data-Path="quicktoolbarsettings-quickToolbarSettings">
<a href="#quicktoolbarsettings" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>quickToolbarSettings</span>

<span class="doc-prop-type"> [`QuickToolbarSettingsModel`](./quickToolbarSettingsModel)
</span>

</h3>


Specifies the items to be rendered in quick toolbar based on the target element.
* It has following fields:
* enable - set boolean value to show or hide the quick toolbar
* actionOnScroll - it has two possible options
    1. hide: The quickToolbar is closed when the parent element is scrolled.
    2. none: The quickToolbar cannot be closed even the parent element is scrolled.
* link  - Specifies the items to be rendered in quick toolbar based on link element such as `Open`, `Edit`, and `UnLink`.
* image - Specifies the items to be rendered in quick toolbar based on image element such as 'Replace',
'Align', 'Caption', 'Remove', 'InsertLink', 'Display', 'AltText', 'Dimension'.
* text	 - Specifies the items to be rendered in quick toolbar based on text element such as 'Cut', 'Copy', 'Paste'.
``` tsx

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,QuickToolbarSettingsModel} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

       private quickToolbarSettings : QuickToolbarSettingsModel = { enable: true, actionOnScroll: 'hide', link: ['Open', 'Edit', 'UnLink'], image: ['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'Display', 'AltText', 'Dimension'], text: ['Cut', 'Copy', 'Paste']}

    render() {
        return (
            <RichTextEditorComponent quickToolbarSettings={this.quickToolbarSettings}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to { enable: true, actionOnScroll: ‘hide’, link: [‘Open’, ‘Edit’, ‘UnLink’], image: [‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ’-’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’], text: [‘Cut’, ‘Copy’, ‘Paste’]}

readonly

boolean

The user interactions on the component are disabled, when set to true.

Defaults to false.

saveInterval

number

Specifies the saveInterval in milliseconds for autosave the value. The change event will be triggered if the content was changed from the last saved interval.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,QuickToolbarSettingsModel} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

      private saveInterval :number = 500;

    render() {
        return (
            <RichTextEditorComponent saveInterval={this.saveInterval}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to 10000

showCharCount

boolean

Sets Boolean value to enable or disable the display of the character counter.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,Count} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    render() {
        return (
            <RichTextEditorComponent showCharCount={true}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to false

tableSettings

TableSettingsModel

Specifies the table insert options in Rich Text Editor component and control with the following properties.

  • styles - Class name should be appended by default in table element. It helps to design the table in specific CSS styles always when inserting in editor.
  • width - Sets the default width of the table when it is inserted in the RichTextEditor.
  • minWidth - Sets the default minWidth of the table when it is inserted in the RichTextEditor.
  • maxWidth - Sets the default maxWidth of the table when it is inserted in the RichTextEditor.

  • resize - To enable resize the table.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,TableSettingsModel} from ‘@syncfusion/ej2-react-richtexteditor’; import * as React from ‘react’; import * as ReactDOM from ‘react-dom’; import { SampleBase } from ‘../common/sample-base’;

export class Default extends SampleBase<{}, {}> {

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}

render() {
    return (
        <RichTextEditorComponent tableSettings={this.tableSettings}>
            <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
        </RichTextEditorComponent>
    );
}

}

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,}*

<h3 class="doc-prop-wrapper" id="toolbarsettings" data-Path="toolbarsettings-toolbarSettings">
<a href="#toolbarsettings" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>toolbarSettings</span>

<span class="doc-prop-type"> [`ToolbarSettingsModel`](./toolbarSettingsModel)
</span>

</h3>


Specifies the group of items aligned horizontally in the toolbar as well as defined the toolbar rendering type.
By default, toolbar is float at the top of the RichTextEditor.
When you scroll down, the toolbar will scroll along with the page on Rich Text Editor with the specified offset value.
* enable: set boolean value to show or hide the toolbar.
* enableFloating: Set Boolean value to enable or disable the floating toolbar.
Preserves the toolbar at top of the Rich Text Editor on scrolling.
* type: it has two possible options
     1. Expand: Hide the overflowing toolbar items in the next row. Click the expand arrow to view overflowing toolbar items
     2. MultiRow: The toolbar overflowing items wrapped in the next row.
* items: Specifies the array of items aligned horizontally in the toolbar.
> | and - can insert a vertical and horizontal separator lines in the toolbar.
* itemConfigs: Modify the default toolbar item configuration like icon class.
> By default, The toolbar is rendered with scrollable in mobile devices and does not support the toolbar type.

``` tsx

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter ,ToolbarModule} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {
    
       public tools: ToolbarModule = {
        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']
    };

    render() {
        return (
            <RichTextEditorComponent toolbarSettings={this.tools}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

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 count of undo history which is stored in undoRedoManager.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    render() {
        return (
            <RichTextEditorComponent undoRedoSteps={30}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to 30

undoRedoTimer

number

Specifies the interval value in milliseconds that store actions in undoRedoManager. The minimum value is 300 milliseconds.

Defaults to 300

value

string

Specifies the value displayed in the RichTextEditor’s content area and it should be string. The content of Rich Text Editor can be loaded with dynamic data such as database, AJAX content, and more.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private value ='rich text editor';

    render() {
        return (
            <RichTextEditorComponent value={this.value}>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
            </RichTextEditorComponent>
        );
    }
}

Defaults to null

valueTemplate

string

Accepts the template design and assigns it as RichTextEditor’s content. The built-in template engine which provides options to compile template string into a executable function. For EX: We have expression evolution as like ES6 expression string literals

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, ToolbarSettingsModel ,IFormatter } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {

    private value ='rich text editor';

    render() {
        return (
            <RichTextEditorComponent>
                <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar]} />
                  <div>rich text editor</div>
            </RichTextEditorComponent>
        );
    }
}

Defaults to null

width

string | number

Specifies the width of the RichTextEditor.

Defaults to ‘100%’

Methods

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

Returns void

disableToolbarItem

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

Parameter Type Description
items string | string[] Specifies the single or collection of items
that you want to be disable in Rich Text Editor’s Toolbar.
muteToolbarUpdate (optional) boolean enable/disables the toolbar item status in RichTextEditor.

Returns void

enableToolbarItem

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

Parameter Type Description
items string | string[] Specifies the single or collection of items
that you want to be enable in Rich Text Editor’s Toolbar.
muteToolbarUpdate (optional) boolean enable/disables the toolbar item status in RichTextEditor.

Returns void

executeCommand

Executes the commands

Returns void

focusIn

Focuses the Rich Text Editor component

Returns void

focusOut

Blurs the Rich Text Editor component

Returns void

getCharCount

Returns the maximum number of characters in the Rich Text Editor.

Returns number

getContent

Returns the HTML or Text inside the RichTextEditor.

Returns Element

getHtml

Retrieves the HTML from RichTextEditor.

Returns string

getRange

Get the selected range from the RichTextEditor’s content.

Returns Range

getSelectedHtml

Returns the html value of the selected content as string.

Returns string

getSelection

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

Returns string

getText

Returns the text content as string.

Returns string

getXhtml

Retrieves the Rich Text Editor’s XHTML validated HTML content when enableXhtml property is enabled.

Returns string

hideInlineToolbar

It hides the inline quick toolbar

Returns void

print

By default, prints all the pages of the RichTextEditor.

Returns void

refreshUI

Refresh the view of the editor.

Returns void

removeToolbarItem

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

Parameter Type Description
items string | string[] Specifies the single or collection of items
that you want to be remove from Rich Text Editor’s Toolbar.

Returns void

sanitizeHtml

This method will clean up the HTML against cross-site scripting attack and return the HTML as string. It’s only applicable to editorMode as HTML.

Parameter Type Description
value string Specifies the value that you want to sanitize.

Returns string

selectAll

Selects all the content in RichTextEditor

Returns void

selectRange

Selects a content range or an element

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

Returns void

showFullScreen

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

Returns void

showInlineToolbar

It shows the inline quick toolbar

Returns void

showSourceCode

Shows the source HTML/MD markup.

Returns void

Events

actionBegin

EmitType<ActionBeginEventArgs>

Triggers before command execution using toolbar items or executeCommand method. If you cancel this event, the command cannot be executed. Set the cancel argument to true to cancel the command execution.

actionComplete

EmitType<ActionCompleteEventArgs>

Triggers after command execution using toolbar items or executeCommand method.

afterImageDelete

EmitType<AfterImageDeleteEventArgs>

Event triggers when the selected image is cleared from the Rich Text Editor Content.

beforeDialogClose

EmitType<BeforeCloseEventArgs>

Event triggers when the dialog is being closed. If you cancel this event, the dialog remains opened. Set the cancel argument to true to prevent closing a dialog.

beforeDialogOpen

EmitType<BeforeOpenEventArgs>

Event triggers when the dialog is being opened. If you cancel this event, the dialog remains closed. Set the cancel argument to true to cancel the open of a dialog.

beforeImageUpload

EmitType<BeforeUploadEventArgs>

Event triggers before the image upload process.

beforeQuickToolbarOpen

EmitType<BeforeQuickToolbarOpenArgs>

Event triggers when the quick toolbar is being opened.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value. It’s only applicable to editorMode as HTML.

blur

EmitType<Object>

Triggers when Rich Text Editor is focused out.

change

EmitType<ChangeEventArgs>

Triggers only when Rich Text Editor is blurred and changes are done to the content.

created

EmitType<Object>

Triggers when the Rich Text Editor is rendered.

destroyed

EmitType<Object>

Triggers when the Rich Text Editor is destroyed.

dialogClose

EmitType<Object>

Event triggers after the dialog has been closed.

dialogOpen

EmitType<Object>

Event triggers when a dialog is opened.

focus

EmitType<Object>

Triggers when Rich Text Editor is focused in

imageRemoving

EmitType<RemovingEventArgs>

Event triggers when the selected image is cleared from the insert image dialog.

imageSelected

EmitType<SelectedEventArgs>

Event triggers when the image is selected or dragged into the insert image dialog.

imageUploadFailed

EmitType<Object>

Event triggers when there is an error in the image upload.

imageUploadSuccess

EmitType<Object>

Event triggers when the image is successfully uploaded to the server side.

imageUploading

EmitType<UploadingEventArgs>

Event triggers when the selected image begins to upload in the insert image dialog.

quickToolbarClose

EmitType<Object>

Event triggers after the quick toolbar has been closed.

quickToolbarOpen

EmitType<Object>

Event triggers when a quick toolbar is opened.

resizeStart

EmitType<ResizeArgs>

Triggers only when start resize the image.

resizeStop

EmitType<ResizeArgs>

Triggers only when stop resize the image.

resizing

EmitType<ResizeArgs>

Triggers only when resizing the image.

toolbarClick

EmitType<Object>

Triggers when Rich Text Editor Toolbar items is clicked.

Previous
Next