本文代碼參考了禪道開(kāi)源代碼內(nèi)容

需求

使用wangEditor粘貼excel數(shù)據(jù)時(shí)，如果數(shù)據(jù)中沒(méi)有圖片，一切正常。但是當(dāng)excel中帶有本地圖片的數(shù)據(jù)時(shí)，由于js沒(méi)有讀取本地磁盤(pán)的權(quán)限而顯示圖片失敗，同時(shí)也不可能把本地圖片地址上傳到服務(wù)器。

分析

wangEditor應(yīng)該取的是剪切板中html格式數(shù)據(jù)，這并不是我們想要的。根據(jù)產(chǎn)品提醒，禪道的富文本能夠粘貼excel數(shù)據(jù)帶圖片。通過(guò)調(diào)試器分析，得知禪道取剪切板中有圖片格式數(shù)據(jù)，轉(zhuǎn)為base64上傳到服務(wù)器后，使用img引用圖片。

代碼

//以下為禪道16開(kāi)源版代碼，小編為其編寫(xiě)注釋
//使用了JQeury事件
  $(doc.body).on('paste.ke' + uuid, function(ev) {  //監(jiān)聽(tīng)粘貼事件
            if (K.WEBKIT) { //chrome瀏覽器兼容
                /* Paste in chrome.*/
                /* Code reference from http://www.foliotek.com/devblog/copy-images-from-clipboard-in-javascript/. */
                var original = ev.originalEvent;   //獲取原生事件
                var clipboardItems = original.clipboardData && original.clipboardData.items;  //獲取剪切板數(shù)據(jù)格式數(shù)組
                var clipboardItem = null;
                if(clipboardItems) {
                    var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;   //匹配圖片type的正則
                    for (var i = 0; i < clipboardItems.length; i++)   //遍歷數(shù)據(jù)格式數(shù)組，并找到圖片格式
                    {
                        if (IMAGE_MIME_REGEX.test(clipboardItems[i].type))
                        {
                            clipboardItem = clipboardItems[i];
                            break;
                        }
                    }
                }
                var file = clipboardItem && clipboardItem.getAsFile(); //如果圖片格式存在，則獲取圖片文件
                if (!file) return;
                original.preventDefault();
                pasteBegin();   //禪道實(shí)現(xiàn)的方法，提示用戶，正在上傳圖片

                //讀取圖片文件，將文件轉(zhuǎn)為base64編碼
                var reader = new FileReader();
                reader.onload = function(evt) {
                    var result = evt.target.result;
                    // var arr    = result.split(",");
                    // var data   = arr[1]; // raw base64
                    // var contentType = arr[0].split(";")[0].split(":")[1];

                    //將base64編碼的圖片上傳至服務(wù)器
                    var html = '<img src="' + result + '" alt="" />';
                    $.post(pasteUrl, {editor: html}, function(data)  
                    {
                        self.undo();
                        self._redoStack.pop();
                        if (data) {
                            var $img = $(data);
                            edit.cmd.insertimage($img.attr('src'), $img.attr('title'), $img.attr('width'), $img.attr('height'));
                        } else {
                            edit.cmd.insertimage(result);
                        }
                        pasteEnd();
                    }).error(function()
                    {
                        pasteEnd(true);
                    });
                };
                reader.readAsDataURL(file);
            } else {
                /* Paste in firefox and other browsers. */
                setTimeout(function() {
                    var html = K(doc.body).html();
                    if(html.search(/<img src="data:.+;base64,/) > -1) {
                        pasteBegin();
                        $.post(pasteUrl, {editor: html}, function(data) {
                            if(data.indexOf('<img') === 0) data = '<p>' + data + '</p>';
                            self.undo();
                            self._redoStack.pop();
                            edit.html(data);
                            pasteEnd();
                        }).error(function()
                        {
                            pasteEnd(true);
                        });
                    }
                }, 80);
            }
        });