图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(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, function( base64 ) {

//sendAndInsertImage(base64,me); 上传到服务器

setBase64Image(base64,me);

});

//阻止默认事件, 避免重复添加;

e.originalEvent.preventDefault();

};

}

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

var a = new FileReader();

a.onload = function(e) {callback(e.target.result);};

a.readAsDataURL(blob);

};

效果展示:

详细内容可参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/ueditor%e5%a4%8d%e5%88%b6word%e5%9b%be%e7%89%87%e7%b2%98%e8%b4%b4%e4%b8%8a%e4%bc%a0-3/

UEditor粘贴word的更多相关文章

  1. ueditor粘贴word中图片

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  2. ueditor+粘贴word

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  3. jsp+UEditor粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  4. php+UEditor粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  5. ueditor粘贴word图片无法显示的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  6. ueditor从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  7. ueditor实现ctrl+v粘贴word图片并上传

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  8. ueditor+复制word图片粘贴上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. ueditor编辑器+粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

随机推荐

  1. c++设计原则:继承与组合

    “优先使用对象组合,而不是继承”是面向对象设计的原则之一. 组合也叫“对象持有”,就是在类中定义另一类型的成员,继承会破坏类的独立性,增加系统的复杂性,一般系统的继承层次不超过3层.组合拥有良好的扩展 ...

  2. goroutine基础

    程序1: package main import ( "fmt" "time" ) func test () { var i int for { fmt.Pri ...

  3. adb链接时报错误10061解决方法

    首先打开开发者选项然后依次操作: 1. 将安卓设备usb连接到电脑 2. 设备链接到wifi 3. Ping设备ip,检查是否可通信 4. 在cmd依次输入以下命令: 5. adb usb 6. ad ...

  4. Angular系列-AngularJs1使用Ace编辑器

    Ace编辑器 Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的. 参考项目地址:https://github.com/ajaxo ...

  5. 夯实基础:彻底搞清楚Cookie 和 Session 关系和区别(转)

    原文地址:http://www.sohu.com/a/281228178_120047080 网络请求中的cookie与set-Cookie的交互模式和作用:https://my.oschina.ne ...

  6. Intellij IDEA集成JProfiler性能分析神器

    环境 JProfiler 17.1.3(IDEA插件) JProfiler 9.2(可执行软件) IntelliJ IDEA 2017.2.5 下载 下载JProfiler(IDEA)插件 方式1: ...

  7. 将自定义dockerfile生成的image推送到仓库中

    本文为以阿里云的案例方法,其他方法未尝试 1.注册阿里云账号 2.设置密码并通过docker登录 3.创建命名空间 4.创建镜像仓库 创建仓库时,需要选择代码源的仓库储存的方式,这里我用的是gitHu ...

  8. HTTP协议探究(五):H2中一些重要的概念

    一 复习与目标 1 复习 简单密码学.对称加密与非对称加密 数字签名.数字证书 SSL/TLS HTTPS = HTTP + SSL/TLS,SSL/TLS为HTTP提供了保密性.完整性和鉴别性 2 ...

  9. 微软发布云端基因服务:推动AI驱动的精准医疗

    微软发布云端基因服务:推动AI驱动的精准医疗 2018年03月07日 00:00:00 微软研究院AI头条 阅读数:117    版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  10. 前端知识总结--css用div画环形圆

    如何用最少的div画最多的环形?如下图所示最少需要多少个div? 暂时想到的利用div的边框.内外阴影及befor和after的伪元素实现 以下代码可以实现上图效果: <style> di ...