本文代码参考了禅道开源代码内容

需求

使用wangEditor粘贴excel数据时，如果数据中没有图片，一切正常。但是当excel中带有本地图片的数据时，由于js没有读取本地磁盘的权限而显示图片失败，同时也不可能把本地图片地址上传到服务器。

分析

wangEditor应该取的是剪切板中html格式数据，这并不是我们想要的。根据产品提醒，禅道的富文本能够粘贴excel数据带图片。通过调试器分析，得知禅道取剪切板中有图片格式数据，转为base64上传到服务器后，使用img引用图片。

代码

//以下为禅道16开源版代码，小编为其编写注释
//使用了JQeury事件
  $(doc.body).on('paste.ke' + uuid, function(ev) {  //监听粘贴事件
            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;  //获取剪切板数据格式数组
                var clipboardItem = null;
                if(clipboardItems) {
                    var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;   //匹配图片type的正则
                    for (var i = 0; i < clipboardItems.length; i++)   //遍历数据格式数组，并找到图片格式
                    {
                        if (IMAGE_MIME_REGEX.test(clipboardItems[i].type))
                        {
                            clipboardItem = clipboardItems[i];
                            break;
                        }
                    }
                }
                var file = clipboardItem && clipboardItem.getAsFile(); //如果图片格式存在，则获取图片文件
                if (!file) return;
                original.preventDefault();
                pasteBegin();   //禅道实现的方法，提示用户，正在上传图片

                //读取图片文件，将文件转为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编码的图片上传至服务器
                    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);
            }
        });