Tengo un DIV contenteditable que está vinculado / sincronizado de nuevo a un área de texto.

El DIV contenteditable es una caja de arena gratuita para todos que creará elementos de formato, etc. a medida que se invocan. Sin embargo, esto resulta a menudo en elementos apilados desordenados.

Me gustaría poder limpiar el código.antes de El formulario de área de texto se envía al servidor.

Es posible terminar con algo como lo siguiente:

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

Que idealmente se convertiría a:

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

Si caminara (recursivamente) a través de los Nodos del niño del div, presumiblemente podría hacer un seguimiento de los formatos(tagName.toUpperCase() == {'B','I' ....} ) // o hacer undocument.queryCommandState durante el cual pude hacer unadocument.execCommand('removeFormat',false,null) sobre elselectNode(thenode).

Sin embargo, estoy un poco perdido en cómo podría hacer un seguimiento de los nodos vecinos de los formatos.

Como referencia, esto es lo que hice recientemente para el análisis de DOM para eliminar el formato de las etiquetas IMG:http://jsfiddle.net/tjzGg/

NB: Esta es una pregunta similar>jquery - consolidar elementos DOM apilados pero se trata de consolidaruseCSS líneas de estilo en un estilo principal. La razón por la que esta es una pregunta diferente es que estoy buscando consolidar el texto con un estilo común pero dividido artificialmente en múltiples elementos debido a cómo se formateó el texto. Si tomas un div contentable y un carácter individual en negrita a la vez, obtendrás un solo carácter por elemento.