Inline Editing in Angular Rich Text Editor

Inline editing enables users to edit content directly within the editor where it is displayed. Unlike traditional editors with separate toolbars, inline editing provides a seamless, on-the-spot editing experience. The toolbar appears contextually when you click or select text.

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.

Toolbar trigger behavior

The inline toolbar appears based on the onSelection property within inlineMode settings.

Setting Behavior
onSelection: true Toolbar appears only when text is selected
onSelection: false Toolbar appears when the editor is focused

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));