it-swarm.com.de

Wie kann ich die Elementauswahl und Größenänderung in contenteditable div deaktivieren?

Z.B. Ich habe folgendes Layout:

<div contenteditable="true">
   <span class="text-block" contenteditable="false">
      <span contenteditable="false">Name</span>
      <a href="javascript:void(0)">
          <i class="small-icon-remove"></i>
      </a>
   </span>
​</div>

So deaktivieren Sie dies:

enter image description here

und das: 

enter image description here

27
Andrei

Ich habe selbst viel Zeit damit verbracht, zu versuchen, die Auswahl von Steuerelementen (so werden sie genannt) in CKEditor s widgets vollständig zu verbergen. Leider habe ich keine guten Nachrichten.

Lösung 1

Vor allem gibt es ein mscontrolselect event. Als ich es gefunden habe (und die Tatsache, dass der Name ein ms-Präfix hat), war ich sehr glücklich, weil laut MS es vermeidbar sein sollte.

Es stellte sich jedoch heraus, dass es völlig instabil ist. Manchmal wird es abgefeuert, manchmal nicht. Es variiert zwischen IES-Versionen, DOM-Struktur, Attributen, auf welches Element Sie klicken, es handelt sich um ein Blockelement usw. Der übliche MS-Mist. Aber du kannst es versuchen:

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

Dies wird jedoch die Auswahl vollständig blockieren (wenn es funktioniert hat). So machen Sie diese Elemente überhaupt nicht auswählbar.

Lösung 2

Dann gibt es noch eine zweite Option, die zuverlässiger ist: Verschieben Sie die Auswahl an eine andere Stelle, nachdem Sie auf ein solches Element geklickt haben. Es gibt einige Möglichkeiten, dies zu implementieren. In CKEditor korrigieren wir die Auswahl auf mousedown... und mouseup, da (wieder) manchmal nicht genug für IE ist und es von Dutzenden von Bedingungen abhängt. Sie können sich auch selectionchange event anhören und die Auswahl dort korrigieren.

Aber auch hier geht es um das Blockieren der Auswahl eines solchen Elements.

Lösung 3

Daher besteht die dritte Option darin, nicht die Auswahl zu blockieren, sondern das Ereignis resizestart. CKEditor kombiniert dies mit dem Befehl enableObjectResizing: https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218 . Diese Lösung verhindert die Größenänderung, verdeckt aber diese unschönen Grenzen natürlich nicht.

Lösung 4

Wie bereits erwähnt, habe ich dieses Problem in CKEditor bearbeitet. Es ist uns gelungen, nicht bearbeitbare Elemente in einem bearbeitbaren, aber vollständig kontrollierbaren und einheitlichen Verhalten zwischen Browsern zu haben. Die komplette Lösung ist zu komplex, um sie in StackOverflow zu erläutern, und es hat Monate gedauert, bis sie implementiert wurde. Wir haben diese Feature-Widgets genannt. Hier finden Sie einige Demos . Wie Sie sehen, gibt es keine Steuerelementauswahl, wenn ein nicht bearbeitbares Element ausgewählt ist. Die Auswahl erscheint zu einem kurzen Zeitpunkt nur zwischen mousedown und mouseup, jedoch nur in bestimmten Fällen. Abgesehen davon funktioniert alles so, als wäre es nativ (obwohl es eine völlig falsche Sache ist).

Weitere Informationen finden Sie in der Einführung in Widgets und im Widgets Tutorial .

23
Reinmar

Dieser Beitrag war für mich bei der Lösung dieses Problems kritisch (arbeitet in tinyMCE):

So entfernen Sie die Größenänderungsgriffe und den Rand von div mit contentEditable und dem Größenstil

Wenn Sie ein inhaltsänderbares DIV in ein nicht inhaltsfähiges DIV einfügen, werden die Handles nicht in IE oder FF angezeigt, Sie können den Inhalt jedoch weiterhin bearbeiten

Ex.

<div class="outerContainer" contenteditable="false">
    <div class="innerContainer" contenteditable="true">
    </div>
</div>
10
Baron

Lösung 5

