javascript - Rangey Surround内容替换

Question

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

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

选择“测试文本”文本，然后选择 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 或 h1 包围) h2，不是两者)。我确实尝试访问parentNode等，但没有设法使这种方法发挥作用。我尝试查看以下parentElement建议Getting the parent node for selected text with rangy library但是我无法将更改后的父元素写回 DOM，也无法以令人满意的方式确定对象在 DOM 中的位置以便替换它。它很快就变成了一种笨拙的方法，必须有更好的选择。

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

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

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

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

Answer 1

尝试:

highlighter.unhighlightSelection()