IE8中选择和范围功能的更改 [英] Changes to selection and range functionality in IE8

问题描述

我不得不调试在IE8中失败的基于WYSIWYG javascript的HTML编辑器。它仅设计用于IE，因此应简化解决方案。以下是失败的现有代码：

  function isAllowed（）{
 var sel 
 var obj 
 
 sel = foo.document.selection 
 
 if（sel.type！=Control）
 {
 obj = sel.createRange（）。 parentElement（）
} else {
 obj = sel.createRange（）（0）
} 
 
 if（obj.isContentEditable）{
 foo。 focus（）
返回true 
} else {
返回false 
} 
} 
  

基本上发生的事情是，如果您选择一些文本并单击 insert image 按钮，它首先运行此 isAllowed 功能查看您选择的文本是否可编辑（即在iframe内是ContentEditable）。

这似乎在IE8中以 document.selection 或 createRange（）。

问题在于，当您未使用鼠标选择任何文本并单击可编辑区域中的某处时， sel.createRange（）。 parentElement（）似乎返回iframe之外的元素，因此它不是ContentEditable，函数返回 false 。

<我想知道是否有人能够了解IE8实施选择和范围的变化会导致这种行为？

解决方案

好的，答案很简单！它必须通过添加foo.focus（）;来改变IE8将焦点放在iframe上的方式。对于下面的代码，一切都按预期工作。希望这对某人有所帮助，但如果他们的代码在第一时间正确编写则可能不会：）

  function isAllowed（ ）{
 var sel; 
 var obj; 
 
 foo.focus（）; 
 sel = foo.document.selection; 
 
 if（sel.type！=Control）
 {
 var rng = sel.createRange（）; 
 obj = rng.parentElement（）; 
} else {
 obj = sel.createRange（）（0）; 
} 
 
 if（obj.isContentEditable）{
 foo.focus（）; 
返回true; 
} else {
返回false; 
} 
} 
  

I'm having to debug a WYSIWYG javascript based HTML editor that is failing in IE8. It's only designed for use in IE so that should simplify the solution. Here's the existing code that is failing:

function isAllowed() {
    var sel
    var obj

        sel = foo.document.selection

        if (sel.type != "Control")
        {
            obj = sel.createRange().parentElement()
        } else {
            obj = sel.createRange()(0)
        }

        if (obj.isContentEditable) {
            foo.focus()
            return true
        } else {
            return false
        }
}

Essentially what is happening is that if you select some text and click say the insert image button it first runs this isAllowed function to see if the text you've selected is editable (i.e. within the iframe that is ContentEditable).
This seems to be breaking down in IE8 at at either document.selection or createRange().

The problem is that when you don't select any text with your mouse and click somewhere in the editable region, sel.createRange().parentElement() seems to return an element outside of the iframe and it's thus not ContentEditable and the function returns false.

I'm wondering if anyone could shed any insight on to what has changed in IE8's implementation of selections and ranges that would cause this behaviour?

解决方案

Ok, the answer was pretty simple! It must be a change in the way IE8 keeps the focus on the iframe, by adding foo.focus(); to the code below, everything works as expected. Hope this helps someone, but it probably won't if their code was written properly in the first place :)

function isAllowed() {
    var sel;
    var obj;

        foo.focus();
        sel = foo.document.selection;

        if (sel.type != "Control")
        {
            var rng = sel.createRange();
            obj = rng.parentElement();
        } else {
            obj = sel.createRange()(0);
        }

        if (obj.isContentEditable) {
            foo.focus();
            return true;
        } else {
            return false;
        }
}

这篇关于IE8中选择和范围功能的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！