Wenn ich den Browser contenteditable = true auf einem div verwende, damit der Benutzer den Text darin aktualisiert, stoße ich auf folgendes Problem (mit Chrome):

Bei Verwendung derlöschen Rücktaste, um einen Zeilenumbruch zu entfernen (eine Zeile zurückspringen). Der Browser fügt ein Tag mit Inline-Stil um diesen Text ein.

Dies ist sehr frustrierend, da es nicht nur das tut, sondern auch einen Inline-Stil zu diesem Span-Tag hinzufügt. Wenn meine Schriftfarbe derzeit schwarz ist, fügt es diesem Span-Tag beispielsweise einen style = "color: black" hinzu.

Das Ergebnis ist, dass ich die Farbe dieses Texts mit meiner Symbolleiste nicht mehr bearbeiten kann, da sie vom Inline-Stil auf das span-Tag festgelegt wurde. Dasselbe passiert mit der Schriftgröße, wenn ich auf die gleiche Weise eine Zeile mit der Entf-Taste sichern möchte.

Jeder hier, der mir ein oder zwei Dinge über das Bearbeiten von Inhalten beibringen könnte, oder einen Weg vorschlagen könnte, die Spannweite zu entfernen, wenn es nicht möglich ist, dieses Browserverhalten zu verhindern.

** Um dieses Problem zu reproduzieren ** - Erstellen Sie ein Div im Browser, setzen Sie einen Inline-Stil mit beispielsweise der Schriftgröße: 36px - Bearbeiten Sie den Text des Div mit im Browser bearbeitbarem Inhalt, und schreiben Sie einige Zeilen mit manuellen Zeilenumbrüchen. - Setzen Sie nun den Cursor VOR / VOR einen Textabschnitt und drücken Sie die Rücktaste. Um den Text, der sich VOR Ihrem Cursor befindet, sollte nun ein span-Tag generiert und dessen Stil geändert werden.

 AKTUALISIEREN** Daher habe ich einige verschiedene Lösungen mit begrenztem Erfolg ausprobiert. Zuerst habe ich versucht, alle Tags zu entfernen, aber dann habe ich auch alle Zeilenumbrüche verloren (vielleicht könnte ein besserer regulärer Ausdruck dies lösen, ich bin kein Experte für regExp-Schreiben).

Alle Funktionen unten wurden zuerst beim Keyup-Ereignis aufgerufen, aber dann habe ich sie an die Auswahl des Textfelds angehängt. Wie unter Funktionen geschossen wird, ist für die Frage unerheblich.

        //option to remove all tags
        var withTags = $(textObject).html();
        var withoutTags = withTags.replace(/<(?:.|\n)*?>/gm, '');       
        $(textObject).html(withoutTags);

Mein zweiter Versuch war erfolgreicher, als ich Stil-Tags von Objekten unter dem Textfeld entfernte (die Divs und Spans innerhalb des Textfelds, das Chrome hinzufügte). Hier war mein erster Code

        //option to remove style of elements
        $(textObject).children().each(function() {
            $(this).removeAttr('style');
            console.log('removing style from first level element: '+this);

        });

Dann wurde mir klar, dass Chrome jedes Mal, wenn ich ein Textfeld bearbeite, eine neue verschachtelte Ebene von div / span-Tags hinzufügt, die der obige Code nicht erreichen kann.

        //option to remove style of elements
        $(textObject).children().each(function() {
            $(this).removeAttr('style');
            console.log('removing style from first level element: '+this);

            //And of course it would be all too easy if chrome added only one level of elements...
            $(this).children().each(function() {
                $(this).removeAttr('style');
                console.log('removing style from second level element: '+this);
            });

        });

Dies reicht jedoch nicht aus, da der Umfang der Verschachtelung theoretisch unbegrenzt sein kann. Ich arbeite immer noch an einer besseren Lösung. Jede Eingabe wird geschätzt =)