Kindeditor image paste upload (chrome)

First of all, to praise Kindeditor, a very powerful domestic open-source web-editor components.

kindeditor4.1.x version has supported image batch upload, but the traditional way of file upload is still inefficient.

Many times, editors may need to upload a document to the Internet, then, according to the traditional upload method, he must first save the picture as to the computer, and then use the editor's upload select file to upload.

This process must be done at least a few actions: in the document, right-click on the picture, save as, select Directory, save the point. Upload: Click the upload button, select directory, select File.

As you can see, uploading a picture is very tedious work, especially when choosing a directory, the small file browser interface and the same folder positioning, can make people crazy.

Website editors often ask me if I can copy pictures from Word to paste upload?

I have doubts about this question myself. With this query, we looked at some information, studied it, and finally found that it was possible to achieve this function through a small amount of code.

So I gave Kindeditor a little bit of "expansion." Chrome61 under test pass.

Through the search engine access to some information, found that the latest browser technology can be a barrier to realize the idea.

The general requirements and processes are:

1. Write the paste-paste event for listening processing.

2. Get the data from the Clipboard.

3.ajax binary upload.

4. Display in the editor.

Implementation of the idea is the use of kindeditor provided by the Api+javascript Code combination implementation.

Write the code into the Kindeditor's creation and initialization configuration, and the final code (which focuses on the note):

1Kindeeditor = kindeditor.create (' #updatePapers_contentEditor ', {2 3     /***4 * Image upload must use absolute path, because Kindeeditor has a flaw,5 * It's batch upload and single upload interface file at different levels of the directory,6 * When using a relative path, you can always only succeed one mode, the other will not succeed, so you can only use absolute path.7      */8Uploadjson: '/fileupload ',//Server file upload receive program path9Urltype: ",Tenresizetype:0, One     //call Kindeditor's aftercreate callback function to "extend" the Kindeditor function to implement the image pasting and uploading.  AAftercreate:function() { -         varEditerdoc = This. Edit.doc;//get the Editor's document object -         //Listen for paste events, including right-click Paste and Ctrl + V the$ (Editerdoc). bind (' Paste ',NULL,function(e) { -             /*get the items in the operating system Clipboard, E is Kindeditor, - *kindeditor created the Originalevent (source event) object, - * and point to the browser's event object, while the Chrome browser + * Items that need to be through the Clipboarddata (Clipboard data) object - * Get copy of picture data.  +              */ A             varEle =E.originalevent.clipboarddata.items; at              for(vari = 0; i < ele.length; ++i) { -                 //determine file type -                 if(Ele[i].kind = = ' file ' && ele[i].type.indexof (' image/')!==-1 ) { -                     varFile = Ele[i].getasfile ();//Get binary Data -                     //create form objects and establish name=value form data.  -                     varFormData =NewFormData (); inFormdata.append ("Imgfile", file);//Name,value -  to                     //upload binary data with jquery Ajax + $.ajax ({ -URL: '/fileupload?dir=image ', theType: ' POST ', * Data:formdata, $                         //tell jquery not to process the data sentPanax NotoginsengProcessData:false, -                         //tell jquery not to set the Content-type request header theContentType:false, +DataType: "JSON", ABeforesend:function(){ the                             //Console.log ("In progress, please wait"); +                         }, -Success:function(responsestr) { $                             //after uploading, the picture label is generated to echo the picture, assuming the server returns the URL.  $                             varsrc =Responsestr.url; -                             varImgtag = "; -  the                             //Console.info (imgtag); -                             //Kindeditor provides a function to insert HTML in the focus position, which is called by this function. Wuyi kindeeditor.inserthtml (imgtag); the  -  Wu                         }, -Error:function(responsestr) { AboutConsole.log ("Error"); $                         } -                     }); -  -                 } A  +             } the  -  $         }); the     } the});

Although the function has, but the function is not very meticulous, the actual application may also consider the compression, the picture size is abbreviated. However, these are not a problem for a new generation of browsers, there are ready-made API calls, can be directly implemented.

In addition, it is not known whether other browsers (IE9, Firefox, Safari, etc.) can be used.

I was searching for "browser paste upload" and found a discussion on the knowledge:

How does the edit box with Ctrl + V paste the picture in the answer question? "Https://www.zhihu.com/question/20893119

There are a few of Daniel's code very appealing to me, giving me the most basic elements to achieve this function.

Kindeditor image paste upload (chrome)