how to play gif

[mdg6496]

Hi there . I was playing with Script Demo (vanilla js) to see if I can drag image into editor container. I have two questions.

• is there any way to display image inside editor container? (since the sample would display image on separate div container)
• the GIF image wouldnt play when dragged.

Many tanks.

[chenjuneking]

Hi there . I was playing with Script Demo (vanilla js) to see if I can drag image into editor container. I have two questions.

• is there any way to display image inside editor container? (since the sample would display image on separate div container)
• the GIF image wouldnt play when dragged.

Many tanks.

1, It's posible to display image inside the editor, as the the Readme shows, you need to do something after the image uploaded to the server.

// upload image to your server
  callUploadAPI(your_upload_url, formData, (err, res) => {
    if (err) return
    // success? you should return the uploaded image's url
    // then insert into the quill editor
    let index = (quill.getSelection() || {}).index;
    if (index === undefined || index < 0) index = quill.getLength();
    quill.insertEmbed(index, 'image', res.data.image_url, 'user')
  })

2, the GIF image wouldn't work on this module on paste event, since this module access image's data from the clipboard, unfortunly the clipboard will save only one frame of the GIF image when user copied a GIF, that means the copied image was not an animated one. But on the drop event and the toolbar's image button, I think it has a way to attach your purpose:

1. upload the gif to the server
2. the server return the gif's url to the frontend
3. in the frontend, insert the received gif's url into the editor

[mshahin364]

I agree with @chenjuneking approach. If you want to show a gif image, do not use the imageData.minify method. It converts the gif image to png. To solve this problem, you can directly upload the gif image to the server & use the image URL.