526互联

KindEditor 直接粘贴图片转上传文件

发布时间 2023-12-12 11:54:42作者: cn2023
1、http://kindeditor.net/demo.php

2、若直接粘贴图片  会生成图片流(二进制数据)，文件比较大,
  解决方法:直接粘贴图片转上传文件



var editor;
var KindEditor_kk;



KindEditor.ready(function(K) {
   createKindEditor(K);
});


function createKindEditor(K){  //createKindEditor开始
   　　KindEditor_kk=K;
      editor = K.create('#content', {  //K.create开始
      uploadJson : 'fileUploads.htm',//文件上传方法
      height : "300px",
      allowImageUpload : true,
      fieldName : 'upload',
      items : ['fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline','removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist','insertunorderedlist','|', 'emoticons','link','media','|','image'] ,  
      afterBlur: function(){editor.sync();},
      afterUpload:function(){editor.sync();},
      afterCreate : function() {     //afterCreate 开始

          //**************若为粘贴图片自动上传图片功能**************开始
                     var editerDoc = this.edit.doc; //得到编辑器的文档对象
                     //监听粘贴事件, 包括右键粘贴和ctrl+v
                     $(editerDoc).bind('paste', null, function (e) {
                         var ele = e.originalEvent.clipboardData.items;
                         for (var i = 0; i < ele.length; ++i) {
                             //判断文件类型
                             if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
                                 var file = ele[i].getAsFile();//得到二进制数据
                                 //创建表单对象，建立name=value的表单数据
                                 var formData = new FormData();
                                 formData.append("upload", file);//name,value

                  　　　　　　　　//用jquery Ajax 上传二进制数据*******开始
                                 $.ajax({
                                     url: 'bfileUploads.htm',
                                     type: 'post',
                                     data: formData,
                     　　　　　　　　　　// 告诉jQuery不要去处理发送的数据
                                     processData: false,
                     　　　　　　　　　　// 告诉jQuery不要去设置Content-Type请求头
                                     contentType: false,
                                     dataType: "json",
                                     beforeSend: function () {
                     　　　　　　　　　　//console.log("正在进行，请稍候");
                                     },
                                     success: function (responseStr) {
                        　　　　　　　　//上传完之后，生成图片标签回显图片，假定服务器返回url。
                                         var src = responseStr.url;
                                         var imgTag = "<img src='" + src + "' border='0'/>";
                        　　　　　　　　　　　　//console.info(imgTag);
                        　　　　　　　　　　//kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
                                         editor.insertHtml(imgTag);

                                     },
                                     error: function (responseStr) {
                                         console.log("error");
                                     }
                                 });
                 　　　　　　　　　//用jquery Ajax 上传二进制数据*******结束
                             }
                         }
                     })


         　　　　//**************若为粘贴图片自动上传图片功能*************结束


         　　　　var self = this;
         　　　　K.ctrl(document, 13, function() {
            　　　　　　self.sync();
           　　　　　　 _save();
         　　　　});
         　　　　K.ctrl(self.edit.doc, 13, function() {
            　　　　self.sync();
            　　　　_save();
         　　　　});
     　　　}  //afterCreate 结束

    });  //K.create结束

 } //createKindEditor结束