ueditor粘贴word图片无法显示的问题
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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-word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/
ueditor粘贴word图片无法显示的问题的更多相关文章
- 在word中粘贴的图片为什么显示不完整
一.背景 整理系统测试说明文档,截得图片粘贴到word中显示不完整. 二.错误问题 问题:在word中粘贴的图片为什么显示不完整,如图所示: 三.分析问题: 原因是原来设置的行间距是固定值,图片也作一 ...
- ueditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- umeditor+粘贴word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- kindeditor实现ctrl+v粘贴word图片并上传
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- ueditor+粘贴word
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- 帝国CMS编辑器粘贴Word图片
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- ueditor粘贴word中图片
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- ueditor+复制word图片粘贴上传
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- jsp+UEditor粘贴word
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
随机推荐
- PAT(B) 1021 个位数统计(Java)
题目链接:1021 个位数统计 (15 point(s)) 代码 /** * Score 15 * Run Time 93ms * @author wowpH * @version 1.0 */ im ...
- PHP7有没有你们说的那么牛逼
男人不能快,但程序一定要快.PHP7到底快不快,我们拭目以待. PHP7来一发 PHP7正式发布到现在已经一年半了,刚出道就号称比旧版本快了几倍,各种开源框架或系统运行在PHP7上速度效率提高了几倍, ...
- Mac电脑配置相关及软件工具安装推荐
iTerm2(https://www.iterm2.com/) 终端工具 Alfred(http://xclient.info/s/alfred.html) 快速启动器 WebStorm.VSCode ...
- 基于搜索的贝叶斯网络结构学习算法-K2
基于搜索的贝叶斯网络结构学习算法-K2 2018-04-05 19:34:18 ItsBlue 阅读数 3172更多 分类专栏: 贝叶斯网络 网络结构学习 版权声明:本文为博主原创文章,遵循CC ...
- pycharm使用pylint
# 与能查到的多数博文做法不太一样,自认为这样更简单有效 1. 下载插件 https://plugins.jetbrains.com/plugin/11084-pylint 2. 从磁盘安装插件 注意 ...
- 点标记(lambda表达式+linq查询标记符)与linq语句(查询表达式)
什么是Linq表达式?什么是Lambda表达式? 参照:https://www.cnblogs.com/zhaopei/p/5746414.html
- (四)Spring Boot之配置文件-多环境配置
一.Properties多环境配置 1. application.properties配置激活选项 spring.profiles.active=dev 2.添加其他配置文件 3.结果 applica ...
- 谷歌(google)广告尺寸大小列表
在平时做网页模板时,我们需要计算Google AdSense 的尺寸,以确保它能和页面完美的结合,提高AdSense的点击率,进台后看又很麻烦,下面整理了Google 广告的各种尺寸,跟大家分享一下. ...
- Post请求数据传到后台+号变成了空格
问题: 今天遇到一个问题:页面带有"+"号的数据,传到服务端接口,结果+号变成了空格.例如:传“1+1”变成了"1 1". 解决办法: 方案一: 将“+”号替换 ...
- Kong命令(二)service
service介绍: service 是声明了一组name.host.port.protocol等配置的函数.可以绑定route.upstream上下游服务.并且对于route.upstream可以绑 ...