Eliminando manejadores de cambio de tamaño en contentEditable div

Solo como nota al margen, puede desactivar la función de manejo automático de tamaño de Firefox enviando el comando enableObjectResizing (algo mal documentado) al documento:

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

AFAIK, esto solo se puede hacer de manera segura una vez que el documento se haya cargado, y no hay manera de que sepa desactivar el capturador, que es una función separada.

Parece que podré evitar esto agregando un div envoltorio y posicionando completamente el envoltorio y luego haciendo que el contenido div interno sea editable.

En Chrome 39, estos identificadores no parecen existir, incluso si usted lo desea.

En Firefox, uno simplemente puede usar execCommand , como respondió ZoogieZork.

Pero en Internet Explorer esto no se puede desactivar. Debe ser trabajado alrededor.

En el desarrollo de WYMeditor , esto es lo que he encontrado.

Los siguientes resultados en:

• En IE, la IU de cambio de tamaño aparece por una fracción de segundo y luego desaparece. Parece que no hay forma de que el usuario lo use.
• Las imágenes son texto seleccionado en mouseup
• Posibilidad de arrastrar imágenes. En algunos navegadores, es posible que tengan que seleccionarse antes de arrastrar. Como está escrito en el ítem anterior, un simple mouseup dará como resultado que se seleccione una imagen.
• Las imágenes se seleccionan usando la selección de texto y no la “selección de control” (que proporciona la interfaz de usuario de cambio de tamaño).

Esto es lo mejor que pude encontrar después de horas de respiraciones muy profundas. Creo que es lo suficientemente bueno si realmente quieres deshacerte de esos mangos.

En IE, establecer oncontrolselect para devolver false en la imagen, realmente evita que esos controladores aparezcan, y puede hacerlo inteligentemente, mousedown el siguiente controlador al evento mousedown :

 function (evt) { var img; function returnFalse() { return false; } if (evt.tagName.toLowerCase() === "img") { img = evt.target; img.oncontrolselect = returnFalse; } } 

En realidad, no funciona completamente bien. La razón por la que no funcionó muy bien es que para comenzar una operación de arrastrar y soltar en la imagen, se tuvo que mantener presionado el mouse, sin moverlo, durante una fracción de segundo, y solo entonces comenzar a moverlo para el arrastre. Si uno presiona el mouse e inmediatamente comienza a arrastrar, la imagen permanecerá en su lugar y no será arrastrada.

Entonces no hice eso.

Lo que hice fue lo siguiente. En todos los navegadores, usé mouseup para seleccionar texto en la imagen de destino exclusivamente. En no IE y IE11, sincrónicamente:

 function (evt) { if (evt.target.tagName.toLowerCase() === "img") { selectSingleNode(img); // In my case, I used Rangy } } 

En IE 7 a 10, asincrónicamente:

 function (evt) { if (evt.target.tagName.toLowerCase() !== "img") { return; } window.setTimeout(function () { selectSingleNode(img); // In my case, I used Rangy }, 0); } 

Esto aseguró que después de que aparezcan los identificadores, desaparezcan lo antes posible, porque la imagen pierde su “selección de control” porque esa selección se reemplaza por una selección de texto normal.

En Internet Explorer 7 a 11, dragend un controlador a dragend que elimina toda la selección:

 function (evt) { if (evt.target.tagName.toLowerCase() === "img") { deselect(); // I use Rangy for this, as well } } 

Esto hace que desaparezcan los identificadores que aparecen después de arrastrar y soltar.

Espero que esto ayude y espero que puedas hacerlo aún mejor.

para IE11 (no he probado las versiones anteriores de IE, pero creo que funcionaría) puede agregar content = atributo “falso” a la etiqueta img. Esto evitará que se realice un cambio de tamaño mientras se mantiene el arrastre y la colocación en su lugar.

… solo la mejor solución de la historia

o cualquier elemento html que envuelva tu entrada / img

Funciona en IE11 como un encanto

Solo enfrento ese problema. Intenté document.execCommand("enableObjectResizing", false, false); pero, el ícono de movimiento aún estaba apareciendo. Lo único que solucionó mi problema fue simplemente e.preventDefault() cuando ocurre el evento onmousedown .

 element.onmousedown = function(e){ e.preventDefault(); } 

Has intentado agregar el estilo

 border: none; 

a la div?