javascript - Rangy 替换父级

Question

我已经用 rangy 尝试了无数种方法，下面是我最接近的方法。在 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] 

但是在 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 不会。