Resizable Rich Text Editor

10 Oct 20252 minutes to read

The Rich Text Editor supports dynamic resizing, allowing users to adjust the editor’s dimensions based on their needs. You can enable or disable this feature using the EnableResize property. When EnableResize is set to true, a resize handle appears at the bottom-right corner of the editor, enabling diagonal resizing.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnableResize="true">
    <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>
</SfRichTextEditor>

Blazor RichTextEditor resizing

Restrict resize

To restrict the resizable area of the Rich Text Editor, define the min-width, max-width, min-height, and max-height CSS properties on the editor’s container element. By default, the editor can be resized up to the limits of the current viewport. Use the e-richtexteditor CSS class to apply the following styles and control the resizing boundaries.

<style>
  .e-richtexteditor {
      min-width: 200px;
      max-width: 800px;
      min-height: 100px;
      max-height: 300px;
  }
</style>
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnableResize="true" CssClass='.e-richtexteditor'>
    <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>
</SfRichTextEditor>
<style>
    .e-richtexteditor {
        min-width: 200px;
        max-width: 800px;
        min-height: 100px;
        max-height: 300px;
    }
</style>

Blazor RichTextEditor restrict resize

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to know how to render and configure the rich text editor tools.