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

【问题标题】：JavaScript Markup Editor using selection and range object使用选择和范围对象的 JavaScript 标记编辑器
【发布时间】：2011-07-12 22:34:06
【问题描述】：

我正在尝试使用选择和范围对象编写基于 JavaScript 的标记编辑器 (WYSIWIG)。到目前为止，我没有任何问题可以访问这些对象。

我的问题从这里开始：

使用范围对象，我可以访问它的属性 startContainer/StartOffset 和 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.

但由于我没有注意到现有树结构的破坏，我该怎么做？如何确保有效标记？

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

我希望这个问题很清楚，我为它的一般形式道歉。但是我真的对这些东西很着迷......

【问题讨论】：

【解决方案1】：

有内置方法document.execCommand() (MSDN, MDN) 可以为您处理这些内容。在下划线的情况下，它将是

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

请注意，这仅适用于大多数浏览器中的可编辑内容（使用 contenteditable 或 designMode）。

如果您需要将某些样式应用到某个内置命令未提供的选区，则需要自己处理选区中的所有节点，必要时在选区的每一端进行拆分.这是不平凡的。此外，IE DOM Range 和 Selection 并且做事完全不同。如果您需要处理这些浏览器，像我自己的 Rangy 这样的库可以提供帮助。

【讨论】：

非常感谢您的回答。我不关心 IE 的兼容性，但我担心我将不得不采取非平凡的方式......我需要一种插入任意类的跨度的可能性。是否有现有的编辑器可以启发我？或者算法是否存在于某个地方？
@Tobi：看看 Rangy 中的 CSS 类应用程序模块：code.google.com/p/rangy/wiki/CSSClassApplierModule
这个 css applier 模块看起来很有趣！首先我有另一个问题要处理：现在我考虑通过比较 range.startContainer 和 range.endContainer 来确定选择是否破坏了预先存在的树结构。如果为真，则 sel 在同一个节点内，所以没有。坏了，可以在其中插入一个新节点。如果为 false，则选择跨越预先存在的树结构。我已经认识到这种检测并不是一直有效：有时是真的，有时不是，尽管我总是选择同一个节点。有区别吗。在鼠标和键盘之间选择。？
@Tobi：浏览器表示选择的方式确实有所不同，但我不确定这与这个问题有关。检测一个范围是否可以被包围所需的步骤在 DOM Range 规范中有很好的定义：w3.org/TR/DOM-Level-2-Traversal-Range/…。如果您使用的是 Rangy，则可以使用范围的 canSurroundContents() 方法。