Inline Editing in TypeScript 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.

Setup

To enable inline editing, inject the necessary modules and set the inlineMode property:

import { RichTextEditor, HtmlEditor, Toolbar, QuickToolbar } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(HtmlEditor, Toolbar, QuickToolbar);

let editor: RichTextEditor = new RichTextEditor({
  inlineMode: { enable: true, onSelection: true }
});
editor.appendTo('#defaultRTE');

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 
import { RichTextEditor, Toolbar, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, HtmlEditor, QuickToolbar);

let editor: RichTextEditor = new RichTextEditor({
    inlineMode: {
        enable: true,
        onSelection: true
    },
    value: `<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/clicked.</p>`
});
editor.appendTo('#editor');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
   <link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='editor'></div>
    </div>
</body>

</html>