Java KindEditor粘贴图片自动上传到服务器功能实现
作者：松鼠 发布时间：2023-08-07 01:42:33
标签：KindEditor,粘贴,上传,服务器
图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的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);
};
效果展示：
更多详细资料可以参考这篇文章：
示例下载：
wordpaster-vue3-cli-ueditor1.5，
来源：https://www.cnblogs.com/songsu/p/17306639.html
0
投稿猜你喜欢
众所周知，android里面我们很熟悉的一个功能，侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架，自从谷歌官方新出的- 首先来看一下工具StringUtils的判断方法：一种是org.apache.commons.lang3包下的；另一种是org.spring
- 本文实例为大家分享了C++实现大整数乘法的具体代码，供大家参考，具体内容如下#include<iostream>#include
- 因公司业务需要，需要将原有的ERP系统加上支持繁体语言，但不能改变原有的编码方式，即：普通程序员感受不到编码有什么不同。经过我与几个同事的多
- .sln：解决方案文件，为解决方案资源管理器提供显示管理文件的图形接口所需的信息。.csproj:项目文件，创建应用程序所需的引用、数据连接
- 说明本文主要配置Jackson对Long、Date、LocalDate、LocalDateTime的序列化和反序列化。由于js中整数可精确表
- 这几天在上海出差，忙里偷闲学习了一下Apk的反编译工具的基本使用。下面就简单介绍一下如何将我们从网上下载的Apk文件进行反编译得到我们想要获
- 前言本文，将介绍如何通过Java后端程序代码在PDF中创建工具提示。添加工具提示后，当鼠标悬停在页面上的元素时，将显示工具提示内容。导入ja
- 需求描述 今日需求是删除资源时同时删除与该资源绑定的角色数据,有两张表,资源表、
- 编译常见问题在开发过程中，有碰到过一些由于编译优化导致的代码修改并不符合我们预期的情况。这也就是之前为什么我经常说编译产物其实是不太可以被信
- OOP语言的三大特征即：面向对象的三个比较重要的思想封装官话：将数据和操作数据的方法进行有机结合，隐藏对象的属性和实现细节，仅对外公开接口进
- 一、快速生成main输入psvm二、快速生成System.out.print使用sout三、文件保存IDEA是自动保存的，不需要我们去Ctr
- 具体代码如下所示：import java.io.File;public class Scan { public static v
- global 是 C# 2.0 中新增的关键字，理论上说，如果代码写得好的话，根本不需要用到它。假设你现在写了一个类，名字叫 System。
- 前言：前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解（一） ，Android自定义控件之自定义属性（二） ，Androi
- 本系列代码地址：https://github.com/JoJoTec/spring-cloud-parentOpenFeign 的由来和实现
- 本文实例总结了C#实现启用与禁用本地网络的方式。分享给大家供大家参考，具体如下：1） 使用Hnetcfg.dll使用Add Referenc
- 对JVM运行参数进行修改是JVM性能调优的重要手段，下面介绍在应用程序开发过程中JVM参数设置的几种方式。方式一java程序运行时指定 -D
- 本文实例讲述了java实现的冒泡排序算法。分享给大家供大家参考，具体如下：public class PaoPaixu { pub
- 本文实例讲述了android编程实现添加文本内容到sqlite表中的方法。分享给大家供大家参考，具体如下：第一步： 创建表CREATE TA
