0

我正在我的 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;
}

提前致谢！

4

1 回答 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;
}
于 2014-02-26T11:59:31.180 回答