Rangy replace parent

Rangy replace parent

本文关键字：parent replace Rangy      更新时间：2023-09-26

我已经尝试了无数种方法来使用range，下面是我最接近的方法。在chrome和IE8中运行良好(我尝试过的许多其他版本也是如此)，但firefox坚决拒绝配合。

test()函数应用于一个按钮，该按钮在选择页面上的一些粗体文本后被单击。我想看到的是:

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

替换为

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

在chrome和FF中，它工作和console.log行:

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

BUT in 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，我将永远感激。

这是浏览器不一致。在我看来，这并不坏，因为在任何一种情况下，选择都是合理的，但它仍然是不一致的。最简单的解决方法是创建一个显式选择文本节点的范围，在所有主流浏览器中将其添加到选择项中后，它将保持不变。而不是

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不会。

相关文章：