It’s not easy to prevent images resizing in internet explorer’s content editable, well, that’s technically not true. it’s easy alright…Finding out how was the difficult bit.
Why would we want to prevent users resizing images? In a nutshell the problem is that when you make an element ‘content editable’ (or turn document design mode on) users are able to resize some child elements using ‘handles’ in the corners and middles, this can be annoying when you have written or implemented your own WYSIWYG editor using mshtml, as the HTML generated when the built in functionality kicks in can leave somthing to be desired.
Some modern browers support the execCommand, whilst others trigger ’on resize’ or ’onresizestart’ events which you can easily disable using javascipt, depending on the flavour of script you are utilising (google it).
Whilst this works in a lot of the browsers IE still stubbornly refuses to be a friend to the web developer!
So, how do we prevent images from being resized by a user in ie? we utilise a little known (and little used in my experience) something that only ie offcicially supports – .HTC files.
A HTC file is basically a file that contains generic behaviour for HTML elements and functions much like a stylesheet would, except for code. It allows you to add Javascript that will automatically fire on the events that you choose to write handlers for; The really neat bit is that you can assign these behviour files to elements using CSS; this is exactly how we solve the resizing issue.
first we have our div, with an id of ‘imAnEditableDiv’
<div id=”imAnEditableDiv”>hello world</div>
secondly, we create our htc file, in this case called noresize.htc with the following contents:-
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT=”onresizestart” ONEVENT=”resize()” />
<SCRIPT LANGUAGE=”JScript”>
function resize(){
event.cancelBubble =true;
event.returnValue =false;
return false;
}
</SCRIPT>
</PUBLIC:COMPONENT>
Finally, add the line into the stylesheet that tells the bowser to apply this behaviour to images (or table or whatever you feel like) inside an editable div. the great thing about this is because it’s based on a style the behaviour is autmoatically added to the element when it’s created – even if you created it dynmically.
#imAnEditableDiv img
{
behavior:url(/scripts/noresize.htc);
}
So far this is the only method I have found that actually works consistently.
