WYSIWYG编辑器，结构处理

Question

我正在创建自己的wysiwyg编辑器，但我遇到了一个问题。

至于编辑器本身，它是非常标准的，我使用contenteditable iframe和一些用于粗体文本的execcommand按钮等等。

现在我的问题，我不知道如何保持html结构整洁干净。

例如，用户单击一个按钮，使他选择的文本向右浮动，获取所选文本并将其包装在

中

  <div style="float: right">selected text</div>

。但是如果用户多次选择文本，那么就会出现这样的结果。

<div style="float: right">
   <div style="float: left>
      <div style="float: right">
         selected text
      </div>
   </div>
</div>

，这当然是非常混乱和丑陋的。

有一些干净的方法如何处理这个？ （而且我不想使用像MCE这样的第三方编辑器）

由于