html - 所见即所得编辑器，结构处理

Question

我正在创建自己的所见即所得编辑器，但遇到了问题。

至于编辑器本身，它非常标准，我使用 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 这样的第三方编辑器）

谢谢