jquery - IE の問題 - 編集可能なフレームに html を挿入する

Question

ここで、jsfiddle の基本的な WYSIWYG のような機能をいくつか試しています - http://jsfiddle.net/Q6Jp9/28/

今のところ、私がやろうとしているのは、[マークアップ] ボックスからユーザー入力を取得し、[ビジュアル] ボタンをクリックしたときにそれを [ビジュアル] ボックスに挿入することだけです。ビジュアル ボックスは編集可能な iframe です。

私の jsfiddle の例は、Firefox および Chrome ブラウザーで正常に動作します。IE9 および IE10 では、テキストは 2 回目の試行で表示されます。マークアップボックスにテキストを入力した後、初めてビジュアルボタンをクリックすると、iframe は編集可能になりますが、テキストはありません。[マークアップ] をクリックしてから [ビジュアル] をもう一度クリックすると、そこにテキストが表示されます。

これは、フィドルの JavaScript 部分です。

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

前もって感謝します！