首页 > 其他分享 >word文档的图片怎么保存到xhEditor上

word文档的图片怎么保存到xhEditor上

时间:2023-07-03 13:22:12浏览次数:49  
标签:控件 word 编辑 文档 服务器 xhEditor 上传 图片

 Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?

Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是作为内容一起提交给服务器,不能够将图片单独保存在另外一台服务器中。如果需要单独保存则需要自已进行处理。比较麻烦。

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

 

 

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

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

GitHub - fex-team/ueditor: rich text 富文本编辑器(有兴趣可以试试)

 

编辑

 

难道就这么失败了?

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

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

效果展示:

​编辑

​编辑

​编辑

 

视频教程:

 

动易SiteFactory 4.7整合,动易SiteFactory 6.2整合,dedecms 5.7-ueditor整合,dedecms 5.7-ckeditor3x整合,帝国CMS-ueditor整合,帝国CMS-ckeditor4x整合,dokuwiki整合,Windows控件安装,macOS控件安装,linux-deb控件安装,linux-rpm控件安装,uos控件安装,linux-银河麒麟控件安装,

 

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​


标签:控件,word,编辑,文档,服务器,xhEditor,上传,图片
From: https://www.cnblogs.com/songsu/p/17522507.html

相关文章

  • mysql的表结构导出成word文档
     pararent的pow.xml<properties><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourc......
  • 使用 ABAP 调用 Adobe Document Service 生成 PDF 文档
    我以前在SAP成都研究院BYDForm开发团队工作过5年,负责BYDBO输出成PDF的功能开发。AdobeDocumentService(ADS)是SAPNetWeaverASJava堆栈的一部分,提供了用于创建和处理PDF文件的功能。在ABAP系统中,可以通过调用ADS服务来生成和处理PDF文档。这种集成使得ABAP开发人员能......
  • GB28181 视频服务器文档整理
     CarEye开发GB28181服务器有将近两年时间了,早期我们用纯C++开发了一个GB28181视频服务期,对外的接口是基于MQ协议的。这样开发出来的服务器主要有几个问题。1.SIP服务器和流媒体服务器是绑定在一个进程中的,因为没有分离,造成了视频处理和SIP服务器只能在一台服务器上运行,既不能打......
  • WORD页边距、行距、页码、页眉页脚
    页边距:上2.5cm,下2.5cm,左2.5cm,右2cm,页眉1.5cm,页脚1.75cm,左侧装订;行距:1.5倍行距;页码:底部居中,五号;页边距及页眉、页脚,装订线位置设置在“文件”→“页面设置”行距设置在“格式”→“段落”页码设置在“插入”→“页码”==========1.把要调行距的内容选定2.击鼠标右键3.点击[......
  • Allure使用教程 - 官方文档汉化
    Allure测试报告目录Allure测试报告安装LinuxMacOSXWindows手动下载&安装安装pytest-allure插件快速入门allure特性可以在html报告中,添加用例描述、附件等信息,比如:1、@allure.feature(功能名称)2、@allure.story(子功能名称)3、@allure.title(测试标题)4、@allure.description(用例描......
  • uni.app 给大家推荐一个 非常牛的 插件 上传图片 上传 word 上传xlsx 上传pdf
     插件地址地址:https://ext.dcloud.net.cn/plugin?name=lsj-upload兼容vue2 vue3微信小程序 等等等等图片放在下面了使用方法里面有介绍又到了码农 最重要的时刻了ctrlc  ctrlv  大法   ......
  • element ui 里面的表格 导出word形式 直接下载到本地
     干吧家人们  可以根据后端返回的接口里面的地址直接把他下载下来 可以使用letlink=document.createElement('a');letobjectUrl=res.data.path;//重要重要的是这个这个是后端返回回来的地址link.setAttribute("href",objectUrl);link.setAttribute("download......
  • CodeForces 1845C Strong Password
    洛谷传送门CF传送门我怎么这么多天没写题解了,快来水一篇。考虑对\(s\)串建子序列自动机后dp。设\(n=|s|\)。建子序列自动机,就是求出\(nxt_{i,j}\)为\([i,n]\)中第一个等于\(j\)的位置,不存在则\(nxt_{i,j}=n+1\)。然后我们设\(f_{i,j}\)为填到密码的......
  • 用C#实现在Word文档中搜索文本
    在word应用程序中搜索和替换文本是举手之劳的事情,通过word的对象模型,我们也可以使用编程方式来实现。Word的对象模型有比较详细的帮助文档,放在Office安装程序目录,office2003是在ProgramFiles\MicrosoftOffice\OFFICE11\2052下,文档本身是为VBA提供的,在这个目录下还可以......
  • 内核文档翻译 —— Building External Modules(编译外部模块)
    原文:https://www.kernel.org/doc/html/latest/kbuild/modules.htmlThisdocumentdescribeshowtobuildanout-of-treekernelmodule.1.Introduction"kbuild"isthebuildsystemusedbytheLinuxkernel.Modulesmustusekbuildtostaycompatiblewi......