动易CMS 复制word里面带图文的文章,图片可以直接显示

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


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

 

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

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

https://ueditor.baidu.com/website/umeditor.html(有兴趣可以试试)

 

 

难道就这么失败了?

,但是我意外发现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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 概述 对于大多数用户来说,将Word中的图片上传到Web服务器来说是一件非常不方便的事情,许多情况下用户甚至需要手动将一张张图片上传到Web服务器中,这些重复操作将会浪费用户的许多时间。 现在新颖网络发布了Word图片上传控件,借助于这个控件可以帮助用户解决一张张上传Word图片的问题。特别是对于一些网站编辑人员来说,这个功能可以极大的提高他们的工作效率,减少重复工作。 新颖网络Word图片粘贴上传控件能够帮助用户将Word中的图片全部自动上传到Web服务器中。特别是当Word文档中的图片非常多时,这个功能能够极大的提高工作效果。在上传Word图片时控件不会破坏Word文档格式。不仅如此,新颖网络Word图片上传控件还可以自动上传剪帖板中图片,电脑硬盘中的图片。 对于开发人员来讲,新颖网络Word图片上传控件能够非常容易的整合到OA,新闻网站,博客或者其它WEB应用程序中,并为用户来前所未有的体验。 2. 集成到现有系统中 2.1. 集成到系统中-FCKEditor2.x 说明:此教程适用于没有包含FCKEditor2.x编辑器的项目。 主要步骤: 1.上传文件 2.修改cab文件下载地址,修改classid号。 3.修改页面上传地址 1.上传文件 根据项目类型上传相应的文件夹:acsp,asp.net,jsp,php asp.net //请根据项目类型上传相应的文件夹,如果是PHP项目则上传php文件夹 ckeditor css js upload.gif WordPaster.cab 注意: 请不要解压WordPaster.cab,将完整的WordPaster.cab文件上传到服务器中,IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。 2.修改cab文件下载地址,修改classid号 打开js\ImagePaster.js。下面的代码标识了控件位置和版本号: function SetupWordPaster() { var acx = '<div style="display: none;">'; //图片粘贴上传控件 acx += ' <object id="Paster" classid="clsid:DC4A6931-3570-44b4-842D-C13EE637BBC1"'; acx += ' codebase="http://www.ncmem.com/products/word-imagepaster/WordPaster.cab#version=1,2,4,45165"'; acx += ' width="1" height="1" ></object>'; //Word图片上传控件 acx += ' <object id="Uploader" classid="clsid:26CFEDE7-789D-4077-B49D-C7F1D7150B93"'; acx += ' codebase="http://www.ncmem.com/products/word-imagepaster/WordPaster.cab#version=1,2,4,45165"'; acx += ' width="1" height="1" ></object>'; acx += '</div>'; //添加图片上传信息层 acx += '<div id="PasterMessager">'; acx += '<img alt="进度图标" src="../upload.gif" /><span>图片上传中...</span><span>10%</span></div>'; document.write(acx); } 注意: 当控件升级(版本号修改)或CAB文件位置改变,必须修改ImagePaster.js中的代码。否则用户的IE浏览器将无法正常加载控件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值