正文

kindeditor图片粘贴上传(chrome)

jsper  jsper  2022-09-21  176

关键词：

首先要赞一下kindeditor，一个十分强大的国产开源web-editor组件。

kindeditor4.1.x版本已支持图片批量上传，不过传统的选文件上传的方式依然效率低下。

很多时候，编辑人员可能需要将一个文档中图片上传到网上，那么，按照传统的上传方法，他必须先将图片另存为到本机，再用编辑器的上传选择文件进行上传。

这个过程至少要做这几个动作：在文档中图片上点右键 -> 点另存为 -> 选择目录 -> 点保存。上传时：点上传按钮 -> 选择目录 -> 选择文件。

可以看到，上传一张图片是十分繁琐的工作，特别时在选择目录的时候，那个小小的文件浏览器界面和千篇一律的文件夹定位，能使人抓狂。

网站编辑人员经常问我能不能从word中直接复制图片粘贴上传？

这个问题我自己也有疑问。带着这个疑问查阅了一些资料，经过学习研究，最终发现，通过很小的代码量就可以实现这个功能。

于是我对kindeditor进行了一下“扩展”。chrome61下测试通过。

通过搜索引擎查阅了一些资料，发现用最新浏览器技术是可以无障碍实现这个想法的。

大体要求及流程是：

1.编写paste粘贴事件的监听处理。

2.从剪切板获取数据。

3.ajax二进制上传。

4.显示到编辑器里。

实现思路是运用kindeditor提供的api+javascript代码结合实现。

把代码写到kindeditor的创建与初始化配置中，最终代码（可重点故关注注释）：

 1 kindeEditor = KindEditor.create(‘#updatePapers_contentEditor‘, {
 2 
 3     /***
 4      * 图片上传必须使用绝对路径,因为KindeEditor有个缺陷,
 5      * 它的批量上传和单个上传界面文件在不同级别的目录下,
 6      * 用相对路径时,总是只能成功一种模式,另一种就不会成功,所以只能这样用绝对路径.
 7      */
 8     uploadJson : ‘/fileupload‘,//服务器文件上传接收程序路径
 9     urlType : ‘‘,
10     resizeType:0,
11     //调用kindeditor的afterCreate回调函数对kindeditor功能进行“扩展”，实现图片粘贴上传。
12     afterCreate:function() {
13         var editerDoc = this.edit.doc;//得到编辑器的文档对象
14         //监听粘贴事件, 包括右键粘贴和ctrl+v
15         $(editerDoc).bind(‘paste‘, null, function (e) { 
16             /*获得操作系统剪切板里的项目，e即kindeditor,
17              *kindeditor创建了originalEvent(源事件)对象，
18              *并指向了浏览器的事件对象，而chrome浏览器
19              *需要通过clipboardData(剪贴板数据)对象的items
20              *获得复制的图片数据。
21              */
22             var ele = e.originalEvent.clipboardData.items;
23             for (var i = 0; i < ele.length; ++i) {
24                 //判断文件类型
25                 if ( ele[i].kind == ‘file‘ && ele[i].type.indexOf(‘image/‘) !== -1 ) {
26                     var file = ele[i].getAsFile();//得到二进制数据
27                     //创建表单对象，建立name=value的表单数据。
28                     var formData = new FormData();
29                     formData.append("imgFile",file);//name,value
30 
31                     //用jquery Ajax 上传二进制数据
32                     $.ajax({
33                         url : ‘/fileupload?dir=image‘,
34                         type : ‘POST‘,
35                         data : formData,
36                         // 告诉jQuery不要去处理发送的数据
37                         processData : false,
38                         // 告诉jQuery不要去设置Content-Type请求头
39                         contentType : false,
40                         dataType:"json",
41                         beforeSend:function(){
42                             //console.log("正在进行，请稍候");
43                         },
44                         success : function(responseStr) {
45                             //上传完之后，生成图片标签回显图片，假定服务器返回url。
46                             var src = responseStr.url;
47                             var imgTag = "<img src=‘"+src+"‘ border=‘0‘/>";
48 
49                             //console.info(imgTag);
50                             //kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
51                             kindeEditor.insertHtml(imgTag);
52 
53 
54                         },
55                         error : function(responseStr) {
56                             console.log("error");
57                         }
58                     });
59 
60                 }
61 
62             }
63 
64 
65         });
66     }
67 });

功能虽然有了，但是功能并不是很细致，实际应用中可能还要考虑压缩，图片尺寸缩略。不过这些对于新一代浏览器都不是问题了，都有现成的api调用，可以直接实现。

另外，还不知道其他浏览器（IE9以上、Firefox、Safari等）是否能用。

我在搜索“浏览器粘贴上传”，发现了知乎上的一篇探讨：

《知乎回答问题编辑框用 Ctrl+V 粘贴图片是如何实现的？》https://www.zhihu.com/question/20893119

