TinyMCE - Make div resizable like img

Question

In TinyMCE editor, is it possible to turn on the resizing handles on div like they are available on images?

The object_resizing setting can only take true, false, img as possible values.
See https://www.tinymce.com/docs/configure/advanced-editing-behavior/#object_resizing

The TinyMCE source code has a isResizable function which contains

if (typeof selector != 'string') {
  selector = 'table,img,figure.image,div';
}

and a showResizeRect function which activates the resizing handles.

I have not been able to activate it for a div.

This is what I have tested so far :

editor.addButton('Test', {
  text: 'Test',
  onclick: function() {
    editor.selection.getNode().setAttribute("data-mce-resize","1");
    console.log(editor.selection.controlSelection.isResizable(editor.selection.getNode()));
    editor.selection.controlSelection.showResizeRect(editor.selection.getNode());
  }
});
isResizable is false

Any clue?

TheRobQ TheRobQ · Accepted Answer · 2018-06-14T15:19:18

Your code works fie on my end: http://fiddle.tinymce.com/cugaab

I add type to the editor, highlight and use the bottom Formats>Blocks>Div option to put a div around it, use your test button and I get resize handles and the console logs 'true'. Resized div image

TinyMCE - Make div resizable like img

1 Answers