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