欢迎各位兄弟 发布技术文章
这里的技术是共享的
复制图片只有两种方式,一种是直接将图片上传到服务器,另一种是转成二进制流base64码
目前限制chrome浏览器使用
首先um-editor,比如:
打开umeditor的二进制流。 js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉代码。
添加以下代码:
//判断剪贴板内容是否包含文本
//首先解释一下为什么要判断文本是否为空
//在 ctrl+c word 中的文字或图片会返回 1 种 (image/png) 或者 4 种类型(text/plain,text/html,text/rtf,image/png) 类型的对象
//为了兼容 4 两种格式的情况,做了如下判断
//以下代码:e.originalEvent.clipboardData.items 获取剪贴板的内容
//粘贴文字后文字不为空,还返回当前文字的图片类型
//如果有文字,不做任何处理,如果只粘贴图片,文字必须为空,包括复制的桌面图片或截图
var text = e.originalEvent.clipboardData.getData("text");
如果(文字==“”){
var items=e.originalEvent.clipboardData.items;
for (var i = 0, len = items.length; i < len; i++) {
var item = items[i];
if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {
var blob = item.getAsFile();
getBase64(blob,函数(base64){
//sendAndInsertImage(base64,me); 上传到服务器
setBase64Image(base64,me);
});
//屏蔽默认事件,避免重复添加;
e.originalEvent.preventDefault();
};
}
}
两种方法:
//执行插入图片的操作
函数 setBase64Image(base64,editor){
editor.execCommand('insertimage', {src: base64,_src: base64});
}
//获取base64
函数getBase64(blob,回调){
var a = new FileReader();
a.onload = function(e) {callback(e.target.result);};
a.readAsDataURL(blob);
};
效果展示:
详细请参考这篇文章:http: //blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a %e4%bc%a0/
版权声明
本文为[webuploader1]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/07/20210708154602289y.html
来自 https://chowdera.com/2021/07/20210727122848087D.html