kindeditor实现ctrl+v粘贴word图片并上传

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?
Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。

我希望打开Word或者WPS文档后,复制内容然后直接粘贴到富文本编辑器中,编辑器自动将图片批量上传到服务器中,无论文档中有多少张图片,编辑器都全部自动上传,不需要再手动一张张处理。同时能够将图片上传到我指定的接口中,服务器需要将图片单独保存在存储服务器中,比如可能是云存储,或者是分布式存储,最后直接发布内容。

感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。

好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件。

难道就这么失败了?

不,但是我意外发现UMeditor竟然支持粘贴word中的多张图片(仅支持IE11,不支持IE10以下版本、以及Chrome等)

切换HTML,会看到你的图片被组织成base64

nice,机会来了,既然IE支持复制word中的多张图片直接粘贴base64,既然有了base64我们就有办法上传转图片啦!

那么我们来改造Ueditor,让他支持IE11(总比没得用强吧)

打开你的ueditor.all.js(1.4.3版本以下行号根据自己使用的版本可能不同)

1、注释掉14679行(暂时不明确有什么不良影响)

//执行默认的处理

//me.filterInputRule(root);

2、在28725行插入以下代码(如果是使用IE11粘贴会得到base64,先用占位符占位,再逐个把base64专成Blob文件并上传,上传完成再替换为你的img属性src为服务器图片url)

服务端上传代码

处理后的效果,能够批量上传word中所有的图片,真的是太方便了。无论多少张图片都可以一次性批量上传。这个功能真的是太方便了,大幅度提升了内容编辑人员的效率。以前一天只能发布一篇文章,现在能够发布100篇,这效率简直提升了100倍呀。

图片上传后保存在服务器端。而且也可以指定上传接口地址,这个也比较方便。因为我们的业务是将图片保存在单独的云存储服务器中。

3、处理ueditor提供的uploadimage方法

客户已经使用半年,没有问题,非常有用,非常方便的功能

讨论群:223813913

Original: https://www.cnblogs.com/songsu/p/14921482.html
Author: Xproer-松鼠
Title: kindeditor实现ctrl+v粘贴word图片并上传

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/546248/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • es index template

    建一个索引的步骤 1:先创建轮滚策略 2:创建模板 3:创建索引 创建轮滚策略 创建索引模板 根据模板创建索引 创建索引后,如果要观察轮滚效果,可以手动滚动 修改mapping后数…

    技术杂谈 2023年7月10日
    083
  • JavaCV的摄像头实战之三:保存为mp4文件

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是《JavaCV的摄…

    技术杂谈 2023年7月11日
    085
  • Vue的路由使用及参数接受

    作用:让路由组件更方便的收到参数(query、params) { path: ‘message’, component: Message, children: [ { name: …

    技术杂谈 2023年6月21日
    0100
  • Chromium 命名规范

    Chromium 代码中的文件数不胜数,读懂文件名可以帮我们快速定位某个文件的用途。好的文件命名方式应该是自解释的,能够实现 “望文生义” 的效果。不过 C…

    技术杂谈 2023年5月31日
    074
  • 我理解的用户体验

    用户体验是什么? 用起来很爽快。这就是用户体验。 用户体验是一系列的心理学,美学,经验总结而成的一门艺术。 专用名称是UED User Experience Design(用户体验…

    技术杂谈 2023年6月21日
    0107
  • 网卡驱动黄字三步曲

    最近连日下雨,空气湿度很高,某日打开笔记本发现连不上网,不显示可用无线网络。折腾了几天。 大概经历了如下的几步(省流版:跳到第5步): 1、检查驱动更新 连有线网下载了驱动精灵,显…

    技术杂谈 2023年7月11日
    0114
  • 剑指offer计划26(字符串中等)—java

    1.1、题目1 剑指 Offer 20. 表示数值的字符串 1.2、解法 这题表示直接上大佬的题解把。。。。代码太长了。有限状态自动机。对状态机一无所知的我一脸懵 1.3、代码 c…

    技术杂谈 2023年7月25日
    071
  • 技术人的慰藉

    当我屡次不经意地凝视自己的博客时,边栏上的园龄一项总会不揣冒昧地提醒我 —— 某人已躬耕十年。当年万里觅封侯,匹马戍梁州。如今听雨客舟中,江阔云低,断雁叫西风 —— 十年,注定是一…

    技术杂谈 2023年6月1日
    0111
  • Redis缓存相关的几个问题

    1 缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时需要从数据库查询,查不到数据则不写入缓存,这将导致这个不存在的数据每次请求都要到数据库去查询,进而给数据库带来…

    技术杂谈 2023年7月24日
    087
  • 02 Transformer 中 Add&Norm (残差和标准化)代码实现

    python/pytorch 基础 培训机构(Django 类似于 Transformers) 首先由一个 norm 函数 norm 里面做残差,会输入( x 和 淡粉色z1,残差…

    技术杂谈 2023年5月31日
    0119
  • graylog server 模块说明一 入口简单说明

    protected void startCommand() { final AuditEventSender auditEventSender = injector.getInst…

    技术杂谈 2023年5月30日
    078
  • 「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之业务数据增删改查(七)

    基于Vue和Quasar的前端SPA项目实战之业务数据(七) 回顾 通过上一篇文章基于Vue和Quasar的前端SPA项目实战之表关系(六)的介绍,元数据设计功能全部实现了,本文主…

    技术杂谈 2023年7月24日
    092
  • validform学习

    1 说明 validform非常实用,可以用来进行表单验证,是基于jquery框架的,一共就导出两个文件,一个css文件,一个js文件。启动也只需一句js语句即可,相当方便。 可以…

    技术杂谈 2023年7月25日
    087
  • 三行代码实现十进制转二进制

    转载请注明出处。谢谢 同学c++补考。找我帮忙写十进制转二进制的代码,为了让这同学能记住,所以就想写的简单些,然后没想到竟然能这么简单,感觉还不错。 直接上代码: void Dto…

    技术杂谈 2023年5月31日
    090
  • Linux常用操作:文件及文件夹

    一、创建 (1)mkdir 创建一个目录 (2)…

    技术杂谈 2023年7月11日
    070
  • idea tomcat启动后没有编译java文件

    在项目结构artifact处,Available Elements右键项目,选择 Put into Output Root,就会将依赖和classes编译到out目录 需要重启id…

    技术杂谈 2023年7月11日
    092
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球