Kindeditor图片粘贴上传(chrome)

首先要赞一下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

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

时间: 2024-08-04 10:10:17

Kindeditor图片粘贴上传(chrome)的相关文章

Laravel项目中使用markdown编辑器及图片粘贴上传七牛云

本文为转载,原文:http://www.chairis.cn/blog/article/15 Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.本次我们选用的编辑器是: Editor.md,官网中也有很详细的介绍.从官网中下载安装下载的内容中,也有很多demo可以借鉴.在下载的包中,去除一些多余的内容,只保留我们需要的内容,然后加到项目的public目录下,如下图红色框内的内容: 项目中使用 在项目中使用edit

KindEditor图片批量上传

KindEditor编辑器图片批量上传采用了上传插件swfupload.swf,所以后台上传文件方法返回格式应为JSONObject的String格式(注). JSONObject格式: JSONObject obj = new JSONObject(); obj.put("error", 0);//0:上传文件成功,1:上传文件失败 obj.put("url", "这里是图片路径,多张图采用英文逗号分隔“,”"); 代码示例: /** * 文件

Word图片粘贴上传控件,直接粘贴图片到编辑器-DEDE

很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面 方法一: 工具/原料 百度doc任意富文本编辑器,以UEDdito为例 方法/步骤 登录,http://word.baidu.com 点击右上角 导入文档,如图所示 导入后,系统会自动将word的内容加载进去.此时 点击右上角编辑,Ctrl+A复制所有内容 打开UE

让富文本编辑器支持复制doc中多张图片直接粘贴上传

让富文本编辑器支持复制doc中多张图片直接粘贴上传 Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因. 好,开始尝试UMeditor,Chrome只能获得本地路径,无法读取文件. https://ueditor.baidu.com/website/umeditor.html(有兴

xhEditor实现ctrl+v粘贴word图片并上传

自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片.需要用户手动一张张上传Word图片.如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦. 1.只粘贴图片并上传到服务器 config.extraPlugins = 'uploadimage'; //config.uploadUrl = '上传路径

图片的粘贴上传

如果浏览器支持HTML5,通过past事件就可以获取图片的base64位字符,这样就可以实现图片的粘贴上传. 前端: <div id="imgDiv" style="border: 1px solid darkblue"> CTRL+V即可实现粘贴 </div> <script type="text/javascript"> function doPaste() { pasterTool.paste(); }

ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解决这一问题 发现不管什么编辑器只要将图片转换成base64后就可以直接使用(IE8及一下可能不支持),由于编辑器中添加word文档功能也只是自己用,因此可以忽略这种浏览器了 找了很久,试用了很多编辑器,

文件(图片)上传组件

1. 问题: https://zhuwenlong.com/blog/51f6519532ffd70b27000001 HTML5 File api 实现断点续传 http://www.jianshu.com/p/2a42a0c89640 html5 上传本地图片处理各种问题 2. 组件: http://fex.baidu.com/webuploader/ http://fex.baidu.com/webuploader/demo.html 百度上传组件 http://kindeditor.ne

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支