Rangy替換父母

Question

我已經嘗試過使用rangy進行這種操作的方法，下面是我最近的。在Chrome和IE8中完美工作（就像我試過的許多其他版本一樣），但Firefox堅定地拒絕打球。

test（）函數應用於在頁面上選擇一些粗體文本後單擊的按鈕。我想看到的是：

[WrappedRange("blah":0, "blah":4)] [object Text] 
[WrappedRange("blah":0, "blah":4)] [object Text] 

但在：

<b>blah</b> or <strong>blah</strong>

與

<span style='font-weight:bold'>blah</span>

在Chrome和執行console.log線替換和FF它的工作原理FF：

[WrappedRange("blah":0, "blah":4)] [object Text] 
[WrappedRange(<SPAN>[1]:0, <SPAN>[1]:1)] [object HTMLSpanElement] 

。

function test() 
    { 
    var sr=rangy.getSelection().getRangeAt(0); 
    var oldParent=sameTextParent(sr); 
    console.log(sr.inspect()+" "+sr.commonAncestorContainer); 
    if(oldParent) 
     { 
     var newParent=document.createElement("span"); 
     newParent.style.fontWeight="bold"; 

     newParent.appendChild(sr.cloneContents()); 
     oldParent.parentNode.replaceChild(newParent,oldParent); 

     rangy.getSelection().selectAllChildren(newParent); 
     sr=rangy.getSelection().getRangeAt(0); 
     console.log(sr.inspect()+" "+sr.commonAncestorContainer); 
     } 
    } 
    function sameTextParent(r) 
    { 
    var s=r.startContainer,e=r.endContainer; 
    if(s.nodeType!=3||e.nodeType!=3){console.log("not TEXT node!");return null} 
    return (s.parentNode==e.parentNode)?s.parentNode:null; 
    } 

如果有人能告訴我我的方式錯誤，例如，將在FF工作，它在IE8和Chrome的方式，我將永遠感激。

Answer 1

這是瀏覽器不一致。在我看來，這不是一件壞事，因爲在任何一種情況下，選擇都是合理的，但它仍然是不一致的。最簡單的解決方法是創建一個明確選擇文本節點的範圍，在添加到所有主流瀏覽器中的選定內容後，文本節點將不會受到攻擊。而不是

rangy.getSelection().selectAllChildren(newParent); 

...我建議

var newRange = rangy.createRange(); 
newRange.setStart(newParent.firstChild, 0); 
var lastChild = newParent.lastChild; 
newRange.setEnd(lastChild, 
    lastChild.nodeType == 3 ? lastChild.length : lastChild.childNodes.length); 
rangy.getSelection().setSingleRange(newRange); 

的問題是，WebKit的軋液範圍，因爲它們添加到選擇。您創建的範圍在所有瀏覽器中都相同，但在添加到選擇時在某些瀏覽器中進行了更改，而不是Firefox。