在IE中编辑iframe内容 - 维护文本选择的问题 [英] Editing Iframe Content in IE - problem in maintaining text selection

问题描述

如果有可能，有人可以指导我正确的方法吗？
我实际上是在尝试使用iframe创建一个带有designMode ='on'的文本编辑器。编辑栏中的按钮由div组成，其中操作由onclick事件触发，然后使用execCommand函数。除了IE之外，我在Firefox和其他浏览器中完成了整个工作。我认为其主要原因是IE无法保持焦点并将范围选择保持在iframe内的文本中。每次单击按钮操作文本时都会发生这种情况。我的问题是，我该如何防止这种情况发生？我相信使用< a href =javascript：functionHere（）>方法可以部分地解决问题，但它仅限于单击命令，如粗体，斜体等，其中没有进一步点击被调用，如点击另一个文本字段来添加链接或图像，这导致主题文本的选择消失。如果你知道，请告诉我。

更新：
我的代码的简化版本可以在这里找到：
http://pastebin.com/XrZ4duCb

您可以复制并测试它。

我现在就试试你的解决方案。感谢您的回复。

更新：
管理以使用不同的方法修复代码。但是，仍然可以观察到一些错误。
点击此处： http://pastebin.com/qP8sYUH7

谢谢。

解决方案

如果你没有改变编辑器框架之间的DOM失去它并重新获得焦点那么以下函数将执行：在编辑器文档失去焦点之前调用 saveSelection（iframeWindow）并且 restoreSelection（iframeWindow，sel）在它重新获得焦点之后。否则，我建议使用我的 Rangy 库的保存/恢复选择模块，它使用隐藏的标记元素。

  var saveSelection，restoreSelection; 
 if（window.getSelection）{
 // IE 9和非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（一世））; 
} 
} 
返回范围; 
}; 
 
 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（）; 
} 
}; 
} 
  

can somebody please guide me the proper way if this is possible? I was actually trying to make a text editor using iframe with designMode='on'. The buttons in the editing bar are made up of divs where the actions are being triggered by an onclick event which then utilize the execCommand function. I made the whole thing work perfectly in Firefox and other browsers except for IE. I figured that the main reason for this is the inability of IE to maintain focus and keep the range selection to the text inside iframe. This happens everytime I click the buttons to manipulate the texts. My question is, how can I prevent this from happening? I believe using the <a href="javascript:functionHere()"> method could partially solve the problem but it is only limited to a single click command like bold, italic, etc. where no further clicking is involed like clicking another text field to add link or image which causes the selection of the subject text to disappear. Please tell me if you know.

Update: A simplified version of my code can be found here: http://pastebin.com/XrZ4duCb

You can copy and test it.

I'll try your solution now. Thanks for the replies.

Update: Managed to fix the codes using different method. However, some bugs can still be observed. Check here: http://pastebin.com/qP8sYUH7

Thanks.

解决方案

If you're not changing the editor frame's DOM between it losing and regaining focus then the following functions will do: call saveSelection(iframeWindow) before the editor document loses focus and restoreSelection(iframeWindow, sel) after it regains focus. Otherwise, I'd suggest using my Rangy library's save/restore selection module, which uses hidden marker elements.

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

这篇关于在IE中编辑iframe内容 - 维护文本选择的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！