Resizable Editor in the React Rich Text Editor Component

27 Feb 202511 minutes to read

The resizable editor feature allows dynamic resizing of the editor. Enable or disable this feature using the enableResize property in the Rich Text Editor. When enableResize is set to true, a grip appears at the bottom right corner for diagonal resizing.

To use the Resizable feature, inject resize module using the RichTextEditor.Inject(Resize).

The following sample demonstrates the resizable feature.

[Class-component]

/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
    resize = true;
    render() {
        return (<RichTextEditorComponent value={this.rteValue} enableResize={this.resize}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
              </RichTextEditorComponent>);
    }
}
export default App;
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {

  private rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
  public resize: boolean = true;
  public render() {
    return (
      <RichTextEditorComponent enableResize={this.resize} value={this.rteValue}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
    let resize = true;
    return (<RichTextEditorComponent enableResize={resize} value={rteValue}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
              </RichTextEditorComponent>);
}
export default App;
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
    let resize: boolean = true;
    return (
      <RichTextEditorComponent enableResize={resize} value={rteValue}>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
      </RichTextEditorComponent>
    );
}

export default App;

Setting Editor Resize Limits

To restrict the resizable area of the Rich Text Editor, set the min-width, max-width, min-height, and max-height CSS properties for the component’s wrapper element.

By default, the control resizes up to the current viewport size. Apply these styles using the e-richtexteditor CSS class in the component’s wrapper.

For example, add the following to the app.component.css file:

.e-richtexteditor {
  max-width: 880px;
  min-width: 250px;
  min-height: 250px;
  max-height: 400px;
}

[Class-component]

/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteValue = `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
                            Users can format their content using standard toolbar commands.</p>`;
    resize = true;
    render() {
        return (<RichTextEditorComponent value={this.rteValue} enableResize={this.resize}>
              <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
              </RichTextEditorComponent>);
    }
}
export default App;
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteValue:string = `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
                            Users can format their content using standard toolbar commands.</p>`;
  public resize: boolean = true;
  public render() {
    return (
      <RichTextEditorComponent enableResize={this.resize} value={this.rteValue}>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteValue = `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
                            Users can format their content using standard toolbar commands.</p>`;
    let resize = true;
    return (<RichTextEditorComponent enableResize={resize} value={rteValue}>
            <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
            </RichTextEditorComponent>);
}
export default App;
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let rteValue:string = `<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
                            Users can format their content using standard toolbar commands.</p>`;
  let resize: boolean = true;
  return (
      <RichTextEditorComponent enableResize={resize} value={rteValue}>
        <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
      </RichTextEditorComponent>
  );
}

export default App;

See Also