Toolbar in Angular Rich Text Editor component
11 Feb 202524 minutes to read
The Syncfusion Angular Rich Text Editor component provides a versatile and powerful toolbar to enhance your text editing experience. The toolbar contains a variety of formatting, styling, and editing tools, allowing users to create and modify content efficiently.
Tools
Default Toolbar Items
By default, the Angular Rich Text Editor displays the following toolbar items:
Bold
,Italic
,Underline
,|
,Formats
,Alignments
,Blockquote
,OrderedList
,UnorderedList
,|
,CreateLink
,Image
,|
,SourceCode
,Undo
,Redo
These default items cover essential text editing features, such as text formatting, lists, alignment, and linking.
Available Toolbar Items
The following table shows the list of available tools in the Rich Text Editor’s toolbar.
The order of items in the toolbar can be customized to meet your application’s requirements. If no specific order is set, the editor will render the above default toolbar items. Below is a list of all available toolbar items in the Rich Text Editor.
Text formatting
It provides tools for applying text styles such as bold, italic, underline, strike-through, and more to modify the appearance of the text.
Name | Icons | Summary | Initialization |
---|---|---|---|
Bold | ![]() |
Text that is thicker and darker than usual. | toolbarSettings: { items: [‘Bold’]} |
Italic | ![]() |
Shows a text that is leaned to the right. | toolbarSettings: { items: [‘Italic’]} |
Underline | ![]() |
The underline is added to the selected text. | toolbarSettings: { items: [‘Underline’]} |
StrikeThrough | ![]() |
Apply double line strike through formatting for the selected text. | toolbarSettings: { items: [‘StrikeThrough’]} |
ClearFormat | ![]() |
The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles. | toolbarSettings: { items: [‘ClearFormat’]} |
Blockquote | ![]() |
Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: [‘Blockquote’]} |
SubScript | ![]() |
Makes the selected text as subscript (lower). | toolbarSettings: { items: [‘SubScript’]} |
SuperScript | ![]() |
Makes the selected text as superscript (higher). | toolbarSettings: { items: [‘SuperScript’]} |
LowerCase | ![]() |
Change the case of selected text to lower in the content. | toolbarSettings: { items: [‘LowerCase’]} |
UpperCase | ![]() |
Change the case of selected text to upper in the content. | toolbarSettings: { items: [‘UpperCase’’]} |
Font & styling
Tools in this section allow users to customize font properties such as font family, size, color, background color, and paragraph formatting.
Name | Icons | Summary | Initialization |
---|---|---|---|
FontName | ![]() |
Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor’s toolbar. | toolbarSettings: { items: [‘FontName’]} |
FontSize | ![]() |
Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor’s toolbar. | toolbarSettings: { items: [‘FontSize’]} |
FontColor | ![]() |
Specifies an array of colors can be used in the colors popup for font color. | toolbarSettings: { items: [‘FontColor’]} |
BackgroundColor | ![]() |
Specifies an array of colors can be used in the colors popup for background color. | toolbarSettings: { items: [‘BackgroundColor’]} |
Formats (Paragraph, Headings) | ![]() |
An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. | toolbarSettings: { items: [‘Formats’]} |
Alignment
This section provides alignment options for the text or content, allowing users to justify text or align it to the left, center, or right.
Name | Icons | Summary | Initialization |
---|---|---|---|
Alignment | ![]() |
Align the content with left, center, and right margin. | toolbarSettings: { items: [‘Alignments’]} |
JustifyLeft | ![]() |
Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: [‘JustifyLeft’]} |
JustifyCenter | ![]() |
There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: [‘JustifyCenter’]} |
JustifyRight | ![]() |
Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: [‘JustifyRight’]} |
JustifyFull | ![]() |
The text is aligned with both right and left margins. | toolbarSettings: { items: [‘JustifyFull’]} |
Lists & indentation
Tools here allow users to create ordered and unordered lists, change the list style, and adjust indentation levels for improved document structure.
Name | Icons | Summary | Initialization |
---|---|---|---|
OrderedList | ![]() |
Create a new list item(numbered). | toolbarSettings: { items: [‘OrderedList’]} |
UnorderedList | ![]() |
Create a new list item(bulleted). | toolbarSettings: { items: [‘UnorderedList’]} |
NumberFormatList | ![]() |
Allows to create list items with various list style types(numbered). | toolbarSettings: { items: [‘NumberFormatList’]} |
BulletFormatList | ![]() |
Allows to create list items with various list style types(bulleted). | toolbarSettings: { items: [‘BulletFormatList’]} |
Indent | ![]() |
Allows to increase the indent level of the content. | toolbarSettings: { items: [‘Indent’]} |
Outdent | ![]() |
Allows to decrease the indent level of the content. | toolbarSettings: { items: [‘Outdent’]} |
Hyperlinks
This section provides tools for inserting and managing hyperlinks within the content. Users can create new links or modify existing ones to enhance document navigation and interactivity.
Name | Icons | Summary | Initialization |
---|---|---|---|
Hyperlink | ![]() |
Creates a hyperlink to a text or image to a specific location in the content. | toolbarSettings: { items: [‘CreateLink’]} |
InsertLink | ![]() |
Allows users to add a link to a particular item. | toolbarSettings: { items: [‘InsertLink’]} |
Link quicktoolbar items
The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Editor, allowing users to add, edit, or remove links from selected text or images directly within the editor.
Name | Icons | Summary | Initialization |
---|---|---|---|
OpenLink | ![]() |
To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: [‘OpenLink’]} |
EditLink | ![]() |
Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: [‘EditLink’]} |
RemoveLink | ![]() |
Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: [‘RemoveLink’]} |
Images
This section contains the primary tool for inserting images into the editor.
Name | Icons | Summary | Initialization |
---|---|---|---|
Insert Image | ![]() |
Inserts an image from an online source or local computer. | toolbarSettings: { items: [‘Image’]} |
Image quicktoolbar items
The image quicktoolbar offers a set of tools to edit images inserted in the Rich Text Editor. It allows users to modify image properties, including alignment, size, alternate text, and links, enhancing image management in the content.
Name | Icons | Summary | Initialization |
---|---|---|---|
Replace Image | ![]() |
Replace the selected image with another image. | quickToolbarSettings: { image: [‘Replace’]} |
Align Image | ![]() |
The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: [‘Align’]} |
Remove Image | ![]() |
Allows to remove the selected image from the editor. | quickToolbarSettings: { image: [‘Remove’]} |
OpenImageLink | ![]() |
Opens the link that is attached to the selected image. | quickToolbarSettings: { image: [‘OpenImageLink’]} |
EditImageLink | ![]() |
Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: [‘EditImageLink’]} |
RemoveImageLink | ![]() |
Removes the link that is attached to the selected image. | quickToolbarSettings: { image: [‘RemoveImageLink’]} |
Display | ![]() |
Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: [‘Display’]} |
AltText | ![]() |
To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: [‘AltText’]} |
Dimension | ![]() |
Allows you to customize the image’s height and width. | quickToolbarSettings: { image: [‘Dimension’]} |
Tables
This section offers the main tool for creating tables within the content.
Name | Icons | Summary | Initialization |
---|---|---|---|
CreateTable | ![]() |
Create a table with defined columns and rows. | toolbarSettings: { items: [‘CreateTable’]} |
Table quicktoolbar items
The table quicktoolbar provides options for table editing within the Rich Text Editor. Users can insert or remove rows and columns, merge or split cells, and access table properties for easier table management and customization.
Name | Icons | Summary | Initialization |
---|---|---|---|
RemoveTable | ![]() |
Removes the selected table and its contents. | quickToolbarSettings: { table: [‘TableRemove’]} |
TableHeader | ![]() |
Allows you to add a table header. | quickToolbarSettings: { table: [‘TableHeader’]} |
TableColumns | ![]() |
Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: [‘TableColumns’]} |
TableRows | ![]() |
Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: [‘TableRows’]} |
TableCellHorizontalAlign | ![]() |
Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: [‘TableCellHorizontalAlign’]} |
TableCellVerticalAlign | ![]() |
Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: [‘TableCellVerticalAlign’]} |
TableEditProperties | ![]() |
Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: [‘TableEditProperties’]} |
Undo & redo
These tools allow users to easily undo or redo any changes made within the editor to restore or repeat previous actions.
Name | Icons | Summary | Initialization |
---|---|---|---|
Undo | ![]() |
Allows to undo the actions. | toolbarSettings: { items: [‘Undo’]} |
Redo | ![]() |
Allows to redo the actions. | toolbarSettings: { items: [‘Redo’]} |
Other tools
This section contains miscellaneous tools such as full-screen mode, print, preview, source code editing, and clearing all styles from text.
Name | Icons | Summary | Initialization |
---|---|---|---|
FullScreen | ![]() |
Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: [‘FullScreen’]} |
Maximize | ![]() |
Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: [‘Maximize’]} |
Minimize | ![]() |
Shrinks the editor to the default width and height. | toolbarSettings: { items: [‘Minimize’]} |
Preview | ![]() |
Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: [‘Preview’]} |
InsertCode | ![]() |
Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: [‘InsertCode’]} |
![]() |
Allows to print the editor content. | toolbarSettings: { items: [‘Print’]} | |
ClearAll | ![]() |
Removes all styles that have been applied to the selected text. | toolbarSettings: { items: [‘ClearAll’]} |
SourceCode | ![]() |
Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view. | toolbarSettings: { items: [‘SourceCode’]} |
Custom Toolbar Items
The Rich Text Editor allows you to configure your own commands to its toolbar using the toolbarSettings
property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind action to the command by getting its instance.
This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor.
The following code snippet illustrates custom tool with tooltip text which will be included in items
field of the toolbarSettings property.
To get start quickly with Custom tool configuration in Angular Rich Text Editor component, refer to the video below.
The Rich Text Editor provides options to customize tool functionalities. Use the undo
property to enable or disable the undo function for specific tools. Additionally, the click
property lets you configure and bind the onclick event of a tool to a specific method.
This sample demonstrates how to add a custom “Ω” icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities.
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, RichTextEditorComponent, NodeSelection, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
import { ButtonPropsModel } from '@syncfusion/ej2-popups';
import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';
@Component({
imports: [
RichTextEditorModule,
DialogModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='customEditor' #customEditor [toolbarSettings]='tools' (created)='onCreate()' [(value)]='value'>
</ejs-richtexteditor>
<ejs-dialog #Dialog id="editorDialog" [buttons]='dlgButtons' (overlayClick)="dialogOverlay()" [header]='header' [visible]='false'
[showCloseIcon]='false' [target]='target' (created)="dialogCreate()" [isModal]='true' [cssClass]='cssClass' [content]='contentData'>
</ejs-dialog>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
@ViewChild('customEditor')
public editorObj?: RichTextEditorComponent;
@ViewChild('Dialog')
public dialogObj?: DialogComponent;
public value: string = "<div style='display: block;'><p style='margin-right: 10px'>The custom command \"insert special character\" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p></div>";
public contentData: string = "<div id=\"rteSpecial_char\"><div class=\"char_block\" title=\"^\">^</div><div class=\"char_block\" title=\"_\">_</div><div class=\"char_block\" title=\"|\">|</div><div class=\"char_block\" title=\"¡\">¡</div><div class=\"char_block\" title=\"¢\">¢</div><div class=\"char_block\" title=\"£\">£</div><div class=\"char_block\" title=\"¤\">¤</div><div class=\"char_block\" title=\"¡\">¡</div><div class=\"char_block\" title=\"¢\">¢</div><div class=\"char_block\" title=\"£\">£</div><div class=\"char_block\" title=\"¤\">¤</div><div class=\"char_block\" title=\"¥\">¥</div><div class=\"char_block\" title=\"₹\">₹</div><div class=\"char_block\" title=\"¦\">¦</div><div class=\"char_block\" title=\"§\">§</div><div class=\"char_block\" title=\"¨\">¨</div><div class=\"char_block\" title=\"©\">©</div><div class=\"char_block\" title=\"ª\">ª</div><div class=\"char_block\" title=\"«\">«</div></div>";
public selection: NodeSelection = new NodeSelection();
public ranges?: Range;
public tools: ToolbarSettingsModel = {
items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
tooltipText: 'Insert Symbol',
undo: true,
click: this.onClick.bind(this),
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">'
+ '<div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>'
}, '|', 'Undo', 'Redo'
]
};
public dlgButtons: ButtonPropsModel[] = [{ buttonModel: { content: "Insert", isPrimary: true }, click: this.onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: this.dialogOverlay.bind(this) }];
public header: string = 'Special Characters';
public target: HTMLElement = document.getElementById('rteSection') as HTMLElement;
public height: string = '350px';
public onCreate(): void {
let customBtn: HTMLElement = document.getElementById('custom_tbar') as HTMLElement;
(this.dialogObj as DialogComponent).target = document.getElementById('rteSection') as HTMLElement;
}
public dialogCreate(): void {
let dialogCtn: HTMLElement = document.getElementById('rteSpecial_char') as HTMLElement;
dialogCtn.onclick = (e: Event) => {
let target: HTMLElement = e.target as HTMLElement;
let activeEle: Element = this.dialogObj!.element.querySelector('.char_block.e-active') as Element;
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
public onClick() {
this.editorObj!.focusIn();
this.ranges = this.selection.getRange(document);
this.dialogObj!.width = this.editorObj!.element.offsetWidth * 0.5;
this.dialogObj!.show();
this.dialogObj!.element.style.maxHeight = 'none';
}
public onInsert(): void {
let activeEle: Element = this.dialogObj!.element.querySelector('.char_block.e-active') as Element;
if (activeEle) {
this.ranges!.insertNode(document.createTextNode((activeEle as Element).textContent as string));
}
this.dialogOverlay();
}
public dialogOverlay(): void {
let activeEle: Element = this.dialogObj!.element.querySelector('.char_block.e-active') as Element;
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.dialogObj!.hide();
}
public cssClass: String = "customClass e-rte-elements";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
When rendering any component for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the e-rte-elements class to the component rendered in the custom toolbar.
Enabling and Disabling Toolbar Items
You can use the enableToolbarItem
and disableToolbarItem
methods to control the state of toolbar items. This methods takes a single item or an array of items as parameter.
You can add the command name
Custom
to disable the custom toolbar items on source code view and other quicktoolbar operations.
How to Enable the Toolbar
The Rich Text Editor toolbar contains a collection of tools such as bold, italic and text alignment buttons that are used to format the content. However, in most integrations, you can customize the toolbar configurations easily to suit your needs.
To get start quickly about customizing the toolbar in Angular Rich Text Editor component, refer to the video below.
To use toolbar feature, configure
ToolbarService
in the provider section.
The Rich Text Editor allows you to configure different types of toolbar using type
field in toolbarSettings
property. The types of toolbar are:
- Expand
- MultiRow
- Scrollable
Expanding the Toolbar
The default mode of the toolbar is Expand
, configured through toolbarSettings
with type: 'Expand'
. This mode hides any overflowing toolbar items in the next row, which can viewed by clicking the expand arrow.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
public tools: ToolbarSettingsModel = {
type: 'Expand' as ToolbarSettingsModel['type'],
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
};
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Configuring a Multi-row Toolbar
Setting the type
as MultiRow
in toolbarSettings
will arrange the toolbar items across multiple rows, displaying all configured toolbar items.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
public tools: ToolbarSettingsModel = {
type: 'MultiRow' as ToolbarSettingsModel['type'],
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
};
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Implementing a Scrollable Toolbar
Setting the type
to Scrollable
in toolbarSettings will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='editor' [toolbarSettings]='tools' [(value)]='value'></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
public tools: ToolbarSettingsModel = {
type: 'Scrollable' as ToolbarSettingsModel['type'],
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
};
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Creating a Sticky Toolbar
By default, the toolbar remains fixed at the top of the Rich Text Editor when scrolling. You can customize the position of this sticky toolbar by setting the floatingToolbarOffset
to adjust its offset from the top of the document.
Additionally, you can enable or disable the floating toolbar using the enableFloating
property.
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService, RichTextEditorComponent, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
@Component({
imports: [
RichTextEditorModule,
CheckBoxModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor #typeEditor id='editor' [toolbarSettings]='tools' [(value)]='value'>
</ejs-richtexteditor>
<div>
<ejs-checkbox #float label="Enable Floating" [checked]="true" (change)="onChangeFloat()"></ejs-checkbox>
</div>`,
providers: [ToolbarService, HtmlEditorService, QuickToolbarService, ImageService, LinkService, TableService, PasteCleanupService]
})
export class AppComponent {
@ViewChild('float') editorFloatObj: CheckBoxComponent | undefined;
@ViewChild('typeEditor') editorObj: RichTextEditorComponent | undefined;
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when Rich Text Editor is blurred and changes are done to the content.</li><li>focus - Triggers when Rich Text Editor is focused in.</li><li>blur - Triggers when Rich Text Editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
public tools: ToolbarSettingsModel = {
enableFloating: false
};
public onChangeFloat(): void {
this.editorObj!.toolbarSettings.enableFloating = this.editorFloatObj!.checked;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Quick Toolbars
The Rich Text Editor has quick toolbars that act as context-menus, appearing when you click on elements like images, links, audio, video, and tables. By default, specific quick toolbar items are displayed when clicking on the corresponding element. You can customize these items using the quickToolbarSettings
property.
Quick Format Toolbar
The quick format toolbar offers easy access to commonly used text formatting tools, enhancing the editing process by allowing users to quickly apply styles and adjustments to their text with minimal effort.
Customize the quick toolbar items using the text
property in the quickToolbarSettings
.
Any toolbar items available in the Rich Text Editor can be configured for the text quick toolbar. The sample below showcases the text quick format toolbar.
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, RichTextEditorComponent, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor #imageEditor id='imageEditor' [quickToolbarSettings]='quickToolbarSettings' (quickToolbarSettingsChange)=' quickToolbarSettingsChange' [(value)]='value'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
@ViewChild('imageEditor') editorObj: RichTextEditorComponent | undefined;
public value: string = "<p>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img id=\"editorImageID\" style=\"width: 300px; height: 300px; transform: rotate(0deg);\" alt=\"Logo\" src=\"https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png\">";
public quickToolbarSettings: QuickToolbarSettingsModel = {
text: ['Bold', 'Italic', 'Underline', 'FontColor', 'BackgroundColor', 'Alignments', '-', 'FontSize', 'FontName', 'Formats', 'OrderedList', 'UnorderedList', 'FormatPainter']
};
public quickToolbarSettingsChange: QuickToolbarSettingsModel = {}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Image Quick Toolbar
Customize the quick toolbar items for images using the image
property in the quickToolbarSettings
.
Table Quick Toolbar
The table quick toolbar opens when you click anywhere within a table. Customize its items using the table
property in the quickToolbarSettings
.
Link Quick Toolbar
The link quick toolbar appears when you click on a link in the editor. Customize its items using the link
property in the quickToolbarSettings
.
Video Quick Toolbar
The video quick toolbar appears when you click on a video element. Customize its items using the video
property in the quickToolbarSettings
.
These quick toolbars provide convenient access to context-specific editing tools, enhancing the user experience when working with different types of content in the Rich Text Editor.
Audio Quick Toolbar
Customize the quick toolbar items for audio elements using the audio
property in the quickToolbarSettings
.
The following sample demonstrates the option to insert the video, image, audio, link and table to the Rich Text Editor content as well as option to get started with the quick toolbar.It also illustrates how to utilize the quick toolbar for efficient content editing.The Quick Toolbar provides easy access to essential editing tools for a smoother user experience.
import { Component, ViewChild } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, AudioService, VideoService, QuickToolbarService, TableService, PasteCleanupService, RichTextEditorComponent, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor #imageEditor id='imageEditor' [value]="value" [toolbarSettings]='tools'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService,VideoService, AudioService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
@ViewChild('imageEditor') editorObj: RichTextEditorComponent | undefined;
public tools: object = {
items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'Audio', 'Video', 'CreateTable','|', 'SourceCode', 'Undo', 'Redo']
};
public value: string = `<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul>
<li>
<p>Provides <IFRAME> and <DIV> modes.</p>
</li>
<li>
<p>Bulleted and numbered lists.</p>
</li>
<li>
<p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p>
</li>
<li>
<p>Contains undo/redo manager. </p>
</li>
</ul><div style="display: inline-block; width: 60%; vertical-align: top; cursor: auto;"><img alt="Sky with sun" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="309" style="min-width: 10px; min-height: 10px; width: 309px; height: 174px;" class="e-rte-image e-imginline e-rte-drag-image" height="174" /></div> `;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
To use quick toolbar feature, configure
QuickToolbarService
in the@NgModule.providers section
.