New to Kendo UI for Angular? Start a free 30-day trial

Resizing

The Kendo UI for Angular Editor offers versatile resizing options for both the component and the content within. You can adjust the Editor size to fit your workspace for a more comfortable user experience. You can also resize images and content tables to create more visually appealing and well-structured documents.

Resizing the Editor

By default, the Editor is not resizable. To enable the built-in browser resizing behavior within the Editor, set the resizable option to true. To restrict the Editor width and height, bind resizable to an EditorResizableOptions object with the desired minWidth, minHeight, maxWidth, and maxHeight values.

The following example demonstrates the Editor resizing functionality in action.

Example
View Source
Change Theme:

Resizing Images

Image resizing is enabled by default in the Editor. To resize an image, select it and drag the resize handles that appear around the image.

The Editor supports the following ways to add images into the content area:

  • Declare the image within the Editor's value.
  • Utilize the Image tool found in the Toolbar.
  • Copy and paste an image directly into the content area.
  • Drag and drop an image into the content area.
Example
View Source
Change Theme:

Resizing Tables

Table resizing is enabled by default in the Editor.

The Editor supports the following methods to add and resize tables within the content area:

Adding Tables:

  • Declare the table within the Editor's value.
  • Utilize the Table tool found in the Toolbar.
  • Copy and paste a table directly into the content area.

Resizing Tables:

  • Table—Click the table to select it and drag the resize handle that appears.
  • Columns and rows—Hover over the border of a column or row and drag the resize handle that appears.
Example
View Source
Change Theme: