Entfernen Resize-Handler auf contentEditable div

Question

Ich habe einen contentEditable div als reiches Textfeld zu benutzen. Es hat Resize-Handler um es, dass ich gehen möchte zu befreien. Jede Idee, wie ich würde das tun?

Edit:. Dies scheint der Fall zu sein, weil ich absolut bin das Div Positionierung, so Firefox eine ärgerliche _moz_resize Attribut zu dem Element hinzufügt, welches ich nicht abschalten kann

Answer 1

Es sieht aus wie ich in der Lage sein werde, dies zu umgehen, indem Sie einen Wrapper div Hinzufügen und absolut den Wrapper Positionierung und nehmen dann die innere div contentEditable.

Answer 2

So wie eine Randnotiz, können Sie Firefox automatische Anfasser Funktion durch das Senden der (etwas schlecht dokumentiert) enableObjectResizing Befehl an das Dokument deaktivieren:

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

AFAIK, kann dies nur sicher durchgeführt werden, wenn das Dokument geladen ist, und es gibt keine Möglichkeit, die ich kenne, den Greifer zu deaktivieren, die eine separate Funktion.

Answer 3

In Chrome 39, diese Griffe scheinen nicht zu existieren, auch wenn man wollte sie.

In Firefox kann man einfach execCommand verwenden, wie ZoogieZork beantwortet.

Aber in Internet Explorer kann nicht ausgeschaltet werden. Es ist darauf zu umgingen.

WYMeditor Entwicklung, hier ist was ich gefunden habe.

Die folgenden Ergebnisse in:

• In IE, die Resize-UI zeigt sich jetzt für den Bruchteil einer Sekunde und dann verschwindet. Es scheint keine Möglichkeit zu sein, dass der Benutzer es zu benutzen.
• Bilder sind Text auf mouseup ausgewählt
• Möglichkeit zu ziehen Bilder. In einigen Browsern, können sie vor dem Ziehen ausgewählt werden müssen. Wie im vorherigen Artikel geschrieben, ein einfaches mouseup in einem Bild ausgewählt führen wird.
• Die Bilder werden ausgewählte Textauswahl und nicht mit „Steuerung Auswahl“ (das, was bietet den Resize-UI).

Dies ist das beste, das ich mit nach Stunden sehr tiefe Atemzüge kommen konnte. Ich denke, es ist gut genug, wenn Sie wirklich diese Griffe loswerden wollen.

Im IE oncontrolselect Einstellung false auf dem Bild zurück, wirklich diese Griffe erscheinen nicht verhindert, und man kann es klug tun, indem Sie die folgende Prozedur zum mousedown Ereignisse Befestigung:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

Es funktioniert eigentlich nicht ganz gut. Der Grund, dass es nicht sehr gut funktionierte, ist, dass, um eine Drag-and-Drop-Operation auf dem Bild zu beginnen, eine zu drücken hatte und die Maus zu halten, ohne ihn zu bewegen, für einen Bruchteil einer Sekunde, und erst dann beginnen sie zu bewegen der Widerstand. Wenn man die Maus gedrückt und begann sofort zu ziehen, würde das Bild an seinem Platz bleiben und nicht gezogen werden.

So habe ich das nicht tun.

Was ich getan habe ist folgendes. In allen Browsern, benutzen ich mouseup zu Text ausschließlich das Zielbild auswählen. In Nicht-IE und IE11, synchron:

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

In IE 7 bis 10, asynchron:

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

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

Dies sorgt dafür, dass nach dem Ausscheiden dieser Griffe auftauchen, verschwinden sie so schnell wie möglich, weil das Bild seine „Steuerungsauswahl“ verliert, weil die Auswahl mit einer normalen Textauswahl ersetzt wird.

In Internet Explorer 7 bis 11, angebracht ich einen Handler dragend, die alle Auswahl entfernt:

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

Dies macht die Griffe, die nach dem Drag & Drop auftauchen, verschwinden.

Ich hoffe, das hilft, und ich hoffe, Sie können es noch besser machen.

Answer 4

für IE11 (I havn't die älteren Versionen von IE getestet, aber ich fühle mich wie es funktionieren würde) Sie contenteditable = „false“ -Attribut auf den img-Tag hinzufügen. Dies wird verhindern, dass jeder Wieder Dimensionierung erfolgt, während Drag & Drop an Ort und Stelle zu halten.

Answer 5

... nur das Beste fix je

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

oder eine beliebige HTML-Element, das Sie Ihre Eingabe Wraps / img

Arbeiten auf IE11 wie ein Zauber

Answer 6

Ich stehe gerade das Problem. Ich habe versucht, document.execCommand("enableObjectResizing", false, false); aber wurde das Verschieben-Symbol noch erscheinen. Was behebt nur mein Problem war nur e.preventDefault() wenn onmousedown Ereignis eintritt.

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

Answer 7

Haben Sie versucht, indem Sie den Stil

border: none;

auf die div?