Wenn der Fokus auf das untergeordnete Steuerelement verschoben wird, ändern Sie den Attributwert für das bearbeitbare Element des Inhalts in false und auf dieselbe Weise, wenn der Fokus das untergeordnete Steuerelement verlässt. 

5
user3698559

Um die Größenänderungspunkte zu deaktivieren, musste ich lediglich Folgendes für IE11 hinzufügen:

div {
    pointer-events: none;
}

Wenn Firefox diese Zeile ausführt, nachdem das contenteditable -Element eingefügt wurde, funktioniert dies:

document.execCommand("enableObjectResizing", false, false);
3
Kevin Lee

Was das Problem für mich gelöst hat, war das Entfernen einer max-width: 100% !important;-Zeile aus den CSS-Eigenschaften der DOM-Elemente in der contenteditable-DIV. Ich hoffe es hilft!

Übrigens passiert das bei MS Edge nicht ... Daumen drücken, dass dies eine Bewegung in die richtige Richtung von MS zeigt :)

1

Ich habe das gleiche Problem mit CKEditor 4.4.7 in IE11. Als Workaround speichere ich die aktuellen Abmessungen eines Elements unter "Mausedown" und setze die Stileigenschaften "min-width", "max-width", "min-height" und "max-height" auf die aktuellen Abmessungen. Dadurch wird das Element während der Größenänderung in seiner Originalgröße angezeigt. Bei "mouseup" stelle ich die Stileigenschaften des geänderten Elements wieder her. 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");
        }
    });
});
1
Christof

"Überlauf versteckt;" kann auch dieses Problem verursachen, wie:

ul, ol {
  overflow: hidden;
}
1

Ich hatte das gleiche Problem. Es scheint, dass aus früheren Beiträgen hier bestimmte Verhaltensweisen vorhanden sind, die von IE erkannt werden und die diesen Absatzschwerpunkt/die Größenänderung hinzufügen werden. Für mich war es, weil ich einen Stil für Absätze im contenteditible div hatte.

Entfernen:

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

Es wurde für mich behoben.

1
user1364467

Gelöst! Beim Platzieren des nicht inhaltsbearbeitbaren Bereichs in einem inhaltsbearbeitbarenBODYwurde ein anpassbarerSPAN-Container angezeigt. Was mein Problem gerade gelöst hat, war ein einfacher einzeiliger CSS-Stil pointer-events: none; am innerenSPANTag.

min-width: 1.5cm;
display: inline-block;
pointer-events: none;
<body content-editable="true">
  <span>Sample Text</span>
</body>

0

Nichts, was sonst hier oder in anderen Threads empfohlen wurde, hat wirklich für mich funktioniert, aber ich habe es gelöst, indem ich Folgendes tat:

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

Auf diese Weise verschwanden die Größenänderungsfelder, aber ich konnte meinen Cursor immer noch unter oder in die P-Blöcke setzen, um sie zu bearbeiten.

0
Ezra

Ich hatte das gleiche Problem, weil ich CSS-Regeln für die Max-Breite auf alle untergeordneten Elemente innerhalb der contenteditable gesetzt habe. Sie zu entfernen oder auf Bilder zu beschränken, war der Trick.

[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me

Stellen Sie sicher, dass keine <p>-Elemente von der Eigenschaft max-width beeinflusst werden.

0
retoheusser

So habe ich dieses Problem behoben. Für mich würde dies nur passieren, wenn das contenteditable -Element leer war und die Ziehpunkte zum Ändern der Größe verschwinden würden, wenn Inhalt vorhanden war. Daher habe ich die folgende CSS-einzige Lösung erstellt, um dieses Problem zu lösen:

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

Die Idee hinter der Lösung ist, dass, wenn das Feld contenteditable leer ist, ein leeres Leerzeichen-Pseudoelement angewendet wird. Dadurch werden die Größenänderungs-Tags nicht angezeigt, wenn der Benutzer das Feld contenteditable auswählt. Sobald der Benutzer etwas eingegeben hat, verschwindet das Pseudoelement.

Hinweis: Aufgrund der Verwendung von Pseudoelementen funktioniert dieser Fix nur für IE9 und höher.

0
Nej Kutcharian