Resizing

The React Editor component, part of KendoReact, provides a resizing feature that you can enable by setting the resizable prop. You can also allow the resizing of images by using the provided built-in plugin.

Editor Resizing

To enable the Editor resizing, set the resizable prop to true. To restrict the Editor width and height, set the desired minWidth, minHeight, maxWidth, and maxHeight values through Editor's style prop. You can configure the resize direction through the Editor's resize style prop.

The following example shows how to enable and configure the resizing.

Example
View Source
Change Theme:

Images Resizing

To enable the resizing of images, add the image resizing plugin to the plugins collection.

Example
View Source
Change Theme:

Tables Resizing

To enable the resizing of tables, use the tableResizing function to add the table resizing plugins collection to the Editor.

Once you enable the resizing of tables, the users can alter the size of the following elements:

  • Columns and Rows—hover over the border of a cell, and a resize handle will appear. Drag the handle to resize the column or row.
  • Tables—click in the table to set the caret/selection inside it and the resize handles will appear.
Example
View Source
Change Theme: