在IE中编辑Iframe内容-维护文本选择的问题

Editing Iframe Content in IE - problem in maintaining text selection

本文关键字：文本 维护 选择 问题 内容 IE 编辑 Iframe      更新时间：2023-09-26

如果可能的话，谁能指导我正确的方法?我实际上是试图使一个文本编辑器使用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之类的地方，那就太好了，这样我们就可以直接解决这个问题了

相关文章：