前端实现文本框在光标后插入图片

为解决这个问题，我们需要先整理一下步骤：

1、从剪贴板中读出图片

2、将图片转为base64编码

3、将图片存入光标的位置

 

1、（1）我们可以通过设置div监听paste事件

                document.querySelector('#editDiv').addEventListener('paste',function(e){...})

             当触发paste事件时，在Chrome环境下，我们可以通过

                                     var cbd = e.clipboardData;

              获得剪贴板的数据。

      （2）我们通过判断获得的数据类型确定img

                                     cbd.items[i].kind=='file'||'string'

               img的类型是‘file’，然后我们可以通过getAsFile方法

                                     var blob = item.getAsFile();

                得到图片文件

2、（1）新建一个文件读取对象

                                     var reader = new FileReader();

                这样我们就可以通过该对象的readAsDataURL方法

                                     reader.readAsDataURL(blob);

                获得当前blob（File）对象的base64编码

        （2）根据base64编码，我们可以生成一个img标签

                                      

3、（1）获得光标位置，生成range操作范围

                              var selection= window.getSelection                               
                              var range= selection.createRange 

        （2）根据img字符串声称对应的html标签，并将它放入range中

                              var hasR = range.createContextualFragment(str);
                              range.insertNode(hasR);

         （3）将新建的range放入光标后面

                              selection.addRange(range)

部分代码：

document.querySelector('#editDiv').addEventListener('paste',function(e){
                var cbd = e.clipboardData;
                var ua = window.navigator.userAgent;
                // 如果是 Safari 直接 return
                if ( !(e.clipboardData && e.clipboardData.items) ) {
                    return ;
                }
                // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
                if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
                    cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
                    ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
                    return;
                }
                for(var i = 0; i < cbd.items.length; i++) {
                    var item = cbd.items[i];
                    if(item.kind == "file"){
                        var blob = item.getAsFile();
                        if (blob.size === 0) {
                            return;
                        }

                        /*-----------------------不与后台进行交互 直接预览start-----------------------*/
                        var reader = new FileReader();
                        var imgs = new Image();
                        imgs.file = blob;
                        var img;
                        reader.onload = (function(aImg) {
                          return function(e) {
                            aImg.src = e.target.result;
                            img="<img src='"+aImg.src+"'>";
                            _insertimg(img)
                          };
                        })(imgs);
                        reader.readAsDataURL(blob);
                        /*-----------------------不与后台进行交互 直接预览end-----------------------*/
                    }
                }
            }, false);

//锁定编辑器中鼠标光标位置。。
    function _insertimg(str){
        var selection= window.getSelection ? window.getSelection() : document.selection;
        var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
        if (!window.getSelection){
            document.getElementById('editDiv').focus();
            var selection= window.getSelection ? window.getSelection() : document.selection;
            var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
        }else{
        document.getElementById('editDiv').focus();
        range.collapse(false);
        var hasR = range.createContextualFragment(str);
        var hasR_lastChild = hasR.lastChild;
        while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
        var e = hasR_lastChild;
        hasR_lastChild = hasR_lastChild.previousSibling;
        hasR.removeChild(e)
        }
        range.insertNode(hasR);
        if (hasR_lastChild) {
        range.setEndAfter(hasR_lastChild);
        range.setStartAfter(hasR_lastChild)
        }
        selection.removeAllRanges();
        selection.addRange(range)
        }
    }