Webkit: live images resize in contenteditable container

Question

I'm trying to have the ability to have resizable images in a contenteditor div in Chrome, like Firefox does. When you click on an image, the resize handlers should appear. I tried the jQuery UI resizable plugin, but it becomes broken when you move (drag and drop) the images inside the container. Also tried the CSS3 resize property, but it only applies to block elements, not Any suggestion? Thanks

Answer 1

WebKit has no support for resizing images and tables within editable elements, unfortunately.

• https://bugs.webkit.org/show_bug.cgi?id=7154
• https://bugs.webkit.org/show_bug.cgi?id=12250

That being the case, you're going to have to use some other means, such adding a click event handler to the editable element and drawing resizer elements around the image, if one was clicked. Seeing as the big editors (TinyMCE and CKEditor) haven't implemented it, I assume there are complications.

Answer 2

WebKit doesn’t support resizing images and tables. However it is possible to fix this by implementing resize functionality by using javascript. There is no big difference between manipulating with javascript an image and an image in an editable iframe. There is an open source jquery plugin that is implementing this http://www.editorboost.net/webkitresize This plugin also supports table cell resize.