Firefox-designMode: deshabilita los controles de cambio de tamaño de la imagen

resize contenteditable

Question

¿Cómo puedo evitar que el usuario pueda cambiar el tamaño de una imagen en designMode? (deshabilite los controladores cuando se hace clic en la imagen)

Answer 1

Digamos que conviertes contenido editable de esta manera:

document.body.contentEditable = true;

Todo lo que tiene que hacer es desactivarlo para todas (o algunas) imágenes.

var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; ++i) {
    imgs[i].contentEditable = false;
}

Answer 2

Bueno, no puedes eliminar esos controladores de cambio de tamaño ni en Firefox ni en IE ... al menos no pude encontrar una solución.

Al final lo logré en Firefox editando algunos archivos de configuración de la carpeta de instalación de FF y no queremos hacer eso, ¿verdad?

De todos modos, si quieres deshabilitar el cambio de tamaño de las imágenes (pero los manejadores de cambio de tamaño aún estarán visibles), simplemente agrega un estilo css como:

img {
    width: auto !important;
    height: auto !important;
}

Saludos, Mihailo

Answer 3

Aunque la pregunta fue hace mucho tiempo. Cada elemento de bloque (div, img ...) estará decorado con identificadores de FF. Pruébalo:

<div id="myDiv" contenteditable="true"><p>Sample text!</p></div>

Sin manijas, sin cambio de tamaño, etc.

<div id="myDiv" contenteditable="true"><p>Sample text!</p><img src="picture.jpg" /></div>

La imagen puede ser redimensionada. Por lo tanto, debe llamar explícitamente a contenteditable = "false" para cada bloque elem que no desea tener identificadores, como ya dijo nickf para las imágenes.

Aún más extraño: asigne "posición: absoluta" a cualquiera de sus elementos, incluso el div principal, y tiene identificadores nuevamente.

Answer 4

Creo que encontrarás esto mucho más aceptable. Parece que funciona en Firefox, pero no estoy seguro acerca de otros navegadores:

document.execCommand("enableObjectResizing", false, false);

Deja la habilidad de arrastrar y soltar intacta.

Answer 5

Esto funciona bien para Firefox:

document.execCommand("enableObjectResizing", false, false);

Para IE he usado:

image.attachEvent("onresizestart", function(e) { e.returnValue = false; }, false);

Answer 6

No puedo comentar y votar aún así que ... de acuerdo con la respuesta de nmb.ten, debes usar:

document.execCommand("enableObjectResizing", false, false);

Pero funciona solo después de que se haya completado su contenido (es decir, si debe editar algún texto guardado anteriormente).