Wie deaktiviere ich die Auswahl und Größenanpassung von Elementen in contenteditable div?

Ich ausgegeben viel Zeit, selbst, wenn Sie versuchen, vollständig zu verbergen Steuern der Auswahl (dies ist, wie Sie genannt werden) in CKEditor's widgets. Leider habe ich keine guten Neuigkeiten.

Lösung 1

Zuerst von allen, gibt es eine mscontrolselect Veranstaltung. Wenn ich es gefunden (und die Tatsache, dass sein name hat einen ms Präfix) ich war sehr glücklich, weil laut MS es sollte vermeidbar.

Aber es stellte sich heraus, dass es völlig instabil. Manchmal wird es ausgelöst, manchmal nicht. Es variiert zwischen den N-Versionen, die DOM-Struktur, Attribute, die ein element, das Sie klicken, ist es ein block-element, usw. Die üblichen MS ist Mist. Aber man kann versuchen:

function controlselectHandler(evt) {
    evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);

Diese wird jedoch vollständig blockieren-Auswahl (wenn es funktionierte). So werden Sie machen diese Elemente nicht auswählbare überhaupt.

Lösung 2

Dann gibt es eine zweite option, zuverlässiger - verschieben Auswahl woanders nach einem solchen element, auf das geklickt wurde. Es gibt nur wenige Möglichkeiten, wie dies umgesetzt werden kann. Im CKEditor sind wir Befestigung Auswahl auf mousedown... und mouseup da (wieder) manchmal ist es nicht genug für den IE und es hängt davon ab, Dutzend Bedingungen. Sie konnte auch hören selectionchange event und Update-Auswahl.

Jedoch, wieder, wir sprechen auch über blockierende Auswahl eines solchen Elements.

Lösung 3

Daher, die Dritte option zu sperren ist nicht die Selektion, sondern die resizestart Veranstaltung. CKEditor kombiniert diese mit enableObjectResizing Befehl: https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218. Diese Lösung wird verhindert, ändern der Größe, aber natürlich nicht verstecken, diese hässlichen Ränder.

Lösung 4

Als ich erwähnte, arbeitete ich auf dieses problem im CKEditor. Wir haben es geschafft, machen es möglich, auch bei nicht-editierbaren Elemente im inneren bearbeitet, aber mit vollständig kontrollierbar und unified Verhalten zwischen den Browsern. Die komplette Lösung ist zu Komplex, um erklärt werden, auf StackOverflow und es dauerte Monate, es zu implementieren. Wir nannten diese Funktion widgets. Sehen Sie einige demos hier. Wie Sie sehen können, gibt es keine Kontrolle Auswahl, wenn nicht-editierbare element ausgewählt ist. Die Auswahl erscheint auf einen kurzen moment nur zwischen mousedown und mouseupaber nur in bestimmten Fällen. Außer, dass alles funktioniert, als wäre es native (obwohl es eine völlig falsche Sache).

Lesen Sie mehr in der Einführung zu Widgets und in der Widgets Tutorial.

InformationsquelleAutor der Antwort Reinmar

Lösung 5

Wenn der Fokus verschoben wird, um untergeordnete Steuerelement zu ändern, den Inhalt editierbare element-Attribut-Wert auf false und gleiche Weise, sobald Sie Ihren Fokus Blätter vom Kind Kontrolle wieder die content-editable auf true.

InformationsquelleAutor der Antwort user3698559

Ich habe das gleiche problem mit CKEditor 4.4.7 in IE11. Als workaround kann, Speichere ich die aktuellen Maße von einem element auf "mousedown" und "min-width", "max-width", "min-height" und "max-height" Stil Eigenschaften, um es in den aktuellen Dimensionen. Von diesem wird das element angezeigt, in der ursprünglichen Größe, während die Größe. Auf "mouseup" ich wieder die style-Eigenschaften der modifizierten Elements. Hier ist mein code:

$('textarea').ckeditor().on('instanceReady.ckeditor', function(event, editor) {
    var $doc = $(editor.document.$);
    $doc.on("mousedown", "table,img", function() {
        var $this = $(this);
        var widthAttrValue = $this.attr("width");
        if (widthAttrValue) {
            $this.data("widthAttrValue", widthAttrValue);
        }
        var widthStyleValue = this.style.width;
        if (widthStyleValue) {
            $this.data("widthStyleValue", widthStyleValue);
        }
        var width = widthStyleValue || widthAttrValue || String($this.width())+"px";
        var height = this.style.height || $this.attr("height") || String($this.height())+"px";
        $this.css({
            "min-width": width,
            "max-width": width,
            "min-height": height,
            "max-height": height,                                       
        });
        $doc.data("mouseDownElem",$this);
    }).on("mouseup", function() {
        var $elem = $doc.data("mouseDownElem");
        if ($elem) {
            $elem.removeAttr("height").css("height","");
            var widthAttrValue = $elem.data("widthAttrValue");
            if (widthAttrValue) {
                $elem.attr("width", widthAttrValue);
                $elem.removeData("widthAttrValue");
            } else {
                $elem.removeAttr("width");
            }
            var widthStyleValue = $elem.data("widthStyleValue");
            if (widthStyleValue) {                                      
                $elem.removeData("widthStyleValue");
            } 
            $elem.css({
                "min-width":"",
                "max-width":"",
                "min-height":"",
                "max-height":"",
                "width": widthStyleValue || ""
            });
            if (!$.trim($elem.attr("style"))) {
                $elem.removeAttr("style");
            }
            $doc.removeData("mouseDownElem");
        }
    });
});

InformationsquelleAutor der Antwort Christof

Ich hatte das gleiche problem. Es scheint, dass aus den bisherigen posts hier gibt es bestimmte Verhaltensweisen, die der IE erkennt und fügen diesem Absatz focus/resize. Für mich war es, da hatte ich eine Formatvorlage für Absätze in der contenteditible div.

Entfernen:

div[contenteditble="true"] p{
   min-height:1em;
}

Fixiert es für mich.

InformationsquelleAutor der Antwort user1364467

Hier ist was ich getan habe um dieses problem zu beheben. Für mich wäre nur der Fall, wenn die contenteditable element leer war und die Ziehpunkte verschwinden würden, wenn es Inhalte so erstellte ich den folgenden CSS-Lösung gehen über diese:

[contenteditable]:empty:after {
  content: " ";
}

Die Idee hinter der Lösung ist, wenn die contenteditable Feld leer ist, gilt Sie ein Leerzeichen ein pseudo-element, wodurch die Größe-tags von der Anzeige, wenn der Benutzer die contenteditable Feld. Nachdem der Benutzer etwas eingegeben hat dann das pseudo-element verschwindet.

Hinweis, wegen der Verwendung von pseudo-Elementen, dieser fix funktioniert nur auf IE9.

InformationsquelleAutor der Antwort Nej Kutcharian

Nichts sonst jemand empfohlen hier oder in anderen threads, die wirklich für mich gearbeitet, aber ich löste es, indem tun:

[contenteditable="true"] p:empty {
    display: inline-block;
}

Diese Weise die Größe-Boxen verschwunden, aber ich konnte noch mein cursor unten oder in der P-Blöcke, um Sie zu Bearbeiten.

InformationsquelleAutor der Antwort Ezra