解决从光标处插入图片光标消失的问题

最近在做一个富文本编辑器，当鼠标单击事件发生在编辑区域外以后，光标就会消失，那么execCommand()方法就不能在编辑器处执行。

此时需要记录下光标消失的位置，一下几篇博文帮助非常大，记录下，以便后续学习使用。

1. TheViper，说的很详细

 

http://www.cnblogs.com/TheViper/p/4303158.html

 

2.这块说的一幕了然  http://w3cboy.com/post/2015/06/iframe-insert-picture-cursor/

 

以上代码主要还是参考了 这位大神的东西  wangEditor

 

第二个源码：

iframe从光标处插入图片
最近改了一个很久之前的编辑器的bug：ie浏览器不能在光标处插入图片，记录在此。

编辑器很古老，代码混乱，是通过开启iframe的document.designMode='on'来实现编辑的。

首先需要在iframe加载之后开启designMode，后监听mouseup和keyup事件来记录光标位置(切记要在designMode开启之后监听，不然ie上面是监听不到的)

var addEvent = (function(){
    if(document.addEventListener){
        return function(type, el, fn){
            el.addEventListener(type, fn, false);
        }
    }else if(document.attachEvent){
        return function(type, el, fn){
            el.attachEvent('on' + type, fn);
        }
    }else{
        return function(type, el, fn) {
            el['on' + type] = fn;
        }
    }
})();

var iframeNode = window.frames['editIframe'];

addEvent(iframeNode, 'load', function(){
    var iframeDoc = iframeNode.contentDocument || iframeNode.document;

    iframeDoc.designMode='on';

    addEvent(iframeDoc, 'mouseup', function(){
        saveSelection();
    });
    addEvent(iframeDoc, 'keyup', function(){
        saveSelection();
    });

    //获取和记录光标
    var currentRange, supportRange = typeof document.createRange === 'function';

    function getCurrentRange() {
        var selection, range;
        if(supportRange){
            selection = iframeDoc.getSelection();
            if (selection.getRangeAt && selection.rangeCount) {
                range = iframeDoc.getSelection().getRangeAt(0);
            }
        }else{
            range = iframeDoc.selection.createRange();
        }
        return range;
    }

    function saveSelection() {
        currentRange = getCurrentRange();
    }

    function restoreSelection() {
        if(!currentRange){
            return;
        }
        var selection, range;
        iframeDoc.body.focus();
        if(supportRange){
            selection = iframeDoc.getSelection();
            selection.removeAllRanges();
            selection.addRange(currentRange);
        }else{
            currentRange.select();
        }
    }

    //插入图片
    function insertImg(html){
        restoreSelection();
        iframeDoc.execCommand('insertImage', false, html);
        saveSelection();
    }

});

　　

转载于:https://www.cnblogs.com/chenshuo/p/4574313.html