Prevent Image Resize in MSHTML/DEC
A recent comment asked how to prevent people from resizing images within the DEC. The process to do so is relatively simple. We iterate through every image within the editor and attach the onresizestart event and then cancel the event. You'll also need to attach the event to every image that gets inserted into the editor after load.
There's three components to putting this together. The first is the function to cancel the event. The event object is passed in to our cancelEvent function and then we do what we can to cancel anything that might occur.
function cancelEvent(event){
event.cancelBubble = true;
event.returnValue = false;
return false;
}Next, we need to attach this event to every image in the editor:
function attachImageEvent(editor){
// set event handlers
var imgs = editor.body.getElementsByTagName("IMG");
for(i=0;i<imgs.length;i++) {
imgs[i].detachEvent("onresizestart",cancelEvent);
imgs[i].attachEvent("onresizestart",cancelEvent);
}
}Pass in the reference to the editor which will either by your MSHTML object or the DOM of your DEC object. You'll see an example of this in the next step. I detach the event first, just in case it's already on there and it also helps prevent event handlers from building up on the objects.
One of the problems I ran into when putting together this example was that the attached events were being lost when an image was moved within the editor. Therefore, you'd have to make sure to attach the event on loading the content, on inserting a new image and on moving an image.
Instead of handling all three events, I detach and reattach the events anytime the display is changed in the editor. This is done through the DisplayChanged event of the DEC.
<script type="text/javascript" for="tbContentElement" event="DisplayChanged">
attachImageEvent(this.DOM); // pass in the reference to the DOM of the editor
</script>The downfall to this would be the performance drain if there were either numerous objects to attach the events to or you were performing other operations during the DisplayChanged event, as well. Do performance testing to ensure the best solution for you and your users.
Conversation
Or how about just assigning the vent on the editable area then adjusting the code to prevent resizing of other elements as well. This way when a new element is added a new event hadler doesn't need to be created.
oEdit.onresizestart = function(){ var oTag = event.srcElement; if(oTag.tagName == "IMG" || oTag.tagName == "TD" || oTag.tagName == "TR" || oTag.tagName == "TABLE" || oTag.tagName == "HR" || oTag.tagName == "A"){ event.returnValue = 0; }; };Very nice! Just a quick note, if using the DEC (is anybody still using it?), you have to use attachEvent to do this.
oEdit.DOM.body.attachEvent("onresizestart",cancelEvent); function cancelEvent(event){ var oTag = event.srcElement; if(oTag.tagName == "IMG" || oTag.tagName == "TD" || oTag.tagName == "TR" || oTag.tagName == "TABLE" || oTag.tagName == "HR" || oTag.tagName == "A"){ event.returnValue = 0; }; }Jonathan,
On another note. I don't suppose you have ever created decent table editing functions for mshtml have you?
I can do split cell easilty enough (horizontally). But anything else seems to be too much processing for IE to do to keep up with the speed of the events.
No, I've done some work with MSHTML but haven't really needed to do much development with it over the past year or so.