关于IE6--IE8在线编辑器的插入图片焦点问题

在IE浏览器下鼠标指针焦点问题比较常见，一般都是创建个RANGE对象来进行操作。经过几天的查找网上的资料，对于RANGE有一点认识，也解决了项目中的在线编辑插入图片的焦点问题。

   在项目中首先用IE6插入图片的时候，时不时的总是失去鼠标的焦点，经过检查发现在JS中选择图片的过程中，焦点就已经失去，而在此时在往在线编辑中插入图片就会失效。所以想到在JS中设置一个全局变量，当选择插入图片的时候，将光标的焦点信息全部存储到这个对象中，然后再往在线编辑器中插入图片的时候，不是取当前的光标焦点，而是取全局变量中的光标焦点信息，这样一来，在IE6中的在线编辑器的失去焦点问题解决。

var ieRange = false;

function getImage(n) {

    //得到编辑器（如果这里是IFRAME的话，这里取IFRAME的ID）
    var editor= document.getElementByIdx_x_x(n);

    //取得IFRAME下的内容
    var win = editor.contentWindow;

    //光标指定会IFRAME（如果在IE8中不写，图片则无法插入）
    win.focus();

    //取得document对象
    var doc = win.document;

    //选中或光标所在的位置
    var sel = doc.selection;

    if (sel) {

        //创建RANGE对象
        ieRange = sel.createRange();

        //得到光标所在的父一级节点

        var p=ieRange.parentElement();

        //判断是否选择在了编辑器中
        if(p==document.body)ieRange=false;

    }
}

 

function insertImage() {

    //判断是否有RANGE对象

    if (ieRange) {

       //插入图片信息
       ieRange.pasteHTML("XXXXX");
       ieRange = false;
    }

}

简单强调下红字的地方，在IE8中与IE6不同的就是在你取得了这个编辑器的内容的时候，光标不会保留在编辑器中，也就是说，光标会转移到你最后一次操作的地方，所以在IE8需要把光标在指定回编辑器上，这样才能插入图片。