Inline Editing in the Angular Rich Text Editor Component

22 Aug 20253 minutes to read

Inline editing in the Rich Text Editor enables users to edit content directly within the editor where it is displayed. Unlike traditional editing interfaces where the editor toolbar is in a separate area at the top or bottom, inline editing offers a seamless, on-the-spot editing experience. You can click on the text or select the text you wish to edit and make changes immediately.

Enable inline editing in the Rich Text Editor by using the inlineMode with the enable property as true. This configuration activates the feature, allowing direct content editing within its displayed context.

Edit on select

The inline toolbar in the Rich Text Editor is triggered based on the onSelection option within the inlineMode settings.

When onSelection is set to true, the toolbar appears only when text is selected. If onSelection is set to false, the inline toolbar appears when editable text is focused, regardless of selection.

This configuration enhances the inline editing experience by providing immediate access to formatting options.

The following code demonstrates enabling inline editing with the toolbar appearing on text selection:

import { Component } from '@angular/core';
import { RichTextEditorModule, InlineModeModel, ToolbarSettingsModel, ToolbarService, LinkService, ImageService, HtmlEditorService, FormatModel, FontFamilyModel, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='inlineEditor' #inlineEditor [inlineMode]='inlineMode' [toolbarSettings]='toolbarSettings' [format]='format' [fontFamily]='fontFamily' [value]='value'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public value: string = "<p>The sample is configured with inline mode of editor. Initially, the editor is rendered without a <a href='https://ej2.syncfusion.com/home/' target='_blank'>toolbar</a>. The toolbar becomes visible only when the content is selected.</p>"
    public inlineMode: InlineModeModel = { enable: true, onSelection: true };
    public format: FormatModel = {
        width: 'auto',
    };
      public fontFamily: FontFamilyModel = {
        width: 'auto',
    };
    public toolbarSettings: ToolbarSettingsModel = {
        items: ['Bold', 'Italic', 'Underline',
            'Formats', '-', 'Alignments', 'OrderedList', 'UnorderedList',
            'CreateLink']
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));