0

我有一个像

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

现在我正在选择“测试”并单击页面中的斜体按钮，它会创建一个新元素<span class="ItalicClass">和它surroundContents()。这炒得很好。

现在我有文字

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

现在，如果我选择“测试”，它会做同样的事情，但我想先关闭父元素，然后插入新元素。我知道因此我可以在元素parentNode中插入一个新类。span同样，我需要在新元素结束后打开同一个父级。最后一行应该是

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

如果我选择“更多”这个词，那么

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

感谢这方面的任何指示。

问候多米尼克

4

1 回答 1

1

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

其次，创建一个包含父节点开始到“示例”文本节点结束的范围。提取内容。

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

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

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”的内容并用新标签重新包装它。

如果有任何不清楚，请告诉我。我一直在构建一个所见即所得的编辑器，并彻底测试了这个想法。

于 2012-10-15T15:59:28.087 回答