Interface for a class RichTextEditor
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.
EmitType<ActionCompleteEventArgs>
Triggers after command execution using toolbar items or executeCommand method.
EmitType<AfterImageDeleteEventArgs>
Event triggers when the selected image is cleared from the Rich Text Editor Content.
EmitType<AfterMediaDeleteEventArgs>
Event triggers when the selected media is cleared from the Rich Text Editor Content.
EmitType<any>
Triggers after cleanup the copied content.
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.
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.
EmitType<BeforeUploadEventArgs>
Event triggers before the media audio/video upload process.
Triggers before drop the image.
EmitType<BeforeUploadEventArgs>
Event triggers before the image upload process.
Triggers before cleanup the copied content.
EmitType<BeforeQuickToolbarOpenArgs>
Event triggers when the quick toolbar is being opened.
EmitType<BeforeSanitizeHtmlArgs>
Event triggers before sanitize the value. It’s only applicable to editorMode as HTML
.
EmitType<Object>
Triggers when Rich Text Editor is focused out.
Triggers only when Rich Text Editor is blurred and changes are done to the content.
EmitType<Object>
Triggers when the Rich Text Editor is rendered.
EmitType<Object>
Triggers when the Rich Text Editor is destroyed.
EmitType<Object>
Event triggers after the dialog has been closed.
EmitType<Object>
Event triggers when a dialog is opened.
Event triggers when the selected media is cleared from the insert audio/video dialog.
Event triggers when the media is selected or dragged into the insert media audio/video dialog.
EmitType<Object>
Event triggers when there is an error in the media upload.
EmitType<Object>
Event triggers when the media is successfully uploaded to the server side.
Event triggers when the selected media begins to upload in the insert media audio/video dialog.
EmitType<Object>
Triggers when Rich Text Editor is focused in
Event triggers when the selected image is cleared from the insert image dialog.
Event triggers when the image is selected or dragged into the insert image dialog.
EmitType<Object>
Event triggers when there is an error in the image upload.
EmitType<Object>
Event triggers when the image is successfully uploaded to the server side.
Event triggers when the selected image begins to upload in the insert image dialog.
EmitType<Object>
Event triggers after the quick toolbar has been closed.
EmitType<Object>
Event triggers when a quick toolbar is opened.
Triggers only when start resize the image.
Triggers only when stop resize the image.
Triggers only when resizing the image.
EmitType<Object>
Triggers when Rich Text Editor Toolbar items is clicked.
EmitType<Object>
This event is deprecated and no longer works. Use updatedToolbarStatus
event to get the undo and redo status.
EmitType<ToolbarStatusEventArgs>
Triggers when the toolbar items status is updated.
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.
Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor [toolbarSettings]='tools' [backgroundColor]='backgroundColor' ></ejs-richtexteditor>",
})
export class AppComponent {
public backgroundColor = { columns: 2, colorCode: { 'Custom': ['#ffff00', '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}}
public tools = {
items: [ 'BackgroundColor' ]
};
}
Predefine the advanced list types that populate in the bulletFormatList dropdown list from the toolbar.
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.
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>.Specifies the emoji picker options in Rich Text Editor with the following properties.
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 { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor' [enableAutoUrl]='true' ></ejs-richtexteditor>",
})
export class AppComponent {
}
boolean
specifies the value whether the source code is displayed with encoded format.
boolean
Defines whether to allow the cross-scripting site or not.
boolean
Enables or disables the persisting component’s state between page reloads. If enabled, the value of Rich Text Editor is persisted
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor' [enablePersistence]='true' ></ejs-richtexteditor>",
})
export class AppComponent {
}
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 { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor [enableResize]='true'></ejs-richtexteditor>",
})
export class AppComponent {
}
boolean
Enable or disable rendering component in right to left direction.
boolean
Allows the tab key action in the Rich Text Editor content.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor [enableTabKey]='true'></ejs-richtexteditor>",
})
export class AppComponent {
}
boolean
Specifies a value that indicates whether the xhtml is enabled or not.
boolean
Specifies a value that indicates whether the component is enabled or not.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor [enabled]='true'></ejs-richtexteditor>",
})
export class AppComponent {
}
Specifies tag to be inserted when enter key is pressed.
P
- When the enter key is pressed a p
tag will be inserted and the default value of the Rich Text Editor will be <p><br></p>.DIV
- When the enter key is pressed a div
tag will be inserted instead of the default P
tag and the default value of the Rich Text Editor will be <div><br></div>.BR
- When the enter key is pressed a br
tag will be inserted instead of the default P
tag and the default value of the Rich Text Editor will be <br>.Specifies the image manager options in Rich Text Editor component and control with the following properties.
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
Predefine the color palette that can be rendered for font color toolbar command .
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: " <ejs-richtexteditor [toolbarSettings]='tools' [fontColor]='fontColor'></ejs-richtexteditor>",
})
export class AppComponent {
public fontColor = { columns: 2, colorCode: { 'Custom': ['#ffff00', '#008000', '#800080', '#800000', '#808000', '#c0c0c0', '#000000','']}}
public tools = {
items: [ 'fontColor']
};
}
Predefine the font families that populate in font family dropdown list from the toolbar.
import { Component } from "@angular/core";
import { FontFamilyModel } from "@syncfusion/ej2-angular-richtexteditor";
import { ToolbarModule } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [toolbarSettings]='tools' [fontFamily]='fontFamily'></ejs-richtexteditor>"
})
export class AppComponent {
public fontFamily: FontFamilyModel = {
default: "Segoe UI",
width: "65px",
items: [{ text: "Segoe UI", value: "Segoe UI" }]
};
public tools: ToolbarModule = {
items: ["FontName"]
};
}
Predefine the font sizes that populate in font size dropdown list from the toolbar.
import { Component } from "@angular/core";
import { FontSizeModel } from "@syncfusion/ej2-angular-richtexteditor";
import { ToolbarModule } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [toolbarSettings]='tools' [fontSize]='fontSize'></ejs-richtexteditor>"
})
export class AppComponent {
public fontSize: FontSizeModel ={ default: '10pt', width: '35px', items: [ { text: '8', value: '8pt' },{ text: '10', value: '10pt' } ]}
public tools: ToolbarModule = {
items: ["FontSize"]
};
}
Predefine the collection of paragraph styles along with quote and code style that populate in format dropdown from the toolbar.
import { Component } from "@angular/core";
import { FormatModel } from "@syncfusion/ej2-angular-richtexteditor";
import { ToolbarModule } from "@syncfusion/ej2-angular-navigations";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [toolbarSettings]='tools' [format]='format'></ejs-richtexteditor>"
})
export class AppComponent {
public 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' } ]}
public tools: ToolbarModule = {
items: ["Formats"]
};
}
Specifies the format painter options in Rich Text Editor with the following properties.
import { Component } from "@angular/core";
import { RichTexEditorComponent, HtmlEditor, Toolbar, FormatPainter, ToolbarSettingsModel, FormatPainterSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@component({
selector: "app-root",
template:
" <ejs-richtexteditor id = 'formatPainterRTE' [toolbarSettings]='toolbarSettings' [formatPainterSettings]='formatPainterSettings'></ejs-richtexteditor>",
providers: [HtmlEditor, Toolbar, FormatPainter]
})
export class AppComponent {
public toolbarSettings: ToolbarSettingsModel = {
items: ['FormatPainter']
};
public formatPainterSettings: FormatPainterSettingsModel = {
allowedFormats: 'span; strong;',
deniedFormats: 'span(important)'
};
}
Customize keyCode to change the key value.
import { Component } from "@angular/core";
import { IFormatter } from "@syncfusion/ej2-angular-richtexteditor";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [formatter]='formatter'></ejs-richtexteditor>"
})
export class AppComponent {
public formatter : IFormatter =null;
}
string
| number
Specifies the height of the Rich Text Editor component.
{ [key: string]: string }
Allows additional HTML attributes such as title, name, etc., and It will be accepts n number of attributes in a key-value pair format.
Specifies the items to be rendered in an iframe mode, and it has the following properties.
import { Component } from "@angular/core";
import { IFrameSettingsModel } from "@syncfusion/ej2-angular-richtexteditor";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [iframeSettings]='iframe'></ejs-richtexteditor>"
})
export class AppComponent {
public iframe: IFrameSettingsModel = { enable: true };
}
Enable or disable the inline edit mode.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [inlineMode]='inlineMode' ></ejs-richtexteditor>"
})
export class AppComponent {
public inlineMode: object = { enable: true, onSelection: true };
}
Specifies the audio insert options in Rich Text Editor component and control with the following properties.
saveFormat - Specifies the format to store the audio in the Rich Text Editor (Base64 or Blob).
If you want to insert a lot of tiny audios in the editor and don’t want a specific physical location for saving audios, you can opt to save format as Base64.
Specifies the image insert options in Rich Text Editor component and control with the following properties.
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.
import { Component } from "@angular/core";
import {ImageSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [insertImageSettings]='insertImageSettings' ></ejs-richtexteditor>"
})
export class AppComponent {
public insertImageSettings :ImageSettingsModel = { allowedTypes: ['.jpeg', '.jpg', '.png'], display: 'inline', width: 'auto', height: 'auto', saveFormat: 'Blob', saveUrl: null, path: null,}
}
Specifies the video insert options in Rich Text Editor component and control with the following properties.
saveFormat - Specifies the format to store the video in the Rich Text Editor (Base64 or Blob).
If you want to insert a lot of tiny videos in the editor and don’t want a specific physical location for saving videos, you can opt to save format as Base64.
{ [key: string]: string }
Customizes the key actions in RichTextEditor. For example, when using German keyboard, the key actions can be customized using these shortcuts.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [keyConfig]='keyConfig' ></ejs-richtexteditor>"
})
export class AppComponent {
public keyConfig : Object= { 'undo': 'ctrl+z',
'redo': 'ctrl+y',
'copy': 'ctrl+c'}
}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
number
Specifies the maximum number of characters allowed in the Rich Text Editor component.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [maxLength]='maxLength'></ejs-richtexteditor>"
})
export class AppComponent {
public maxLength :number= 500;
}
Predefine the advanced list types that populate in the numberFormatList dropdown list from the toolbar.
Specifies the pasting options in Rich Text Editor component and control with the following properties.
import { Component } from "@angular/core";
import {PasteCleanupSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [pasteCleanupSettings]='pasteCleanupSettings'></ejs-richtexteditor>"
})
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}
}
string
Specifies the placeholder for the RichTextEditor’s content used when the Rich Text Editor body is empty.
Specifies the items to be rendered in quick toolbar based on the target element.
Open
, Edit
, and UnLink
.import { Component } from "@angular/core";
import { ToolbarService, LinkService, ImageService,QuickToolbarSettingsModel, HtmlEditorService, RichTextEditorComponent, TableService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [quickToolbarSettings]='quickToolbarSettings'></ejs-richtexteditor>"
})
export class AppComponent {
public quickToolbarSettings : QuickToolbarSettingsModel = { enable: true, actionOnScroll: 'hide', link: ['Open', 'Edit', 'UnLink'], image: ['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'Display', 'AltText', 'Dimension'], text: ['Cut', 'Copy', 'Paste']}
}
boolean
The user interactions on the component are disabled, when set to true.
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 { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [saveInterval]='saveInterval'></ejs-richtexteditor>"
})
export class AppComponent {
public saveInterval : number = 500;
}
Specifies tags to be inserted when shift+enter key is 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. boolean
Sets Boolean value to enable or disable the display of the character counter.
import { Component } from "@angular/core";
import { RichTextEditorComponent, ToolbarService, CountService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [showCharCount]='true'></ejs-richtexteditor>"
})
export class AppComponent {
}
boolean
Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.
Specifies the table insert options in Rich Text Editor component and control with the following properties.
import { Component } from "@angular/core";
import { ToolbarService,TableSettingsModel, RichTextEditorComponent, TableService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [tableSettings]='tableSettings'></ejs-richtexteditor>"
})
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}
}
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.
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.
import { Component } from "@angular/core";
import {ToolbarModule } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [toolbarSettings]='tools' ></ejs-richtexteditor>"
})
export class AppComponent {
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']
};
}
number
Specifies the count of undo history which is stored in undoRedoManager.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [undoRedoSteps]='30'></ejs-richtexteditor>"
})
export class AppComponent {
}
number
Specifies the interval value in milliseconds that store actions in undoRedoManager. The minimum value is 300 milliseconds.
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 { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor [value]='value'></ejs-richtexteditor>"
})
export class AppComponent {
public value ='rich text editor';
}
string
| Function
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 { Component } from "@angular/core";
@Component({
selector: "app-root",
template:
" <ejs-richtexteditor> <ng-template #valueTemplate> rich text editor</ng-template></ejs-richtexteditor>"
})
export class AppComponent {
}
string
| number
Specifies the width of the RichTextEditor.