Rangy SurroundContents 替换

Question

我正在考虑在网页上实现一个简单的 2 按钮切换，以在具有 H1 标题和 H2 之间切换一些选定的文本。环绕内容方法效果很好，但是我在尝试替换现有的父标记元素节点时遇到了问题。我尝试了各种方法来尝试做到这一点，但都没有取得太大的成功。

基本功能如下。使用相同的选定文本并一个接一个地运行这两个函数将产生一些输出，如下所示：

选择“测试文本”的文本然后选择H1选项后： <h1>test text</h1>

如果再次选择相同的文本并且这次按下 H2 选项：<h1><h2>test text</h2></h1>

function surroundSelectedWithH1() {
    var element = document.createElement("h1");

    // removed code to setup range to save space
    if (range) {
        range.surroundContents(element);
    }
}

function surroundSelectedWithH2() {
    var element = document.createElement("h2");

    // removed code to setup range to save space
    if (range) {
        range.surroundContents(element);
    }
}

这很好，可以预期，但我真的在寻找一种方法来删除原始父标题元素，以便标题元素不会嵌套（例如 - 文本被 h1 或h2，而不是两者）。我确实尝试访问 parentNode 等，但没有设法使这种方法发挥作用。我已经尝试查看以下 parentElement 建议Getting the parent node for selected text with rangy library 但是我无法将更改后的父元素写回 DOM 或有一种令人满意的方法来确定对象在 DOM 中的位置以替换它.它很快就变成了一种笨拙的方法，必须有更好的选择。

我知道 rangy CssApplier 模块可以处理这种情况，但我需要使用实际元素而不是 css。

我还注意到，在使用 rangy 进行文本编辑器实现的 raptor 编辑器上，在应用标题时会遇到完全相同的问题：http://www.raptor-editor.com/demo

这个问题也很相关，但据我所知，execCommand 无法处理这个特定的元素问题 - Javascript: how to un-surroundContents range

亲切地接受任何帮助或建议。

Answer 1

尝试：

highlighter.unhighlightSelection()