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

百度UE编辑器从word粘贴公式的更多相关文章

  1. 百度UEditor编辑器从word粘贴公式

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

  2. tinymce编辑器从word粘贴公式

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

  3. 富文本编辑器从word粘贴公式

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

  4. xhEditor编辑器从word粘贴公式

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  5. ckeditor编辑器从word粘贴公式

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

  6. wangEditor编辑器从word粘贴公式

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

  7. ueditor从word粘贴公式

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

  8. vue2.0集成百度UE编辑器,上传图片报错!!!

    我这边配置进去之后,界面加载,文本输入都没有问题,就是上传图片会有问题 这张图, 左边红色框框 就是目录结构咯, 右边红色框框 就是各种网上教程给出的第一个路径配置对吧, 下面的就是绿色 服务器接口配 ...

  9. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

随机推荐

  1. Fabric交易流程

    (内容可能有些乱,请见谅,日后会对格式进行整理!) #### 在1.0及以后的版本中,客户端应用会先向Fabric CA申请用户所需要的Fabric中的准入证书,用于签名提案以及交易,然后由客户端(A ...

  2. 怎样安装ipython

    ipython 是一个python的交互式shell, 比默认的python shell更好用, 支持自动补全 / 上下翻等功能.  下面是按照方法: # 通用安装方法 pip install ipy ...

  3. Python之(scikit-learn)机器学习

    一.机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或 ...

  4. C#简单工厂案例

    using System; namespace Application { class JianDanGongChang { static void Main(string[] args) { Fac ...

  5. npm查看包版本

    点击跳转 ~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0 ^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包 ...

  6. SAP Cloud for Customer的Container应用设计原理

    来自Jerry的同事,Yang Joey. 相信大部分C4C的UI developer包括我刚开始的时候都会比较好奇我们平时写的javascript代码是如何运行在移动设备上的,同样的,我也对这个问题 ...

  7. linux USB 编程

    Linux USB架构 可以看出一个USB体系需要4个驱动:USB设备驱动(主要编写这部分),USB主控制器驱动,Gadget驱动,UDC驱动. USB主要有4个功能: MassStorage:大容量 ...

  8. PHP设置谷歌验证器(Google Authenticator)实现操作二步验证

    使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码.实现Google Authenticator功能需要服务 ...

  9. leetcode-cn上面刷题

    https://leetcode-cn.com/problemset/database/ ------------------------------------------------------- ...

  10. 新闻系统——SQLHelper助手优化

    在前面我们机房重构的时候已经用过了SQLHelper,但当时就是只会应用,知道利用SQLHelper能够帮助我们连接数据库,但对于怎样书写还是不太清楚,今天就揭开这层神秘的面纱,来真正体验如何来编写S ...