How to i disable the _moz_resizing?

Question

I am using nicEdit editor and i have added my own custom image resizing script to it. But i want to disable the default _moz_resizing that appears in firefox.

I wanted to have finer control over the image being resized. ( Eg: Allow only the image to resize and inherit the width of the parent container. )

So i wrote a custom script. But since firefox has its own image resizing control (_moz_resizing) how do i disable it? If there is no way to do so, i have a very simple workaround where i browser detect firefox and turn off my custom script and use the _moz_resizing instead.

But i won't have fine grained control and will have to rely on there being browser bugs in firefox. :(

Answer 1

By going to about:config in your browser window (firefox ofcourse) - can you not change (i think) - browser.enable_automatic_image_resizing to false?

Alternatively, i would say that this is not possible and each browser will resize images as it seees fit

Answer 2

In Firefox, the native image resizing controls can be disabled using the enableObjectResizing command. This command must be executed after designMode has been set to "on".

document.designMode = "on";
document.execCommand('enableObjectResizing', false, 'false');

Once the native resizing controls are disabled, you should not see the _moz_resizing attribute appear. It shows up as a side effect of the native controls, but the presence or value of the attribute does not directly affect the controls themselves. Its only purpose is to trigger a thin black outline around the element being re-sized.

Most in-browser rich text editors use an iframe to display their content. If the CSS position of this iframe changes (say, from static to absolute), it will undo the effects of the enableObjectResizing command. The command may be repeated to turn the native controls back off again. This is very confusing, as there is no indication that this should be the case, but it is. If enableObjectResizing is not working for you, be sure you are setting it after you set any CSS position values.

Also note that the "enableObjectResizing" command will affect the resizers for images AND absolutely positioned elements, if any such exist within the editable content area.

I have prepared a minimal test page the illustrates a working example of this.