ckeditor粘贴word图片且图片文件自动上传插件

最新推荐文章于 2023-09-17 09:45:11 发布
最新推荐文章于 2023-09-17 09:45:11 发布
阅读量120 收藏
点赞数
分类专栏： word图片上传控件 文章标签： 前端 html javascript
原文链接：https://www.cnblogs.com/zyzzz/p/15618767.html
版权

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方法

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

讨论群：223813913

yjjatqihc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ckeditor粘贴上传图片
aryasei的专栏
04-24 274
最近公司做的项目需要用到文本上传功能。 网上找了很久，大部分都有一些不成熟的问题，皇天不负有心人终于让我找到了一个成熟的项目。 接下来就看一下吧 1、打开工程： 对于文档的上传我们需要知道这个项目的逻辑是否符合我们的构造。 运行： 尝试使用文档复制后粘贴进来： 通过粘贴后，文档以及图片被粘贴进来了，看看html代码是否如我们的预期： 看来这个工程完全符合我们的预...
ckeditor 4.2.1_演示 ckeditor 上传&插入图片
weixin_33795806的博客
09-25 546
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件，对里边的 ckeditor（html 编辑）控件很感兴趣，因为之前用 Ext.Net 的 htmleditor 控件时，需要一个上传并插入图片的功能，可是 htmleditor...
CKEditor 4.x 批量图片上传插件
weixin_37569601的博客
09-28 1299
CKEditor 4.x 批量图片上传插件 插件仓库 传送门：https://github.com/1107115073/CKEditor-uploads； 觉得可以的话，记得点个星喔。 以下图片为效果图 使用流程 下载CKEditor 4.x 请到官网去下载，这是官网的链接https://ckeditor.com/ckeditor-4/download/ 配置插件 将...
CKeditor富文本的使用与插件SmartUpload上传图片
qq_62898618的博客
04-10 598
CKeditor富文本编辑器的使用 所需js 文件文件密码:897z 效果图 概述 富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。 常见的富文本编辑器有 ckeditor（***） Kindeditor ueditor wangEditor Sma.
CKEditor粘贴图片自动上传到服务器(JavaScript版)
Mr_Zang666的博客
04-13 91
hello
ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
10-17 1146
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows，因此打算使用nodejs来解决这一问题 发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支...
Applet实现的ckeditor粘贴word图片且图片自动上传
07-21
最近用APPLET写了一个可以实现ckeditor中粘贴word图片且图片自动上传的插件，大家看看怎么样： 演示地址： http://test.reremouse.com/wordimg/ 插件使用JAVA APPLET技术开发，需要配合JavaScript使用，可以...
ckeditor3x编辑器word图片粘贴上传
10-19
CKEditor3.x版本是该系列的一个重要迭代，它支持多种高级特性，包括从外部源（如Word文档）粘贴图片并自动上传到服务器的功能。这一特性极大地提升了用户编辑网页内容的效率和便捷性。 **CKEditor3.x核心功能** 1....
蝙蝠CKEditor本地图片自动上传插件源代码
03-18
本插件使用JAVA技术开发，需要配合JavaScript使用，可以将网页中含有的本地图片（src为'file:///'）自动上传到...典型应用场景如：配合ckEditor使用，使从WORD粘贴过来的内容中包含的本地图片自动上传到服务器。 依
word插件，图片处理专用
04-18
word插件，图片处理专用 试过就知道，很有用的
Word图片上传控件开发文档
11-21
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浏览器将无法正常加载控件。
图片上传插件
01-14
简单的PHP图片上传插件 包括HTML JS 只需要将文件放入对应的模板，换上服务端路径即可
ckeditor 粘贴图片并上传
02-09
拷到plugins目录下 配置config.js config.extraPlugins = 'uploadimage'; config.imageUploadUrl= '上传路径'; 详细请看：http://blog.csdn.net/weixin_30512027/article/details/79295921
蝙蝠CKEditor本地图片自动上传插件.zip
07-14
典型应用场景如：配合ckEditor使用，使从WORD粘贴过来的内容中包含的本地图片自动上传到服务器。 --------------------------------------------------- 依赖环境：JDK1.7 、jQuery、ckEditor4.2、浏览器不限 ---...
ckeditor粘贴图片
09-04
本文将重点讨论在CKEditor中如何实现从Word文档粘贴图片并自动上传的功能。 ### CKEditor与Word图片粘贴 CKEditor支持从Word文档中复制和粘贴文本以及图片。通常，Word中的图片是以嵌入式对象的形式存在，粘贴到...
富文本编辑器CKEditor4添加自定义插件(实现多图上传)
qq_33317437的博客
03-02 2518
ckeditor的扩展功能，因项目需要添加一个多图上传功能 1、ckeditor/plugins/下新建一个uploadImg的目录，并且在里面创建一个plugin.js，把插件的图标放在icons文件夹里(必须命名为icons) 2、注册插件，plugin.js代码如下 var httpUrl = 'XXXXX'; // 图片上传路径 CKEDITOR.plugins.add( 'uploadImg', { // 注册名为uploadImg的插件 icons: 'uploadImg',
tinymce实现从word直接粘贴并自动上传图片
最新发布
weixin_52041354的博客
09-17 243
参考文章：http://blog.ncmem.com/wordpress/2023/09/17/tinymce%e5%ae%9e%e7%8e%b0%e4%bb%8eword%e7%9b%b4%e6%8e%a5%e7%b2%98%e8%b4%b4%e5%b9%b6%e8%87%aa%e5%8a%a8%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87/语言包下载：https://www.tiny.cloud/get-tiny/language-packages/
vue CKEditor5基本使用，图片上传，添加插件
06-07
首先，你需要安装 `@ckeditor/ckeditor5-vue` 和 `@ckeditor/ckeditor5-build-classic` 两个依赖包。 ``` npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic ``` 然后在你的 Vue 组件中引入 CKEditor 组件： ```vue <template> <div> <ckeditor :editor="editor" v-model="content" :config="editorConfig"></ckeditor> </div> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic' import CKEditor from '@ckeditor/ckeditor5-vue' export default { components: { ckeditor: CKEditor.component }, data() { return { content: '', editorConfig: { // 配置项 }, editor: ClassicEditor } } } </script> ``` 在上面的代码中，我们引入了 `ClassicEditor`，它是一个预先配置好的编辑器，包含了常用的插件，如加粗、斜体、链接等。我们也可以自定义 `editorConfig`，来配置编辑器。 下面是一个常用的配置项示例： ```js editorConfig: { toolbar: { items: [ 'bold', 'italic', 'link', '|', 'bulletedList', 'numberedList', '|', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo' ] }, image: { toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side', '|', 'imageResize', '|', 'imageUpload', 'imageUpload', 'imageUpload', 'imageUpload' ], styles: [ 'full', 'side' ] }, language: 'zh-cn', table: { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties' ] }, licenseKey: '', simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' } } } ``` 上面的配置中，我们开启了图片上传功能，并且添加了表格插入、图片上传、撤销、重做等常用功能。同时也设置了语言为中文。 如果需要添加额外的插件，可以使用 `@ckeditor/ckeditor5-*` 的包名，比如添加字数统计插件： ``` npm install --save @ckeditor/ckeditor5-word-count ``` 然后在 `editorConfig` 中添加： ```js import WordCount from '@ckeditor/ckeditor5-word-count/src/wordcount'; editorConfig: { plugins: [WordCount], toolbar: [ 'wordCount' ] } ``` 这样就可以在编辑器中添加字数统计功能了。 我们也可以自定义上传图片的方法，需要在配置项中添加 `simpleUpload` 选项： ```js editorConfig: { simpleUpload: { uploadUrl: '/your/upload/url', headers: { 'X-CSRF-TOKEN': 'CSRF-Token' }, // 自定义上传方法 async upload(file) { // 这里写上传逻辑 const formData = new FormData(); formData.append('file', file); const response = await axios.post('/your/upload/url', formData, { headers: { 'Content-Type': 'multipart/form-data', 'X-CSRF-TOKEN': 'CSRF-Token' } }); return { default: response.data.url }; } } } ``` 在上面的代码中，我们使用了 axios 发送了一个 `multipart/form-data` 的请求，然后返回上传的图片地址。 希望以上内容能够帮到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值