IE проблема - вставка HTML в редактируемую рамку

Question

Я опробую некоторые основные функции, подобные WYSIWYG, на моем jsfiddle здесь - http://jsfiddle.net/Q6Jp9/28/

Пока все, что я пытаюсь сделать, это взять пользовательский ввод из поля "Разметка" и вставить его в поле "Визуальный" при нажатии кнопки "Визуальный". Визуальный блок - это редактируемый фрейм.

Мой пример jsfiddle отлично работает в браузерах Firefox и Chrome. На IE9 и IE10 текст появляется со 2-й попытки. Первый раз, когда я нажимаю кнопку Visual после ввода текста в поле "Разметка", 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;
}

Заранее спасибо!

Answer 1

Я предполагаю, что проблема в том, что вам может понадобиться немного подождать после показа iframe и его редактирования. Это похоже на работу:

Демо: http://jsfiddle.net/Q6Jp9/35/

Код:

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