Rangy SurroundContents 替换

Question

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

基本功能如下。 使用相同的选定文本并依次运行这两个函数将产生如下输出：

选择“test text”的文本然后选择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但是我无法让 rangy 将更改的父元素写回 DOM 或者有一种令人满意的方法来确定 DOM 中的位置对象是为了替换它。 它很快成为一种笨拙的方法，必须有更好的选择。

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

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

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

慷慨地收到任何帮助或建议。

Answer 1

尝试：

highlighter.unhighlightSelection()