Integrating Rich Text Editor in Dialog Components

27 Feb 202518 minutes to read

When rendering the Rich Text Editor inside a Dialog component, 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.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import {
  RichTextEditorComponent,
  Inject,
  Toolbar,
  Link,
  Image,
  HtmlEditor,
  QuickToolbar,
  Table,
  PasteCleanup,
} from '@syncfusion/ej2-react-richtexteditor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { createRef } from 'react';
import * as React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = createRef();
    this.dialogRef = createRef();
    this.tools = {
      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',
      ],
    };
  }

  openDialog = () => {
    if (this.dialogRef.current) {
        this.dialogRef.current.show();
    }
  };
  onDialogOpen = () => {
    if (this.editorRef.current) {
      this.editorRef.current.refreshUI();
    }
  };
  render() {
    return (
      <div>
        <ButtonComponent onClick={this.openDialog}>Open Dialog</ButtonComponent>
        <DialogComponent
          ref={this.dialogRef}
          header="Dialog Header"
          footerTemplate="Dialog Footer"
          open={this.onDialogOpen}
          showCloseIcon={true}
        >
          <RichTextEditorComponent
            ref={this.editorRef}
            toolbarSettings={this.tools}
          >
            <Inject
              services={[
                Toolbar,
                Link,
                Image,
                HtmlEditor,
                QuickToolbar,
                Table,
                PasteCleanup,
              ]}
            />
          </RichTextEditorComponent>
        </DialogComponent>
      </div>
    );
  }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { createRef } from 'react';
import * as React from 'react';
import { RichTextEditorComponent,Inject,Toolbar,Link, Image,HtmlEditor,QuickToolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component {
    
    private dialogRef = createRef<DialogComponent>();
    private editorRef = createRef<RichTextEditorComponent>();
    
    private tools = {
        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'
        ]
    };

    private openDialog = (): void => {
        if (this.dialogRef.current) {
            this.dialogRef.current.show();
        }
    };

    private onDialogOpen = (): void => {
        if (this.editorRef.current) {
            this.editorRef.current.refreshUI();
        }
    };
    
    public render() {
      return (
        <div>
          <ButtonComponent onClick={this.openDialog}>Open Dialog</ButtonComponent>
          <DialogComponent
            ref={this.dialogRef}
            header="Dialog Header"
            footerTemplate="Dialog Footer"
            open={this.onDialogOpen}
            showCloseIcon={true}
          >
            <RichTextEditorComponent ref={this.editorRef} toolbarSettings={this.tools}>
              <Inject services={[Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, PasteCleanup]} />
            </RichTextEditorComponent>
          </DialogComponent>
      </div>
      );
    }
}

export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { useRef } from 'react';
import * as React from 'react';
import { createElement } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import {
  HtmlEditor,
  Image,
  Inject,
  Link,
  QuickToolbar,
  RichTextEditorComponent,
  Toolbar,
  Table,
  PasteCleanup,
} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  const dialogRef = useRef(null);
  const editorRef = useRef(null);

  const tools = {
    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',
    ],
  };

  const openDialog = () => {
    if (dialogRef.current) {
      dialogRef.current.show();
    }
  };

  const onDialogOpen = () => {
    if (editorRef.current) {
      editorRef.current.refreshUI();
    }
  };
  return (
    <div>
      <ButtonComponent onClick={openDialog}>Open Dialog</ButtonComponent>
      <DialogComponent
        ref={dialogRef}
        header="Dialog Header"
        footerTemplate="Dialog Footer"
        open={onDialogOpen}
        showCloseIcon={true}
      >
        <RichTextEditorComponent ref={editorRef} toolbarSettings={tools}>
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </DialogComponent>
    </div>
  );
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import  { useRef } from 'react';
import * as React from 'react';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import {HtmlEditor,Image,Inject,Link,QuickToolbar,RichTextEditorComponent,Toolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';
import { createElement } from '@syncfusion/ej2-base';

function App() {
    const dialogRef = useRef<DialogComponent>(null);
    const editorRef = useRef<RichTextEditorComponent>(null);
  
    const tools:object = {
      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',
      ],
    };
  
    const openDialog = () => {
      if (dialogRef.current) {
        dialogRef.current.show();
      }
    };
  
    const onDialogOpen = () => {
      if (editorRef.current) {
        editorRef.current.refreshUI();
      }
    };
  
  return (
    <div>
      <ButtonComponent onClick={openDialog}>Open Dialog</ButtonComponent>
      <DialogComponent
        ref={dialogRef}
        header="Dialog Header"
        footerTemplate="Dialog Footer"
        open={onDialogOpen}
        showCloseIcon={true}
      >
        <RichTextEditorComponent ref={editorRef} toolbarSettings={tools}>
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </DialogComponent>
    </div>
  );
}
export default App;