Quill: Getting image src in text-change event when deleting

[Mits-Soft]

I have been able to insert images in the editor and save them to a server and get the body changed and saved (I use the innerHtml to retrieve the body). Everything is alright and I see the saved post ok in a div.

The problem comes when I reload the post to the quill editor and try to retrieve the source of the saved image when I delete it. I have tried with editor-change, then with text-change but I am not able to understand the format of the response of the event. I am retrieving the delta which contains all the elements in the editor, the old_delta, which I don´t understand what it is, is returning a simple line return when I delete the image, and the source, that is 'user', but the problem is that I need the source of the image to be able to process it in the server, delete it if the user wants to or keep it.

Any idea on how to do this?

[charrondev]

You might have to rephrase your issue a little bit. I'm having a bit of trouble following it.

As I understand, you're modifying quill's contents through innerHtml (not through insertText/insertEmbed) but by setting innerHTML somewhere inside of Quill, then trying to use the text-change/editor-change event to see what you put into it?

At least for us, our server side images use an custom ImageBlot, much like the one from Cloning Medium with Parchment. This Blot takes an object with data about the src and alt attributes of the image. For us Quill has nothing do with getting the end result for the URL.

A user can either use a file upload button, an embed dialogue box we created or copy paste the image in. I have some paste and drag/drop handlers here that we also use.

We take the file our URL, pass it through our API endpoint and use the resulting URL to insert an instance of our custom image blot. If you look in that file we actually have custom loading and error blots as well to represent the varies different phases of the process that replace each other.

---

The crux of this ___before___ inserting any image in the URL you need to have the URL of your image. Then you can use insertEmbed to insert a custom image blot.

[Mits-Soft]

Thanks for the answer, I had forgot the post.
I have the issue resolved. Simply, when I select the item I retrieve the image src and when the text-change event is triggered the selected image is included in an array of images to delete that is sent to the server when you submit the updated post. It was not so difficult. I thought I could read the deleted object from the event and it would be a little easier but...
I understand that the right approach is the Parchment object, I will take a look in Parchment when I have the time. Thank you.

[artur79]

@Mits-Soft I've got similar issue, how do you get image properties like src when deleting image in editor ?

[artur79]

ok, I think already found solution here https://codepen.io/quill/pen/pPxBPr

[songjihyeok]

@Mits-Soft would you show me the code?... i had trouble in checking the delete event and request 'delete to server

[ikeq]

Try this:

editor.on('text-change', (delta, oldContents, source) => {
  if (source !== 'user') return;

  const inserted = getImgUrls(delta);
  const deleted = getImgUrls(editor.getContents().diff(oldContents));
  inserted.length && console.log('insert', inserted)
  deleted.length && console.log('delete', deleted)
});

function getImgUrls(delta) {
  return delta.ops.filter(i => i.insert && i.insert.image).map(i => i.insert.image);
}

[theyashwantsoni]

ok, I think already found solution here https://codepen.io/quill/pen/pPxBPr

Thanks for the solution @artur79