里面有几位大牛的代码非常吸引我，给了我实现这个功能的最基本要素。

kindeditor实现word粘贴图片自动上传

tinymce是很优秀的一款富文本编辑器，可以去官网下载。https://www.tiny.cloud这里分享的是它官网的一个收费插件powerpaste的旧版本源码，但也不影响功能使用。http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/以v... 查看详情

kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件

Chrome+IE默认支持粘贴剪切板中的图片，但是我要发布的文章存在word里面，图片多达数十张，我总不能一张一张复制吧？Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

kindeditor怎么上传图片

参考技术A过KindEditor实现图片上传功能步骤：（1）修改../plugins/image.js文件中fileName类型为file的name(2)添加上传处理的URL：vareditor;KindEditor.ready(function(K)editor=K.create('#myeditor',uploadJson:'/uploadImg'););（3）返回Json的信息：查看详情

kindeditor等在线编辑器是怎么实现支持word的粘贴的?

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

使用kindeditor完成图片上传(代码片段)

前端使用KindEditor，后台使用Springmvc1拷贝KindEditor相关文件到项目中拷贝KindEditor相关文件到项目中2准备一个jsp页面页面中我准备了一个超链接，点击就可以打开KindEditor批量图片上传对话框1.jsp页面中需要引入KindEditor相关的css和js... 查看详情

ckeditor粘贴图片上传功能

关于xheditor粘贴图片自动上传

关于umeditor粘贴图片自动上传

kindeditor，kindeditor编辑内容无法保存，并且无法上传图片或者文件

我在kindeditor官网上下载了源码，然后按照官网的使用教程在我的ASP的页面上插入了编辑器。可是问题来了，首先我保存编辑的信息后提示保存成功，再打开发现刚才在编辑器里面编辑的信息没有。第二，我上传图片时,点击浏览... 查看详情

kindeditor图片上传(代码片段)

视图函数CONTENT=""fromapp01.formsimportArticleFormdefwangzhe(request):ifrequest.method=="GET":obj=ArticleForm()returnrender(request,‘wangzhe.html‘,‘obj‘:obj)else:obj=ArticleForm(request.POST)ifobj.is_va 查看详情

kindeditor上传问题

我的网站程序是asp的，下载的最新的kindeditor，按照官网上的使用方法配置的，现在不需要本地上传的功能都可以使用了，需要本地上传的功能，比如上传图片，批量上传图片，上传文件等等，都用不了，上传图片的时候，选择... 查看详情

kindeditor上传图片浏览器兼容性问题

1、使用KindEditor 的图片上传插件时，需要返回如下格式的JSON数据//成功时{"error":0,"url":"http://www.example.com/path/to/file.ext"}//失败时{"error":1,"message":"错误信息"}所以你可能这样写你的服务端代码@RequestMapping(value="/pic/upload",produces 查看详情

kindeditor编辑器上传图片问题,总是选择上传东西（比如图片）的时候，不能上传，无限加载中的界面

用Kindeditor编辑器上传图片时出现“服务器故障”，小的从来没有用用过这个这就造成了文件上传不能超过200k，而事实上是提交数据不能超过200k,你可以参考技术A造成这个原因可能是你负责上传的upload_json.php文件有问题，请检查... 查看详情

kindeditor上传图片时候，上传成功了，但是页面上却提示失败

今天尝试着kindeditor做一个上传demo，碰到了一个日狗的问题，百度谷歌都没有答案，最后查看源码才发现问题所在，记录一下，福利大众。碰到问题如下，图片后台明明上传成功了，返回信息也是正确的，却提示上传失败。百思... 查看详情

在线html编辑器kindeditor-4.1.10上传图片文件应用指南

1、在ASPX页面中对应的head、body添加相应的红色部分2、引用kindeditor-4.1.10中的litjosn.dll3、在写入数据库时要替换相应的路径和IP4、kindeditor-4.1.10下载地址 http://kindeditor.net/demo.php<html><headrunat="server"><metacharset="u 查看详情

富文本框插件kindeditor上传图片不走后台直接js上传文件到oss要怎么处理？

参考技术A修改kindeditor的php上传文件查看详情

php使用kindeditor编辑器里的图片上传功能，，

我们是把KindEditor编辑器放到第三方的空间阿里的OSS上，，然后改造了下upload_json.php方法，，单独封装成一个类里的方法，，但是没处理file_manager_json.php这个文件。。。。造成的后果就是上传单张图片是OK的，，但是多张图片批量... 查看详情

springmvc+jsp+富文本kindeditor进行图片ftp上传nginx服务器实现

...名称：uploadFile5、返回结果数据类型json参考文档：http://kindeditor.net/docs/upload.html返回格式(JSON)1//成功时23{45"error":0,67"url":"http:// 查看详情