Rimozione di ridimensionare i gestori su div contentEditable

Question

Ho creato un div contentEditable da utilizzare come un ricco textarea. Ha ridimensionare gestori intorno ad esso che mi piacerebbe per sbarazzarsi di. Qualsiasi idea di come mi piacerebbe fare questo?

Edit: Questo sembra accadere perché sto assolutamente posizionamento del div, quindi Firefox aggiunge un attributo _moz_resize esasperante per l'elemento che non riesco a spegnere

.

Answer 1

Sembra che sarò in grado di ovviare a questo con l'aggiunta di un div involucro e assolutamente posizionare l'involucro e poi fare il contentEditable div interno.

Answer 2

Come nota a margine, è possibile disattivare la funzione automatica di ridimensionamento di Firefox con l'invio del (un po 'mal documentato) di comando enableObjectResizing al documento:

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

Per quanto ne so, questo non può che essere tranquillamente fatto una volta che il documento è caricato, e non c'è modo che conosco per disabilitare il grabber, che è una caratteristica separata.

Answer 3

In Chrome 39, queste maniglie non sembrano esistere, anche se si voleva loro di.

In Firefox, si può semplicemente usare execCommand, come ZoogieZork rispose.

Ma in Internet Explorer questo non può essere disattivata. Deve essere aggirato.

sviluppo WYMeditor , ecco cosa ho trovato.

I seguenti risultati in:

• In IE, l'interfaccia utente di ridimensionamento si presenta per una frazione di secondo e poi scompare. Non sembra esserci alcun modo per l'utente di usarlo.
• Immagini di testo sono selezionati sulla mouseup
• Possibilità di trascinare le immagini. In alcuni browser, possono essere selezionati prima di trascinare. Come scritto nella voce precedente, una semplice mouseup si tradurrà in un'immagine selezionata.
• Le immagini vengono selezionati utilizzando la selezione del testo e non "la selezione di controllo" (quello che fornisce l'interfaccia utente di ridimensionamento).

Questo è il meglio che ho potuto venire con dopo ore di respiri molto profondi. Penso che sia abbastanza buono se si vuole veramente per sbarazzarsi di quelle maniglie.

In IE, impostazione oncontrolselect di tornare false sull'immagine, in realtà non impedisce quelle maniglie di apparire, e si può farlo abilmente, allegando il seguente gestore per l'evento mousedown:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

E 'in realtà non funziona del tutto bene. La ragione per cui non ha funzionato molto bene è che per iniziare un'operazione di trascinamento sull'immagine, si doveva mantenere premuto il mouse, senza spostarlo, per una frazione di secondo, e solo allora iniziare a muoversi per la resistenza. Se si preme il mouse e subito ha iniziato il trascinamento, l'immagine sarebbe rimasto al suo posto e non essere trascinati.

Quindi non ho fatto questo.

Quello che ho fatto è il seguente. In tutti i browser, ho usato mouseup al testo selezionare l'immagine di destinazione esclusiva. Nel settore non-IE e IE11, in modo sincrono:

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

In IE 7 a 10, in modo asincrono:

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

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

Questo ha fatto in modo che, dopo quelle maniglie appaiono, scompaiono presto, perché l'immagine perde la sua "selezione di controllo", perché che la selezione viene sostituito con una selezione di testo normale.

In Internet Explorer 7 a 11, ho attaccato un gestore di dragend che rimuove tutti selezione:

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

In questo modo le maniglie che appaiono dopo il drag and drop, scompaiono.

Spero che questo aiuta e spero si può fare ancora meglio.

Answer 4

per IE11 (havn't testate le vecchie versioni di IE, ma mi sento come avrebbe funzionato) è possibile aggiungere l'attributo contenteditable = "false" al tag img. Questo impedirà qualsiasi ridimensionamento venga fatto mantenendo trascinamento in posizione.

Answer 5

... solo il meglio correzione mai

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

o qualsiasi elemento HTML che avvolge il vostro input / img

Funziona su IE11 come un fascino

Answer 6

Ho appena affrontare questo problema. Ho provato document.execCommand("enableObjectResizing", false, false); ma, l'icona mossa è stata ancora comparendo. Ciò che solo risolvere il mio problema è stato proprio e.preventDefault() quando si verifica un evento onmousedown.

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

Answer 7

Avete provato ad aggiungere lo stile

border: none;

al div?