Resizable Editor in the Angular Rich Text Editor Component

24 Jan 20253 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 ResizeService in the configure section.

The following sample demonstrates the resizable feature.

import { Component } from '@angular/core'
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [enableResize]="true" [value]='value'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
    public value: string = "<p>The Rich Text Editor component is 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>"
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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;
}
import { Component } from '@angular/core'
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
    imports: [RichTextEditorModule],
    standalone: true,
    styleUrls: ['app.style.css'],
    selector: 'app-root',
    template: `<ejs-richtexteditor id='editor' [enableResize]="true" [value]='value'>
    </ejs-richtexteditor>`,
    providers: [ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})

export class AppComponent {
    public value: string = "<p>The Rich Text Editor component is 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>"
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also