如果可能的话,谁能指导我正确的方法?我实际上是试图使一个文本编辑器使用iframe designMode='on'。编辑栏中的按钮由div组成,其中的操作由onclick事件触发,然后利用execCommand函数。我让整个东西在Firefox和除了IE以外的其他浏览器中完美地运行。我认为主要原因是IE无法保持焦点和范围选择到iframe内的文本。每次我点击按钮操作文本时都会发生这种情况。我的问题是,我怎样才能避免这种情况的发生?我相信使用方法可以部分解决问题,但它只局限于一个单一的点击命令,如粗体,斜体等,没有进一步的点击是像点击另一个文本字段来添加链接或图像,导致主题文本的选择消失。如果你知道,请告诉我。
更新:我的代码的简化版本可以在这里找到:http://pastebin.com/XrZ4duCb
你可以复制并测试它。
我现在试试你的解决方案。谢谢你的回复。更新:设法用不同的方法修复了代码。但是,仍然可以观察到一些错误。查看这里:http://pastebin.com/qP8sYUH7
谢谢。
如果你没有在编辑器框架失去焦点和重新获得焦点之间改变它的DOM,那么下面的函数可以做到:在编辑器文档失去焦点之前调用saveSelection(iframeWindow)
,在它重新获得焦点之后调用restoreSelection(iframeWindow, sel)
。否则,我建议使用Rangy库的保存/恢复选择模块,该模块使用隐藏的标记元素。
var saveSelection, restoreSelection;
if (window.getSelection) {
// IE 9 and non-IE
saveSelection = function(win) {
var sel = win.getSelection(), ranges = [];
if (sel.rangeCount) {
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
ranges.push(sel.getRangeAt(i));
}
}
return ranges;
};
restoreSelection = function(win, savedSelection) {
var sel = win.getSelection();
sel.removeAllRanges();
for (var i = 0, len = savedSelection.length; i < len; ++i) {
sel.addRange(savedSelection[i]);
}
};
} else if (document.selection && document.selection.createRange) {
// IE <= 8
saveSelection = function(win) {
var sel = win.document.selection;
return (sel.type != "None") ? sel.createRange() : null;
};
restoreSelection = function(win, savedSelection) {
if (savedSelection) {
savedSelection.select();
}
};
}
在IE9中,我通过为所有div按钮添加属性unselectable="on"
来解决此问题。
<div onclick="onBold()" unselectable="on">Bold</div>
你的意思是你的按钮在iframe内?如果是,就试着把它们拿出来。
如果没有,您应该尝试这样做:
-
你添加一个和一个元素(不存在,但谁在乎,它会工作)就在前面和后面的范围,这样:
范围。pasteHTML(" + range。
-
然后,你可以用execCommand等来做你的事情。
-
之后,您将通过创建范围来恢复焦点,获取对开始和结束元素的引用,使范围包含其中一个,将范围的另一个端点移动到另一个,选择范围并从DOM和内存中删除开始和结束元素。
我曾经为我的一个项目做过类似的事情,但那是很久以前的事了,所以我可能忘记了一些东西。如果你能把你的代码上传到pastebin之类的地方,那就太好了,这样我们就可以直接解决这个问题了