Pregunta

¿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)

¿Fue útil?

Solución

Supongamos que activa contentEditable 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;
}

Otros consejos

Esto funciona bien para Firefox:

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

Para IE he usado:

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

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

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

Deja intacta la capacidad de arrastrar y soltar.

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 desea desactivar el cambio de tamaño de las imágenes (pero los controladores de cambio de tamaño seguirán siendo visibles) simplemente agregue un estilo CSS como:

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

saludos,  Mihailo

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

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

Sin tiradores, 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 contenteditable = " false " para cada elemento de bloque no desea tener manijas, como ya dijo nickf para las imágenes.

Aún más raro: asignar " posición: absoluta " a cualquiera de sus elementos, incluso el div padre, y tiene controladores nuevamente.

No puedo comentar y votar todavía, 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 complete su contenido (es decir, si tiene que editar algún texto guardado anteriormente).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top