图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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/10/19/%e5%85%b3%e4%ba%8e%e5%af%8c%e6%96%87%e6%9c%ac%e5%a4%8d%e5%88%b6word%e9%87%8c%e9%9d%a2%e6%8e%ba%e6%9d%82%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e7%9a%84%e9%97%ae%e9%a2%98/

关于富文本复制word,里面掺杂图片上传的问题的更多相关文章

  1. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  2. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  3. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  4. wangEditor - 轻量级web富文本编辑器(可带图片上传)

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  5. summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

  6. 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

  7. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

  8. vue-quill-editor富文本编辑器,上传图片自定义为借口上传

    vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194

  9. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

随机推荐

  1. fatal: repository 'xxxx' not found

    环境:centOS7  背景:公司代码仓库迁移,因而配置的jenkins自动打包git地址也要跟着变化. 问题描述:git clone http xxxx.git后报错: fatal: reposit ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_03-常用API第二部分_第6节 基本类型包装类_1_包装类的概念

    只有这两个比较特殊

  3. 操作excel--xlwt/xlrd/xlutils模块

    一.写Excel (导入xlwt模块)需求:只要你传入一个表名,就能把所有的数据导入出来写入excel,字段名是excel的表头分析: 1.要动态获取到表的字段 cur.description能获取到 ...

  4. KETTLE——(一)资源库

    对KETTLE有了大概的了解,pdi-ce-6.0.1.0-386也下载完成了. 1.解压pdi-ce-6.0.1.0-386.zip文件,双击运行Spoon.bat(KETTLE是Java开发的,运 ...

  5. lua 转换16进制字符串为10进制数值

    lua 转换16进制字符串为10进制数值 > print(tonumber()) 利用tonumber函数,“16”表示“03FFACB”为16进制数.

  6. IIS下如何配置免费的https

    1.首先我们要取走我们的证书,保存在我们本地的电脑里,然后复制到服务器即可. 2.取走后接下来干嘛?当然是打开文件看看里面有些什么啊.我们找到IIS那个压缩包并解压. 3.解析得到pfx文件,也就是我 ...

  7. PyTorch笔记之 Dataset 和 Dataloader

    一.简介 在 PyTorch 中,我们的数据集往往会用一个类去表示,在训练时用 Dataloader 产生一个 batch 的数据 https://pytorch.org/tutorials/begi ...

  8. [19/05/25-星期六] JavaScript_ 基础知识和基本语法_数据类型

    一.概念 诞生于1995年,刚开始主要用于处理网页中的前端验证(指的是检查用户输入的内容是否符合一定的规则,比如用户名的长度.密码的长度.邮箱格式等). 前身是网景公司的LiveScript语言,傍的 ...

  9. [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping, 对象关系映射)

    一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...

  10. JavaWeb servlet,乱码的原因和解决

    请求为什么会有乱码? 答:当表单提交时,浏览器对中文参数值进行编码(使用打开表单所在的页面时的字符集进行编码,web服务器在默认情况下会使用iso-8859-1去解码,编码和解码方式不一致,就会产生乱 ...