我正在我的 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;
}
提前致谢!