Ich habe einen inhaltsbearbeitbaren DIV, der mit einem Textbereich verknüpft / synchronisiert ist.

Die inhaltsbearbeitbare DIV ist eine kostenlose Sandbox, in der Formatierungselemente usw. erstellt werden, wenn sie aufgerufen werden. Dies führt jedoch häufig zu unordentlichen gestapelten Elementen.

Ich möchte den Code aufräumen könnenVor Das Textfeld-Formular wird an den Server gesendet.

Es ist möglich, dass am Ende Folgendes passiert:

<div>
  <b>
    <i>
        Hel
    </i>
    <i>
        l
    </i>
  </b>
  <i>
    <b>
       o World!
    </b>
  </i>
</div>

Welches würde im Idealfall konvertiert werden zu:

<div>
  <b>
    <i>
       Hello World!
    </i>
   </b>
</div>

Wenn ich (rekursiv) durch die childNodes des div ging, konnte ich vermutlich die Formate verfolgen(tagName.toUpperCase() == {'B','I' ....} ) // oder mache eindocument.queryCommandState währenddessen konnte ich adocument.execCommand('removeFormat',false,null) auf derselectNode(thenode).

Allerdings bin ich ein bisschen verloren, wie ich über benachbarte Knoten der Formate hinweg den Überblick behalten könnte.

Als Referenz hier ist, was ich vor kurzem für die DOM-Analyse getan habe, um die Formatierung von IMG-Tags zu entfernen:http://jsfiddle.net/tjzGg/

NB: Dies ist eine ähnliche Frage>jquery - Konsolidiert gestapelte DOM-Elemente aber es geht um die KonsolidierunguseCSS Stillinien in einen Hauptstil. Der Grund für diese andere Frage ist, dass ich versuchen möchte, Text mit einem gemeinsamen Stil zu konsolidieren, der jedoch aufgrund der Formatierung des Texts künstlich auf mehrere Elemente aufgeteilt wurde. Wenn Sie ein inhaltsbearbeitbares div verwenden und jeweils ein Zeichen einzeln fett formatieren, erhalten Sie ein einzelnes Zeichen pro Element.