Extracción de cambiar el tamaño de los manipuladores en div contentEditable

Question

He creado un div contentEditable utilizar como una rica área de texto. Tiene cambiar el tamaño de los manipuladores de alrededor que me gustaría deshacerse de él. Cualquier idea de lo que me gustaría hacer esto?

Edit: Esto parece estar ocurriendo porque estoy absolutamente posicionamiento de la div, por eso Firefox añade un atributo _moz_resize exasperante al elemento que no puedo apagar

.

Answer 1

Parece que voy a ser capaz de evitar esto mediante la adición de un div contenedor y absolutamente posicionamiento de la envoltura y luego hacer el div interior contentEditable.

Answer 2

Así como una nota al margen, puede desactivar la función de cambio de tamaño automático de mango Firefox mediante el envío de la (un poco mal documentado) de comandos enableObjectResizing al documento:

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

Que yo sepa, esto sólo puede ejecutarse con plena seguridad una vez que el documento se ha cargado, y no hay manera que conozco para desactivar el capturador, que es una característica separada.

Answer 3

En Chrome 39, no parecen

estos puntos de control de existir, incluso si quería.

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

Sin embargo, en Internet Explorer esto no puede ser apagado. Se debe trabajar alrededor.

desarrollo WYMeditor , esto es lo que he encontrado.

Los siguientes resultados en:

• En IE, la interfaz de usuario cambiar el tamaño de muestra para obtener una fracción de segundo y luego desaparece. No parece haber ninguna manera para que el usuario lo utilizan.
• Las imágenes son de texto seleccionados en mouseup
• Capacidad para arrastrar las imágenes. En algunos navegadores, puede que tengan que ser seleccionado antes de arrastrar. Como está escrito en el punto anterior, un mouseup sencilla resultará en una imagen que se ha seleccionado.
• Las imágenes se seleccionan usando selección de texto y no "selección control" (la que proporciona la interfaz de usuario de cambio de tamaño).

Esto es lo mejor que podía llegar a después de horas de respiraciones muy profundas. Creo que es lo suficientemente bueno si realmente quiere deshacerse de las manijas.

En IE, Configuración oncontrolselect para volver false en la imagen, en realidad impide las manijas de aparecer, y puede hacerlo inteligentemente, uniendo 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 del todo bien. La razón de que no funcionaba muy bien es que con el fin de iniciar una operación de arrastrar y soltar en la imagen, uno tenía que mantener pulsado el ratón, sin moverlo, por una fracción de segundo, y sólo entonces comenzar a moverse por el arrastre. Si se pulsa el ratón e inmediatamente comenzó a arrastrar, la imagen permanecería en su lugar y no ser arrastrado.

Así que no lo hice.

Lo que hice es la siguiente. En todos los navegadores, solía mouseup al texto seleccione la imagen de destino exclusivamente. En no-IE y EI11, sincrónicamente:

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

En IE 7 a 10, de forma asíncrona:

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

Esto se aseguró de que después de las manijas aparecen, desaparecen antes posible, ya que la imagen pierde su "Selección de control", ya que la selección se reemplaza con una selección de texto normal.

En Internet Explorer 7 a 11, que une a un controlador 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 las asas que aparecen después de arrastrar y soltar, desaparecen.

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

Answer 4

para EI11 (I Havn't probaron las versiones antiguas de IE, pero me siento como si fuera a trabajar) puede agregar atributo contenteditable = "false" a la etiqueta img. Esto evitará que cualquier modificación del tamaño que se haga manteniendo arrastrar y colocar en su lugar.

Answer 5

... sólo la mejor solución siempre

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

o cualquier elemento HTML que envuelve su entrada / img

Funciona en IE11 como un encanto

Answer 6

Yo sólo frente a ese problema. Probé document.execCommand("enableObjectResizing", false, false); pero, el icono de movimiento seguía apareciendo. Lo que acaba de arreglar mi problema se acaba e.preventDefault() se produjo el evento onmousedown.

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

Answer 7

¿Ha intentado añadir el estilo

border: none;

para el div?