How can I selectively turn off image resize handles in IE 7+'s contenteditable mode? I've tried setting the image's contentEditable to false and its onresizestart to "return false" to no avail.
I'm using tinyMCE.
How can I selectively turn off image resize handles in IE 7+'s contenteditable mode? I've tried setting the image's contentEditable to false and its onresizestart to "return false" to no avail.
I'm using tinyMCE.
Set unselectable="on"
for your images. Works for older IEs, but is lately deprecated.
unselectable
is deprecated in IE10, maybe 9 too. Anyway, it's not in the documentation, but I'd recall this needs to be set as an attribute, setting a property doesn't work.
unselectable
-> on
, it makes the element
unresizeable
. The handles are visible on the first click, but if you click the element again they won't appear. The problem is, one can't dragNdrop the element within the contenteditable
area. Is there a way to make it draggable
in IE as well? A side note: - > unselectable
works even in IE11
if it is set via setAttribute
-> element.setAttribute('unselectable','on')
.
unselectable
is set to an element, it should really be unselectable, hence not possible to make it draggable either. I can't reproduce the first-click issue in IE11, though a deprecated property may behave oddly.
I was using the advimagescale plugin in tinyMCE to stop all images from being resized. However, I found it stopped images from being dragged and dropped into an editor instance.
I found I could strip the size attributes on mouseup using:
setup : function(ed) {
ed.onMouseUp.add(function(ed, e) {
if (e.target.nodeName == "IMG") {
e.target.removeAttribute("width");
e.target.removeAttribute("height");
}
});
}
I would dearly love to get rid of those damn handles though.
This took pain, time and luck to find: You want the 'controlselect' event to remove the resize handles in IE.
element.oncontrolselect = function () { return false; };
The above line of code worked for me (caveat: Not using TinyMCE, but then, this seems to be a contentEditable headache, not a specific TinyMCE one). You need to set this handler on any element you want to not have these drag handles (in my case, images).
controlselect
event is being fired, and the ugly boxes are still there.
You can disable the function of the handles by defining a behaviour file. I couldn't find anything which would let you hide the handles. The result of the code below is that dragging the handles has no effect.
noresize.htc:
<public:component lightweight="true">
<script language="javascript">
function CancelEvent()
{
return false ;
}
this.onresizestart = CancelEvent ;
this.onbeforeeditfocus = CancelEvent ;
</script>
</public:component>
Then in css:
img.noresize {
behaviour:url(/css/noresize.htc);
}
Note that you'll need to get that url() path right. Add the css class to the images you want to selectively disable.
This article has an alternative .htc file which didn't work for me:
http://nickw101.wordpress.com/2011/02/25/disabling-image-resizing-in-ie-contenteditable-elements/
Just the best fix ever:
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
or any html element that wraps your input/img
Works like a charm on IE11 with img too.
Often you will not want the resize functionnality for any element to be accessible. You can set the onresizestart
handler of the contenteditable
container so it cancels any resize.
That is:
<div id="editor" contenteditable="true" onresizestart="return false;">
<img src="..." />
</div>
Or with JS:
var editor = document.getElementById('editor');
editor.onresizestart=function(){return false;}
That will not hide the handles but the users will not be able to resize the element, whatever type it is.
Hope this helps!