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

Question

Leading on from my other question , which was answered by Elian Ebbing . I now need to get this working for an iframe (dont ask).

It's basically a wisiwig editor that uses an iframe.

I've coded up the test environment on jsfiddle .

Code is as follows:

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";
};

I really hope someone can help me out... Thanks

Answer 1

You need to use the iframe's document object to create the TextRanges you use:

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