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或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()

Rangy SurroundContents替换

1 个答案: