Disabling html drop and element resize inside of DesignMode

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine


You can set the DesignMode attribute on a div/iframe/etc to get a WYSIWYG panel.  Some browsers enable interfaces in those boxes that may not be desirable in all circumstances – and it’s not well documented how to turn them off.

IE Element Resize:

IE has a bad habit of putting resize controls on any element inside the DesignMode element where “hasLayout” is set.  This includes images, inputs, things that are floated, absolutely positioned, etc.  Do you really want them to resize a radiobutton?  Probably not.  Use the following js event to stop the resize.  It still gives the controls to resize, but they don’t do anything:

this.onresizestart = function() { return false; };

Drop Html:

Most browsers allow you to drag html into the DesignMode surface.  I can see situations where this would be handy, but in our case it just allows the confusing behavior where someone can drag an application button/link from outside the editor into it.  To disable dropping content into your DesignMode surface, use something like:

element.ondragstart = function(e) { return false; };

where element is either the designmode div, or the iframe’s document (iframe.contentWindow.document).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: