使用选择和范围对象的JavaScript标记编辑器

Question

我想使用选择和范围对象编写基于JavaScript的标记编辑器（所见即所得）。到目前为止，我没有任何问题来访问这些对象。

我的问题在这里开始：

使用范围对象，我可以访问它的属性startContainer /开始偏移和EndContainer/Endoffset。这意味着我得到关于我的选择开始的节点的信息，包括内部位置和关于选择结束的相同信息。

据我所知，JavaScript自动添加开始或结束标签，以防我的选择破坏现有的树结构。

如果我现在要添加一些标记，我该如何处理这些破碎的结构？

例子：

This <i>is my</i><b>sample</b> text. 

现在，我想强调的部分“我的样本”

，这意味着这样的事情，必须构建出“我的样本”的选择：

This <i>is <u>my</u></i><b><u>sample</u></b> text. 

但是，既然我没有注意到树状结构的破坏，我该怎么做？我如何确保有效的标记？

我也在考虑处理整个字符串，但我不知道字母/文本的全局位置，而只是关于它们在特定节点中的位置。

我希望这个问题很清楚，我对它的一般形式表示歉意。但我真的为这件事疯狂......

Answer 1

有内置的方法document.execCommand()（MSDN，MDN），它为您处理这些东西。在底线的情况下，这将是

document.execCommand("Underline", false, null); 

的jsfiddle：http://jsfiddle.net/3NcEP/

注意，在可编辑的内容这只作品（使用contenteditable或designMode）在大多数浏览器。

如果您需要对某个内置命令未提供的选择应用某些样式，则需要自己处理所选内容中的所有节点，并在必要时分割选择。这是不平凡的。另外，IE < 9不支持DOM Range和Selection，并且完全不同。如果您需要处理这些浏览器，像我自己的Rangy这样的库可以提供帮助。