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

getSelection（）不适用于IE </iframe>中的<iframe>

1 个答案: