Tinymce paste pictures automatically upload

Tinymce paste pictures automatically upload

Tinymce Chinese document: upload pictures and files

Regarding the picture upload step pit record, basically is the following several

[toc]

You cannot copy a local image and paste it

Paste image copy and paste, rely on paste plugin documentation: paste plugin \ paste plugin

The simple configuration is as follows:

tinymce.init({
  selector: '#tinydemo'.plugins: 'paste'.toolbar: 'paste'.paste_data_images: true // The default value is false. Remember to change it to true before pasting
})
Copy the code

The pasted image looks like this on the display:

Is a binary stream linked file, this saved to the back end does not display in the echo, so configure upload. Or look at the official documentation to upload pictures and file | TinyMCE Chinese document Chinese manual (ax – z.c n) because I was with your upload, it did not go to delve into a piece

Paste in the picture upload problem

How to acquire the image content: paste upload images and files | TinyMCE Chinese document Chinese manual (ax – z.c n)

Go to the images_upload_handler function column and use this function in the init method

tinymce.init({
  images_upload_handler: function(blobInfo, success, failure, progress) {}})Copy the code

The blodInfo object contains several methods:

To get the original name of the file, do it in the BLOD object

Upload pictures, naturally take bloD objects, and then combined with their own business logic to upload to the back end of the line

The command output is displayed after the image is uploaded

Success, Failure, and Progress callbacks

Click on the big picture and copy in 2 pictures

You think this is the end of it? No, no, no, this is a problem that happens on every platform.

The problem is this: on window platform, when the image is in the thumbnail/not enlarged, copy and paste it, no problem. If you double click, open a larger image of the image after copying, pasting into the editor, you will see two identical images. Including wechat point to open a large picture, and so on

The name of the image I pasted in was img.jpg. There is obviously an image. PNG in the blodinfo.blod ().name that prints the information. So it’s not an editor bug, it’s a window mechanism

No matter what image you paste, if you enlarge the image, you’ll get an extra image called image.png. However, users do upload image. PNG images, so you can’t simply filter image. PNG images.

Using the idea of anti-shake function, filter out the redundant image.png

Due to the urgency of the bug fix, the code was not optimized/encapsulated into methods, just looking at the logic

Typically, image. PNG is copied before the original image

1. Image named image.png encountered with a delay of 30 milliseconds before uploading (setTimeout used here)
2. If the above bug is triggered, the original image should be copied in 30 milliseconds, which means that if it is triggered a second timeimages_upload_handlerFunction,
   
   2.1. If there is a timer waiting, then the diagram in the timer is redundant
   
   2.2. If no other image is triggered after more than 30 millisecondsimages_upload_handlerFunction that the user uploads is calledimage.pngLet the timer execute the upload completed.
3. If a delete is triggered within 30 milliseconds, the timer is bound to clear, but the image is still in the editor and not deletedremoveFn. In the note below also has written, remember to use the closure, theimage.pngpicture-correspondingsuccessLet’s save the function. Because if the image is successfully uploaded, you have to use this function to set it to the corresponding image

// Define two global variables
let uploadTimeOut = null
let removeFn = null

tinymce.init({
  // Upload the function
  images_upload_handler: (blobInfo, success, failure, progress) = > {
    if (uploadTimeOut) {
      removeFn && removeFn()
      clearTimeout(uploadTimeOut)
    }
    let fileInfo = blobInfo.blob()

    // Define an upload method
    var upload = () = > {
      // this. MyUpload is the logic for uploading the file
      this.myUpload(fileInfo)
        .then(res= > {
          // After the upload is successful
          success(res.data.url)
        })
        .catch(res= > {
          // After the upload fails, mark SRC as uploadFail and delete it
          // Do you want to use the failure function
          success('uploadFail')

          // setTimeOut is used to delete the success function after it has been executed. Otherwise, the corresponding image may not be found
          setTimeout(() = > {
            let errorImg = document.querySelectorAll('img[src="uploadFail"]')
            errorImg.forEach(item= > {
              item.parentNode.removeChild(item)
            })
          }, 100)})}if (fileInfo.name == 'image.png') {
      uploadTimeOut = setTimeout(() = > upload(), 30)

      // Use the closure to save the current success function
      // blobUri is the only symbol of an image that has been copied in, and it is up to blobUri to delete it
      // removeFn echoes line 9
      removeFn = (function(url, cb) {
        return function() {
          cb && cb(url)
          let imgNode = document.querySelector('img[src="' + url + '"])
          imgNode && imgNode.parentNode && imgNode.parentNode.removeChild(imgNode)
          removeFn = null
        }
      })(blobInfo.blobUri(), success)
    } else {
      upload()
    }
  }
})
Copy the code

We’re done