ueditor百度编辑器destoon的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百度编辑器destoon的word图片转存功能的更多相关文章
- 织梦替换ueditor百度编辑器,支持图片水印 教程
1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...
- UEditor百度编辑器,工具栏上自定义添加一个普通按钮
添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...
- UEditor百度编辑器,工具栏自定义添加一个普通按钮
根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...
- Ueditor Word图片转存交互
三.Word图片转存交互 1.图片转存原理 所谓word图片转存,是指UEditor为了解决用户从word中复制了一篇图文混排的文章粘贴到编辑器之后,word文章中的图片数据无法显示在编辑器中,也无法 ...
- ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义
百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...
- ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传
第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...
- Ueditor百度编辑器插件的安装
目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...
- ueditor实现ctrl+v粘贴word图片并上传
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...
- [UEditor]百度编辑器配置总结
前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...
随机推荐
- pandas之分组计算笔记
分组计算三部曲:拆分-->应用-->合并 分组:就是按照行或列把相同索引的部分分到一起 分组的关键词为groupby,分组后我们就可以对每组数据进行同一操作,返回的是每组数据分别计算后的结 ...
- mac OS 安装qt环境
先安装xcode,然后从官网下载dmg安装包安装即可,这里主要出现一个问题就是创建的工程没法编译,提示没有构建包(kit) 要安装command line tool才行. 在命令行中输入: xcode ...
- 2019杭电多校二 F. Fantastic Magic Cube (FWT)
大意: 给定$N^3$立方体, 每个单位立方体权值为三个坐标异或, 每次沿坐标轴切一刀, 得分为两半内权值和的乘积, 求切成$n^3$块的最大得分. 可以发现得分与切法无关, 假设每个点权值为$a_i ...
- (二)手动配置第一个HelloWorld程序
上例的HelloWorld是由Android sutudio 自动生成的,现在我们手动来配置. 1. 重新创建工程 2. 创建空的Activity 生成的MainActivity.java 文件: p ...
- 奇妙的算法【6】-WY回文、树、最优化、卷积判断
1,判断一个十进制正整数的二进制数是否为回文 package com.cnblogs.mufasa.answer1; import java.util.Scanner; public class Ma ...
- js中WebSocket
一.概念 WebSocket的定义 WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题.浏览器和服务器只需完成一次握手,两者之间就可以 ...
- Linux Centos7配置ftp服务器
一.安装 1.安装 yum install -y vsftpd 2.设置开机启动 systemctl enable vsftpd.service 3.启动 systemctl start vsftp ...
- 使用百度echarts仿雪球分时图(一)
第一次写技术博客,有不足的地方希望大家指证出来,我再加以改正,谢谢大家. 之前一直没有找到一个合适的分时图项目,所以决定自己动手撸一个.接触的图表框架不多,在网上看到不少人推荐使用echarts,看了 ...
- 你所不知道的 Console
1.凡人视角 打印字符串 代码: console.log("I am a 凡人"); 打印提示消息 代码: console.info("Yes, you arm a 凡人 ...
- stm32F1 DMA
DMA,全称是Direct Memory Access,中文意思为直接存储器访问 DMA可用于实现外设与存储器之间或者存储器与存储器之间数据传输的高效性 DMA请求映像 各通道的DMA1请求: 各通道 ...