Disable (img) resize handles in IE 8-11 in contenteditable and remove them if possible

Question

This question may have been asked several times before, however I'm still unable to solve the problem. I'm building my own WYSIWYG and one of the options is inserting image into the contenteditable element (div). In IE (8-11) resize handles are being attached to the clicked image. I would like to remove those handles and completely disable resizing in IE. Also be able to register click event on images in IE 8-10 inside contenteditable element.

What I have tried so far

setting onresizestart attribute of the parent element (WYSIWYG) to function(){return false;}

document.getElementById('wysiwyg').onresizestart = function(){return false;}

The above code works in IE 8-10 which disables resizing of images, however it fails in IE 11.

I've also tried setting oncontrolselect attribute of the image to

image.oncontrolselect = function(){return false;}

This disables resizing and doesn't show handles, but the user can't drag and drop the image within contenteditable area.

In Firefox (other (Webkit) browsers don't have such thing implemented) this is achieved by

document.execCommand("enableObjectResizing", false, false);

So, how can I disable/remove those handles in IE 8-11 and also be able to register click event on images inside contenteditable?

Answer 1

Set the unselectable attribute to on to your image:

img = document.getElementById('/*image id*/");

img.setAttribute('unselectable','on');