Question

我有一个像

这样的文字

<AnyTag>here is a sample test text and more text</AnyTag>.

现在我正在选择＆＃34;测试＆＃34;然后点击页面中的斜体按钮，它会创建一个新元素<span class="ItalicClass">和surroundContents()。这很好。

现在我有像

这样的文字

<AnyTag>here is a <i>sample test text</i> and more text</AnyTag>.

现在，如果我选择＆＃34; test＆＃34;它做同样的但我想首先关闭父，然后插入新元素。我知道parentNode因此我可以在span元素中插入一个新类。同样的方法我需要在新元素结束后打开同一个父元素。最后一行应该是

<AnyTag>here is a <i>sample </i><span class="ClassB">test</span><i> text</i> and more text</AnyTag>

如果我选择＆＃34;更多＆＃34;然后

<AnyTag>here is a <i>sample test text</i> and <span class="ClassA">more</span> text</AnyTag>.

赞赏这方面的任何指示。

此致星

Answer 1

首先，您需要在两个索引处拆分包含“示例测试文本”的文本节点，以便您有三个并排的文本节点：“sample”，“test”和“text”。（注意样本和文本中的空格）。

其次，创建一个范围，该范围包含父节点的开头到'sample'文本节点的末尾。提取内容。

var range, frag;
range = rangy.createRange();
range.setStartBefore(parent); //your 'i' tag
range.setEndBefore(textNode); //your text node 'sample '
frag = range.extractContents(); //extract a document fragment - removes items from dom
parent.parentNode.insertBefore(frag, parent); //place the fragment before the parent node

重复相同的步骤，这次创建一个从文本节点“text”开始到父节点结尾的范围。

var range, frag;
range = rangy.createRange();
range.setStartAfter(textNode); //your text node ' text'
range.setEndAfter(parent); //your 'i' tag
frag = range.extractContents(); //extract a document fragment - removes items from dom
parent.parentNode.insertBefore(frag, parent.nextSibling); //place the fragment after the parent node

最后，打开原始父节点“i”的内容并用新标签重新包装。

如果有任何不清楚的地方，请告诉我。我一直在构建一个WYSIWYG编辑器并且已经彻底测试了这个想法。

Rangy - 在insertElement之前关闭父元素

1 个答案: