Removendo os manipuladores redimensionados na Div Contentável

Question

Eu criei uma div contentável para usar como uma textarea rica. Ele redimensionou os manipuladores em torno dele que eu gostaria de me livrar. Alguma ideia de como eu faria isso?

EDIT: Isso parece estar acontecendo porque estou absolutamente posicionando a div, então o Firefox adiciona um atributo irritante _moz_resize ao elemento que não posso desligar.

Answer 1

Parece que vou conseguir contorná -lo adicionando uma divagação de wrapper e posicionando absolutamente o invólucro e depois tornando a divisão interna contentável.

Answer 2

Assim como uma observação lateral, você pode desativar o recurso de alavanca automática do Firefox enviando o (um tanto mal documentado) enableObjectResizing comando para o documento:

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

Afaik, isso só pode ser feito com segurança depois que o documento é carregado, e não há como eu conhecer o Grabber, que é um recurso separado.

Answer 3

No Chrome 39, essas alças não parecem existir, mesmo que você quisesse.

No Firefox, pode -se simplesmente usar execCommand, como Zoogiezork respondeu.

Mas no Internet Explorer, isso não pode ser desligado. Deve ser trabalhado por aí.

Dentro Wymeditor Desenvolvimento, aqui está o que eu encontrei.

Os seguintes resultados em:

• No IE, a interface do usuário de redimensionamento aparece por uma fração de segundo e depois desaparece. Parece não haver como o usuário usá -lo.
• As imagens são selecionadas em texto em mouseup
• Capacidade de arrastar imagens. Em alguns navegadores, eles podem ter que ser selecionados antes de arrastar. Conforme escrito no item anterior, um simples mouseup resultará em uma imagem sendo selecionada.
• As imagens são selecionadas usando a seleção de texto e não a "seleção de controle" (a que fornece a interface do usuário de redimensionamento).

Este é o melhor que eu poderia criar depois de horas de respiração muito profunda. Eu acho que é bom o suficiente se você realmente quer se livrar dessas alças.

No IE, configurando oncontrolselect para retornar false Na imagem, realmente impede que essas alças apareçam, e você pode fazê -lo de maneira inteligente, anexando o seguinte manipulador ao mousedown evento:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

Na verdade, não funciona completamente bem. A razão pela qual não funcionou muito bem é que, para iniciar uma operação de arrastar e soltar na imagem, era preciso pressionar e segurar o mouse, sem movê -lo, por uma fração de segundo, e só então começar o arrasto. Se alguém pressionasse o mouse e imediatamente começasse a arrastar, a imagem permaneceria em seu lugar e não seria arrastada.

Então eu não fiz isso.

O que eu fiz foi o seguinte. Em todos os navegadores, eu usei mouseup Para enviar texto, selecione a imagem de destino exclusivamente. Em não-IA e IE11, de maneira síncrona:

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

No IE 7 a 10, de forma assíncrona:

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

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

Isso garantiu que, depois que essas alças aparecerem, elas desaparecem o mais rápido possível, porque a imagem perde sua "seleção de controle" porque essa seleção é substituída por uma seleção regular de texto.

No Internet Explorer 7 a 11, anexei um manipulador a dragend Isso remove toda a seleção:

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

Isso faz com que as alças apareçam após arrastar e cair, desapareçam.

Espero que isso ajude e espero que você possa torná -lo ainda melhor.

Answer 4

Para o IE11 (não testei as versões mais antigas do IE, mas sinto que funcionaria), você pode adicionar um atributo contentável = "false" à tag IMG. Isso impedirá que qualquer re-dimensionamento seja feito, mantendo o arrasto e cair no lugar.

Answer 5

... apenas a melhor correção de todos os tempos

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

ou qualquer elemento HTML que envolva sua entrada/img

Funciona no IE11 como um charme

Answer 6

Eu apenas enfrento esse problema. eu tentei document.execCommand("enableObjectResizing", false, false); Mas, o ícone de movimento ainda estava aparecendo. O que acabou de consertar meu problema foi apenas e.preventDefault() quando onmousedown Evento ocorre.

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

Answer 7

Você já tentou adicionar o estilo

border: none;

para a div?