Integrating Rich Text Editor in Dialog Control

7 Mar 20253 minutes to read

When rendering the Rich Text Editor inside a Dialog control, the dialog container and its wrapper elements are initially styled with display: none. This styling prevents the editor’s toolbar from calculating the proper offset width. As a result, the toolbar may render incorrectly, appearing above the edit area container.

To resolve this issue, we can utilize the refreshUI method of the Rich Text Editor in conjunction with the open event. This approach ensures that the Rich Text Editor’s UI is properly refreshed and rendered once the Dialog is visible.

import { Dialog } from '@syncfusion/ej2-popups';
import {
  RichTextEditor,
  Toolbar,
  Link,
  Image,
  HtmlEditor,
  QuickToolbar,
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

let dialog = new Dialog({
  header: 'Dialog Header',
  footerTemplate: 'Dialog Footer',
  content: document.getElementById('dlgContent'),
  showCloseIcon: true,
  width: '400px',
  height: '250px',
  open: onOpen,
});

dialog.appendTo('#dialog');

let editor: RichTextEditor = new RichTextEditor({});
editor.appendTo('#dlgContent');

document.getElementById('targetButton').onclick = (): void => {
  dialog.show();
};

function onOpen(): void {
  editor.refreshUI();
}
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <button
          class="e-control e-btn"
          id="targetButton"
          role="button"
          e-ripple="true"
        >
          Open Dialog
        </button>
        <div id="dialog" class="custom-template"></div>
        <div id="dlgContent"></div>
      </div>
</body>

</html>