图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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/

umeditor+粘贴word图片的更多相关文章

  1. ue/um-editor实现word图片复制

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

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

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

  3. 帝国CMS编辑器粘贴Word图片

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

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

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

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

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

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

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

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

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

  8. ckeditor粘贴word图片且图片文件自动上传功能

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

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

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

随机推荐

  1. hammer.js手势库使用

    hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是 ...

  2. iOS常用的几种数据存储方式

    之前由于刚入行不久,对数据持久化不是很了解,尤其是用数据库存储大量数据的操作.经过摸索就在此总结一下,方便以后查阅 下面就简单介绍一下: 1.NSUserDefaults 感觉最常用的小量数据,属性, ...

  3. SQL 去除重复、获取最新记录

    应用中常会有需要去除重复的记录,或者获取某些最新记录(如:每个用户可以答题多次,每次答题时间不同,现在要获取所有用户的最新答题记录,即每个用户取最新的一条) 使用group 和max 即可实现上述功能 ...

  4. UVALive Proving Equivalences (强连通分量,常规)

    题意: 给一个有向图,问添加几条边可以使其强连通. 思路: tarjan算法求强连通分量,然后缩点求各个强连通分量的出入度,答案是max(入度为0的缩点个数,出度为0的缩点个数). #include ...

  5. vs2010中socket链接错误LINK2019

    解决方法参考下面链接: http://blog.163.com/strive_only/blog/static/893801682009225112354746/

  6. 怎样导入现有的NiosII工程

    查找路径

  7. VS Code .vue文件代码缩进以及格式化代码

    首先在应用商店中搜索“Vetur”插件安装,然后进行下面操作: 文件->首选项->设置,然后在右边编辑框输入以下设置: { "prettier.tabWidth": 4 ...

  8. MySQL如何开启慢查询

    一 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能.   二 参数说明 slow_query_log 慢查询开启状态 slo ...

  9. 实现观察者模式(Observer Pattern)的2种方式

    在观察者模式中有2个要素:一个是被观察对象,另一个是观察者.但被观察对象的状态发生改变会通知观察者. 举例:把订阅报纸的人看作是观察者,把报纸看作被观察对象.每当有新的新闻就要通知订阅报纸的人.本篇分 ...

  10. c++Template 的辨析

    1.在c++Template中很多地方都用到了typename与class这两个关键字,而且好像可以替换,是不是这两个关键字完全一样呢? 答:class用于定义类,在模板引入c++后,最初定义模板的方 ...