Konsolidacja skumulowanych elementów formatowania DOM - DIV contenteditable

Mam odpowiedni DIV, który jest połączony / zsynchronizowany z tekstem.

DIV contenteditable jest wolnym obszarem piaskownicy, który tworzy elementy formatujące itp. W trakcie ich wywoływania. Jednak często powoduje to bałagan na stosie elementów.

Chciałbym móc wyczyścić kodprzed formularz tekstowy jest wysyłany na serwer.

Można skończyć tak:

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

Które najlepiej byłoby przekształcić w:

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

Gdybym przechodził (rekurencyjnie) przez childNodes div, prawdopodobnie mógłbym śledzić formaty(tagName.toUpperCase() == {'B','I' ....} ) // lub wykonajdocument.queryCommandState podczas którego mógłbym zrobićdocument.execCommand('removeFormat',false,null) naselectNode(thenode).

Jestem jednak trochę zagubiony w tym, jak mogę śledzić sąsiednie węzły formatów.

Jako odniesienie tutaj, to co ostatnio zrobiłem dla parsowania DOM, aby usunąć formatowanie ze znaczników IMG:http://jsfiddle.net/tjzGg/

NB: To jest podobne pytanie>jquery - konsolidacja skumulowanych elementów DOM ale chodzi o konsolidacjęuseCSS styl linii w jeden główny styl. Powodem tego jest inne pytanie, ponieważ szukam konsolidacji tekstu ze wspólnym stylem, ale sztucznie podzielony na wiele elementów ze względu na formatowanie tekstu. Jeśli weźmiesz odpowiedni div i indywidualnie pogrubisz jedną postać na raz, otrzymasz jedną postać na każdy element.

questionAnswers(1)

yourAnswerToTheQuestion