getSelection() 不适用于 IE 中的 <iframe>

Question

从我的other question 开始，这是answered 和Elian Ebbing。我现在需要让它为 iframe 工作（不要问）。

它基本上是一个使用 iframe 的 wisiwig 编辑器。

我已经在jsfiddle 上编写了测试环境。

代码如下：

CSS：

h1{font-size:150%; border-bottom:1px solid #ddd; margin:20px auto 10px;}

HTML：

<h1>Normal Text (works)</h1>
<p>Alex Thomas</p>
<button id="click">Click</button>

<h1>iFrame</h1>
<p>Type in some text:</p>
<iframe id="iframe"></iframe>
<br /><button id="iClick">Click</button>

jQuery

(document).ready(function() {
    setTimeout(makeEdit,10);
});

$('#click').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

$('#iClick').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

function makeEdit(){
  document.getElementById("iframe").contentWindow. document.designMode="on";
};

我真的希望有人可以帮助我...谢谢

Answer 1

您需要使用 iframe 的 document 对象来创建您使用的 TextRanges：

function makeIframeSelectionRed() {
    var range = document.getElementById("iframe").contentWindow.document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
}

$('#click').click(makeIframeSelectionRed);

$('#iClick').click(makeIframeSelectionRed);