图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码

目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统。没有办法在网上搜了很多资料终于找到一个产品:WordPaster。

浏览器方面能够支持ie6,ie7,ie8,ie9,ie10,chrome,firefox,edge几乎所有的浏览器。

编辑器基本上也是全部都支持,并且支持vue,整合也比较简单。

首先以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);

};

wordpaster与umeditor的整合教程

1.添加按钮样式

样式代码

.edui-icon-wordpaster{width: 16px;height: 16px;background: url('../../../../wordpaster/css/paster.png') no-repeat !important;}

2.在工具栏中添加按钮

3.复制wordpaster目录到项目中

4.在页面中注册按钮

在页面中添加引用

<linkhref="umeditor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">

<scripttype="text/javascript" src="umeditor/third-party/jquery.min.js" charset="utf-8"></script>

<scripttype="text/javascript" src="umeditor/umeditor.config.js" ></script>

<scripttype="text/javascript" src="umeditor/umeditor.min.js" ></script>

<linktype="text/css" rel="Stylesheet" href="wordpaster/css/WordPaster.css"/>

<linktype="text/css" rel="Stylesheet" href="wordpaster/js/skygqbox.css" />

<scripttype="text/javascript" src="wordpaster/js/json2.min.js" charset="utf-8"></script>

<scripttype="text/javascript" src="wordpaster/js/w.edge.js" charset="utf-8"></script>

<scripttype="text/javascript" src="wordpaster/js/w.app.js" charset="utf-8"></script>

<scripttype="text/javascript" src="wordpaster/js/w.file.js" charset="utf-8"></script>

<scripttype="text/javascript" src="wordpaster/js/WordPaster.js" charset="utf-8"></script>

<scripttype="text/javascript" src="wordpaster/js/skygqbox.js" charset="utf-8"></script>

在JS中注册插件

代码

<scripttype="text/javascript">

var pasterMgr = new WordPasterManager();

pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1x/upload.jsp"

pasterMgr.Config["Cookie"] = '<%=clientCookie%>';

pasterMgr.Load();//加载控件

UM.registerUI('wordpaster',

function(name) {

var me = this;

var $btn = $.eduibutton({

icon : name,

click : function(){

pasterMgr.Paste();

},

title: '粘贴Word图片'

});

this.addListener('ready',function(){

pasterMgr.SetEditor(this);

});

return $btn;

}

);

UM.getEditor('editor');

</script>

整合后的效果

参考:http://blog.ncmem.com/wordpress/2019/08/12/ueditor%E6%89%B9%E9%87%8F%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/

ueditor实现ctrl+v粘贴word图片并上传的更多相关文章

  1. wangEditor实现ctrl+v粘贴word图片并上传

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  2. umeditor实现ctrl+v粘贴word图片并上传

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

  3. kindeditor实现ctrl+v粘贴word图片并上传

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

  4. xhEditor实现ctrl+v粘贴word图片并上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  5. ckeditor实现ctrl+v粘贴word图片并上传

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

  6. tinymce实现ctrl+v粘贴word图片并上传

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

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

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  8. ueditor+复制word+图片不能上传

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

  9. ckeditor粘贴word图片自动上传功能

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

随机推荐

  1. css权重计算方法浅谈

    在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...

  2. python 线程之threading(五)

    在学习了Event和Condition两个线程同步工具之后还有一个我认为比较鸡肋的工具 semaphores 1. 使用semaphores的使用效果和Condition的notify方法的效果基本相 ...

  3. 通过rinetd实现端口转发来访问内网的服务

    通过rinetd实现端口转发来访问内网的服务 一.   问题描述 通过外网来访问内网的服务 二.   环境要求 需要有一台能够外网访问的机器做端口映射,通过数据包转发来实现外部访问阿里云的内网服务 三 ...

  4. 如何让dapper支持oracle游标呢?

    Dapper是一个轻型的ORM类.它有啥优点.缺点相信很多朋友都知道了,园里也有很多朋友都有相关介绍,这里就不多废话. 如果玩过Oracle都知道,存储过程基本都是通过游标返回数据的,但是dapper ...

  5. 找到链表的倒数第K位

    #include<iostream> using namespace std; class node{ public: node():value(),next(NULL){} ~node( ...

  6. jqGrid整合篇

    jqgrid实现多级表头 //使用setGroupHeaders参数: $( "#datagrid" ).jqGrid( 'setGroupHeaders' , { useColS ...

  7. 开源智能英文单词提取翻译工具(C#)

    WordsTool 这个工具用于分析文本文件中所有的英语单词 并且通过内置字典数据库工具对这些单词进行解析 可以生成表格形式 并且支持导出到excel文件中 用于学习单词 本代码禁止商业用途 如需要商 ...

  8. Justoj 2388最短区间 贪心

    2388: 最短区间 Time Limit: 1 s      Memory Limit: 128 MB Submit My Status Problem Description 有M种不同颜色的气球 ...

  9. 初识GetMapping(&quot;&quot;),使用方法

    GetMapping("value = /SF/{x_num}")与GetMapping("/SF/{x_num}")通过POSTMAN获得的值一样. 注意:G ...

  10. 如何修改Windows上某块网卡的MTU的值

    先用如下命令查看所有的网卡以及他们的MTU的值. netsh interface ipv4 show interfaces 使用如下的命令修改他们的MTU为9000.        netsh int ...