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

0

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

На данный момент все, что я пытаюсь сделать, это взять пользовательский ввод из поля "Разметка" и вставить его в поле "Визуальный" при нажатии кнопки "Визуализация". Окно Visual - это изменяемый iframe.

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

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

Теги:
internet-explorer
wysiwyg

1 ответ

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;
}
  • 0
    Никогда не думал об этом! Большое спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню