JS获取剪切板内容

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

需求

使用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);
            }
        });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容