HTML editor upload picture word

There are no more than two ways to copy pictures. One is to upload the picture directly to the server, and the other is to convert the base64 code into a binary stream. It
is currently limited to Chrome browser.
First, take the binary stream of um-editor as an example:
open umeditor.js , Find UM.plugins['autoupload'], then find the autoUploadHandler method, comment out the code.
Add the following code:

//Determine whether the content of the clipboard contains text

//First explain why it is necessary to judge whether the text is empty

//After the text or picture in ctrl+c word, 1 (image/png) or 4 types (text/plain, text/html, text/rtf, image/png) type objects will be returned

//In order to be compatible with the 4 formats, the following judgments are made

//The following code: e.originalEvent.clipboardData.items gets the contents of the clipboard

//When the text is pasted, the text is not empty, and the picture type of the current text is also returned

//If there is text, do not do any processing. If you only paste the picture, the text must be empty, including the copied desktop picture or screenshot picture

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); upload to the server

               setBase64Image (base64, me);

              });

              //Prevent the default event, avoid repeated addition;

              e.originalEvent.preventDefault();

             };

        }

}

Two methods:

//Perform the operation of inserting pictures

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//Get base64

function  getBase64(blob, callback) {

    var a = new FileReader();

    a.onload = function(e) {callback(e.target.result);};

    a.readAsDataURL(blob);

};

Effect display: For

details, please refer to this article: http://blog.ncmem.com/wordpress/2019/08/07/ueditor-word%e5%9b%be%e7%89%87%e4%b8%8a %e4%bc%a0/

Discussion group: 223813913

Guess you like

Origin blog.csdn.net/weixin_45525177/article/details/108447265