Toolbar in Angular Rich text editor component

14 Oct 202424 minutes to read

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, inject ToolbarService in the provider section of AppModule.

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

The default mode of toolbar is Expand, it will hide the overflowing items in the next row. Click the expand arrow to view overflowing toolbar items.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'



  import { Component } from '@angular/core';
import { ToolbarService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
        
        RichTextEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools'>
    <ng-template #valueTemplate>
      <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 RTE is blurred and changes are done to the content.</li>
          <li>focus - Triggers when RTE is focused in.</li>
          <li>blur - Triggers when RTE 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>
    </ng-template>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService]
})
export class AppComponent  {
    public tools: object = {
        type: 'Expand',
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
    'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
    'LowerCase', 'UpperCase', '|',
    'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
    'Outdent', 'Indent', '|',
    'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
    'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Set the type as MultiRow in toolbarSettings to hide the overflowing items in the next row. All toolbar items are visible.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'




import { Component } from '@angular/core';
import { ToolbarService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
        
        RichTextEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='defaultRTE' [toolbarSettings]='tools'>
    <ng-template #valueTemplate>
      <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 RTE is blurred and changes are done to the content.</li>
        <li>focus - Triggers when RTE is focused in.</li>
        <li>blur - Triggers when RTE 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>
    </ng-template>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, HtmlEditorService]
})
export class AppComponent  {
    public tools: object = {
        type: 'MultiRow',
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
    'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
    'LowerCase', 'UpperCase', '|',
    'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
    'Outdent', 'Indent', '|',
    'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
    'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the toolbar is floating at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from document’s top position usingfloatingToolbarOffset.

Can Enable or disable the floating toolbar using enableFloating property.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'




import { Component, ViewChild } from '@angular/core';
import { ToolbarService, HtmlEditorService, QuickToolbarService, RichTextEditorComponent} from '@syncfusion/ej2-angular-richtexteditor';
import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
@Component({
imports: [
        
        RichTextEditorAllModule,
        CheckBoxModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor #typeRTE id='defaultRTE' [toolbarSettings]='tools'>
    <ng-template #valueTemplate>
      <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 RTE is blurred and changes are done to the content.</li>
        <li>focus - Triggers when RTE is focused in.</li>
        <li>blur - Triggers when RTE 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>
    </ng-template>
    </ejs-richtexteditor>
     <div>
    <ejs-checkbox #float label="Enable Floating" [checked]="true" (change)="onChangeFloat()"></ejs-checkbox>
    </div>`,
    providers: [ToolbarService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent  {
@ViewChild('float') rteFloatObj: CheckBoxComponent | undefined;
@ViewChild('typeRTE') rteObj: RichTextEditorComponent | undefined;
  public tools: object = {
      enableFloating: false
  };
  public onChangeFloat(): void {
      this.rteObj!.toolbarSettings.enableFloating = this.rteFloatObj!.checked;
      this.rteObj!.dataBind();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The following table shows that list of available tools in the Rich Text Editor’s toolbar.

Name	Summary	Initialization
Undo	Allows to undo the actions.	toolbarSettings: { items: [‘Undo’]}
Redo	Allows to redo the actions.	toolbarSettings: { items: [‘Redo’]}
Alignment	Align the content with left, center, and right margin.	toolbarSettings: { items: [‘Alignments’]}
OrderedList	Create a new list item(numbered).	toolbarSettings: { items: [‘OrderedList’]}
UnorderedList	Create a new list item(bulleted).	toolbarSettings: { items: [‘UnorderedList’]}
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’]}
Hyperlink	Creates a hyperlink to a text or image to a specific location in the content.	toolbarSettings: { items: [‘CreateLink’]}
Images	Inserts an image from an online source or local computer.	toolbarSettings: { items: [‘Image’]}
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’’]}
SubScript	Makes the selected text as subscript (lower).	toolbarSettings: { items: [‘SubScript’]}
SuperScript	Makes the selected text as superscript (higher).	toolbarSettings: { items: [‘SuperScript’’]}
Print	Allows to print the editor content.	toolbarSettings: { items: [‘Print’]}
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’]}
Format	An Object with the options that will appear in the Paragraph Format dropdown from the toolbar.	toolbarSettings: { items: [‘Formats’]}
Blockquote	Blockquotes visually highlight important text within an editor, emphasizing key information or quotations.	toobarSettings: { items: [‘Blockquote’]}
StrikeThrough	Apply double line strike through formatting for the selected text.	toolbarSettings: { items: [‘StrikeThrough’]}
InlineCode	Adds code-specific styling to selected text by highlighting it with a background color and using a monospace font for easy readability.	toolbarSettings: { items: [‘InlineCode’]}
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’]}
FullScreen	Stretches the editor to the maximum width and height of the browser window.	toolbarSettings: { items: [‘FullScreen’]}
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’]}
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’]}
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’]}
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’]}
ClearAll	Removes all styles that have been applied to the selected text.	toolbarSettings: { items: [‘ClearAll’]}
Cut	Removes the text from its current location and places it into the clipboard.	toolbarSettings: { items: [‘Cut’]}
Copy	The selected item is copied and pasted into the clipboard.	toolbarSettings: { items: [‘Copy’]}
Paste	Allows you to insert a clipboard item into a specific location.	toolbarSettings: { items: [‘Paste’]}
OpenLink	To open the URL link that is attached to the selected text.	toolbarSettings: { items: [‘OpenLink’]}
EditLink	Allows you to change the URL that has been attached to a specific item.	toolbarSettings: { items: [‘EditLink’]}
CreateTable	Create a table with defined columns and rows.	toolbarSettings: { items: [‘CreateTable’]}
RemoveTable	Removes the selected table and its contents.	toolbarSettings: { items: [‘TableRemove’]}
Replace	Replace the selected image with another image.	toolbarSettings: { items: [‘Replace’]}
Align	The image can be aligned to the right, left, or center.	toolbarSettings: { items: [‘Align’]}
Remove	Allows to remove the selected image from the editor.	toolbarSettings: { items: [‘Remove’]}
OpenImageLink	Opens the link that is attached to the selected image.	toolbarSettings: { items: [‘OpenImageLink’]}
EditImageLink	Allows to edit the link that is attached to the selected image.	toolbarSettings: { items: [‘EditImageLink’]}
RemoveImageLink	Removes the link that is attached to the selected image.	toolbarSettings: { items: [‘RemoveImageLink’]}
InsertLink	Allows users to add a link to a particular item.	toolbarSettings: { items: [‘InsertLink’]}
Display	Allows you to choose whether an image should be shown inline or as a block.	toolbarSettings: { items: [‘Display’]}
AltText	To display image description when an image on a Web page cannot be displayed.	toolbarSettings: { items: [‘AltText’]}
Dimension	Allows you to customize the image’s height and width.	toolbarSettings: { items: [‘Dimension’]}
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’]}
RemoveLink	Allows you to remove the applied link from the selected item.	toolbarSettings: { items: [‘RemoveLink’]}
TableHeader	Allows you to add a table header.	toolbarSettings: { items: [‘TableHeader’]}
TableColumns	Shows the dropdown to insert a column or delete the selected column.	toolbarSettings: { items: [‘TableColumns’]}
TableRows	Shows the dropdown to insert a row ors delete the selected row.	toolbarSettings: { items: [‘TableRows’]}
TableCellHorizontalAlign	Allows the table cell content to be aligned horizontally.	toolbarSettings: { items: [‘TableCellHorizontalAlign’]}
TableCellVerticalAlign	Allows the table cell content to be aligned vertically.	toolbarSettings: { items: [‘TableCellVerticalAlign’]}
TableEditProperties	Allows you to change the table width, padding, and cell spacing styles.	toolbarSettings: { items: [‘TableEditProperties’]}

By default, tool will be arranged in following order.

items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList','|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']

The tools order can be customized as our application requirement. If you are not specifying any tools order, the editor will create the toolbar with default items.

Custom tool

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.

In the following sample the Dialog component will be created in Rich Text Editor’s created event. And it’s target is given to Rich Text Editor’s content

{
    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;"> &#937;</div></button>'
}

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { DialogModule } from '@syncfusion/ej2-angular-popups'




import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService , RichTextEditorComponent, NodeSelection} from '@syncfusion/ej2-angular-richtexteditor';
import { Dialog } from '@syncfusion/ej2-popups';
@Component({
imports: [
        
        RichTextEditorAllModule,
        DialogModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='customRTE' #customRTE [toolbarSettings]='tools' (created)='onCreate()'>
            <ng-template #valueTemplate>
                <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>
            </ng-template>
        </ejs-richtexteditor>
        <ejs-dialog #Dialog id="rteDialog" [buttons]='dlgButtons' (overlayClick)="dialogOverlay()" [header]='header' [visible]='false'
            [showCloseIcon]='false' [target]='target' (created)="dialogCreate()" [isModal]='true' [cssClass]='cssClass'>
            <ng-template #content>
                <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>
            </ng-template>
        </ejs-dialog>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent  {
@ViewChild('customRTE')
public rteObj?: RichTextEditorComponent;
@ViewChild('Dialog')
public dialogObj?: Dialog;
public selection: NodeSelection = new NodeSelection();
public ranges?: Range;
public tools: object = {
    items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', '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: any = [{ 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: any = '350px';
public onCreate(): void {
    let customBtn: HTMLElement = document.getElementById('custom_tbar') as HTMLElement;
    (this.dialogObj as any).target = document.getElementById('rteSection');
}
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.rteObj!.focusIn();
    this.ranges = this.selection.getRange(document);
    this.dialogObj!.width = this.rteObj!.element.offsetWidth * 0.5;
    this.dialogObj!.dataBind();
    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 any).textContent));
    }
    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));

The focus will be lost while rendering the required component for the custom toolbar, causing it to render outside the Rich Text Editor and triggering a blur event. During that time, proper functionality will not be achievable. Therefore, it is recommended to set the cssClass property or class as e-rte-elements in the dependency component.

Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, and link attributes of the quickToolbarSettings property.

Target Element	Default Quick Toolbar items
image	‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’,’Dimension’.
link	‘Open’, ‘Edit’, ‘UnLink’.
text	null (Any toolbar items in the Rich Text Editor can be configured here).
table	‘tableHeader’, ‘tableRows’, ‘tableColumns’, ‘backgroundColor’, ‘-‘, ‘tableRemove’, ‘alignments’, ‘tableCellVerticalAlign’, ‘styles’.

Custom tool can be added to the corresponding quick toolbar, using quickToolbarSettings property.

The following sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar. The image rotation functionalities have been achieved through the toolbarClick event.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RichTextEditor, RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'




import { Component, ViewChild } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService,
QuickToolbarService, RichTextEditorComponent, QuickToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
        
        ButtonModule,
        RichTextEditorAllModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor #imageRTE id='imageRTE' [quickToolbarSettings]='quickToolbarSettings' (quickToolbarSettingsChange)=' quickToolbarSettingsChange'>
            <ng-template #valueTemplate>
                <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="rteImageID" style="width:300px; height:300px;transform: rotate(0deg);" alt="Logo" src="https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png">
            </ng-template>
        </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService]
})
export class AppComponent  {
    @ViewChild('imageRTE') rteObj: RichTextEditorComponent | undefined;
    quickToolbarSettings: QuickToolbarSettingsModel = {
        image: [
            'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
            'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'
        ]
    };
    quickToolbarSettingsChange: QuickToolbarSettingsModel={}
}
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, inject QuickToolbarService, ImageService, LinkService in the provider section of AppModule.

Toolbar in Angular Rich text editor component

Expand Toolbar

Multi-row Toolbar

Floating Toolbar

Toolbar Items

Custom tool

Quick inline toolbar