Resizable Rich Text Editor

27 Jul 20222 minutes to read

The Rich Text Editor allows it to be resized dynamically, so the users can able to change the size of the editor based on their needs. You can enable or disable this feature using the EnableResize property in the Rich Text Editor. If EnableResize is set to true, the editor component creates a grip at the bottom right corner, which allows resizing the component in the diagonal direction.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EnableResize="true">
    <p>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p>
</SfRichTextEditor>

Resizing in Blazor RichTextEditor

Restrict resize

To have a restricted resizable area for the Rich Text Editor, you need to specify the min-width, max-width, min-height, and max-height CSS properties for the component’s container element. By default, the editor is capable of resizing up to the current viewport. The e-richtexteditor CSS class will be available in the component’s container and can be used for applying the bellow mentioned styles.

<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>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</p><p><b>Get started Quick Toolbar to click on the image</b></p><p>It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.</p><img alt='Logo' style='width: 300px; height: 300px; transform: rotate(0deg);' src='images/RichTextEditor/RTEImage-Feather.png' />
</SfRichTextEditor>
<style>
    .e-richtexteditor {
        min-width: 200px;
        max-width: 800px;
        min-height: 100px;
        max-height: 300px;
    }
</style>

Restrict resize in Blazor RichTextEditor

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.