IE issue - Inserting html in an editable frame

Question

I am trying out some basic WYSIWYG like features on my jsfiddle here - http://jsfiddle.net/Q6Jp9/28/

For now, all I am trying to do is take the user input from the "Markup" box and insert it into the "Visual" box when the Visual button is clicked. The Visual box is an editable iframe.

My jsfiddle example works fine on Firefox and Chrome browsers. On IE9 and IE10, the text appears on the 2nd try. The first time I click on Visual button after typing some text in Markup box, the iframe becomes editable but there is no text. If I click on Markup and then Visual again, I see the text there.

Here is the javascript portion of the fiddle.

function iframe_load() {
var txtBox = $("#txtMarkup");
var iframe = document.getElementById('iframe');
var contentWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
$(iframe).show();
$("#btnVisual").removeClass("notSelected").addClass("selected");
$("#btnMarkup").removeClass("selected").addClass("notSelected");

if (document.all) { //IE  
    contentWindow.document.designMode = 'On';        
    var range = contentWindow.document.body.createTextRange();
    range.pasteHTML($(txtBox).val());
    range.collapse(false);
    range.select();
    contentWindow.focus();
} else {
    contentWindow.document.designMode = 'On';
    contentWindow.document.execCommand('selectAll', null, null); //Required to prevent appending
    try { //This throws an error in FireFox, but command is successful
        contentWindow.document.execCommand('insertHtml', false, $(txtBox).val());
    } catch (ex) {}
    contentWindow.focus();
}
return false;
}

function iframe_hide() {
var txtBox = $("#txtMarkup");
var iframe = document.getElementById('iframe');

$(txtBox).show();
$(iframe).hide();
$("#btnMarkup").removeClass("notSelected").addClass("selected");
$("#btnVisual").removeClass("selected").addClass("notSelected");

return false;
}

Thanks in advance!

Answer 1

I would guess the problem is that you may need to wait a brief time after showing the iframe and making it editable. This seems to work:

Demo: http://jsfiddle.net/Q6Jp9/35/

Code:

function iframe_load() {
    var txtBox = $("#txtMarkup");
    var iframe = document.getElementById('iframe');
    var contentWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
    $(iframe).show();
    $("#btnVisual").removeClass("notSelected").addClass("selected");
    $("#btnMarkup").removeClass("selected").addClass("notSelected");

    contentWindow.document.designMode = 'on';

    window.setTimeout(function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        if (doc.body.createTextRange) {
            var range = doc.body.createTextRange();
            range.pasteHTML(txtBox.val());
            range.collapse(false);
            range.select();
            contentWindow.focus();
        } else {
            doc.execCommand('selectAll', null, null); //Required to prevent appending
            doc.execCommand('insertHtml', false, txtBox.val());
        }
        contentWindow.focus();
    }, 20);

    return false;
}