富文本编辑器实现网页图片自动上传

news/2024/5/20 15:47:46 标签: java, 前端, 服务器, 开发语言

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x​


http://www.niftyadmin.cn/n/1207944.html

相关文章

推荐系统 理论笔记 四(机器学习基础—线性回归)

f(x)w1x1w2x2&#xff0c;是三维空间的一条直线。 MSE均方误差&#xff08;平方求和再平均&#xff09;。最小二乘&#xff08;least square mehtod&#xff09;。英文是最小平方的方法。就是求误差平方的最小值问题。 注意&#xff0c;因为是线性回归模型&#xff0c;而且损…

富文本编辑器实现微信公众号内容自动上传

1.4.2之后官方并没有做功能的改动&#xff0c;1.4.2在word复制这块没有bug&#xff0c;其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp&#xff08;前端都一样&#xff0c;后台如果语言不通得自己做 Base64编码解码&#xff09; 因为公司业务需要支持IE8…

Linux脚本和文件操作相关参考资料-资源链接

为什么80%的码农都做不了架构师&#xff1f;>>> 1、Linux里如何查找文件内容 http://blog.chinaunix.net/uid-25266990-id-199887.html 2、linux下的find文件查找命令与grep文件内容查找命令 http://www.cnblogs.com/xudong-bupt/archive/2013/03/23/2976793.html…

富文本编辑器实现pdf自动上传

当前功能基于PHP&#xff0c;其它语言流程大致相同 1.新增上传word json配置 在ueditor\php\config.json中新增如下配置&#xff1a; /* 上传word配置 */ "wordActionName": "wordupload", /* 执行上传视频的action名称 */ "wordFieldName": &q…

jQ实例篇--ajax请求json数据案例

今天有这样一个需求&#xff0c;点击六个大洲&#xff0c;出现对应的一些请求信息&#xff0c;展示在下面&#xff0c;请求请求过后&#xff0c;第二次点击就无需请求。如图所示&#xff1a;点击北美洲下面出现请求的一些数据 html代码结构&#xff1a; <div class"con…

算法通关40讲 笔记十(位运算)

1s为全部都为1的数字。 实战 191. 位1的个数 https://leetcode-cn.com/problems/number-of-1-bits/ 231. 2 的幂 https://leetcode-cn.com/problems/power-of-two/ 比特位计数 https://leetcode-cn.com/problems/counting-bits/

富文本编辑器实现ppt自动上传

ueditor粘贴不能粘贴word中的图片是一个很头疼的问题&#xff0c;在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴&#xff0c;因为这个需求头疼了半个月&#xff0c;因为前端方面因为安全的原因是不允许访问本地文件的。 首先说一下&#xff0c;ueditor粘贴…