Entfernen resize-Handler, die auf contentEditable div

Nur als Randbemerkung, können Sie Sie deaktivieren Firefox die automatische resize-handle-Funktion, indem Sie die (etwas schlecht dokumentiert) enableObjectResizing Befehl, um das Dokument:

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

AFAIK, dies kann nur sicher erfolgen, nachdem das Dokument geladen wurde, und es gibt keine Weise, die ich kenne, deaktivieren Sie den grabber, das ist eine separate Funktion.

In Chrome 39, diese Griffe scheinen nicht zu existieren, selbst wenn Sie es wollte.

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

Aber im Internet Explorer diese können nicht ausgeschaltet werden. Es muss umgangen werden.

In WYMeditor Entwicklung, hier ist was ich gefunden habe.

Folgende Ergebnisse:

• Im IE die Größe UI zeigt sich für einen Sekundenbruchteil auf und verschwindet dann wieder. Es scheint keine Möglichkeit für den Benutzer, es zu benutzen.
• Bilder sind text ausgewählt mouseup
• Fähigkeit, ziehen Sie die Bilder. In einigen Browsern werden, können Sie ausgewählt werden, bevor Sie ziehen. Wie geschrieben, die in dem vorherigen Element, eine einfache mouseup führen zu einem Bild ausgewählt werden.
• Bilder werden ausgewählt mit text Auswahl und nicht "control selection" (diejenige, die die Größe UI).

Dies ist die beste, ich könnte kommen mit nach Stunden sehr Tiefe Atemzüge. Ich denke, es ist gut genug, wenn Sie wirklich wollen, um loszuwerden, die Griffe.

Im IE Einstellung oncontrolselect zurück false auf dem Bild, wirklich verhindern, dass diese Griffe angezeigt, und Sie können es geschickt, indem Sie die folgende Prozedur, um die mousedown Veranstaltung:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

Es tatsächlich nicht funktioniert ganz gut. Der Grund, dass es nicht sehr gut funktioniert ist, dass, um zu beginnen, eine drag-und-drop-Vorgang auf das Bild, den musste man drücken und halten Sie die Maus, ohne diesen zu bewegen, für den Bruchteil einer Sekunde, und nur dann beginnen, verschieben für der ziehen. Wenn der eine drückte die Maus und begann sofort, Sie zu ziehen, das Bild würde dabei an seinem Platz bleiben und nicht verschoben werden.

So wollte ich das nicht tun.

Was ich gemacht habe ist die folgende. In allen Browser, die ich verwendet mouseup zum text wählen Sie das target-Bild ausschließlich. In nicht-IE und IE11, synchron:

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

Im 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 sorgte dafür, dass nach diesen Griffe auftauchen, verschwinden Sie so schnell wie möglich, denn das Bild verliert seine "Kontrolle-Auswahl", denn diese Auswahl ist durch einen regulären text-Auswahl.

Im Internet Explorer 7 bis 11, befestigte ich einen handler zu dragend entfernt alle Auswahl:

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

Dies macht die Griffe, die zeigen, bis nach dem drag-and-drop, verschwinden.

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

... nur das beste Update jemals

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

oder ein beliebiges html-element umschließt, die Ihre input/img

Funktioniert auf IE11 wie ein Charme

Haben Sie versucht, indem Sie den Stil

border: none;

div?