Quill JS - check if text change on Form Submit

Question

I am using Quill (Rich Text) and need to find a way to checking to see if the text has changed when the page does a form submit. I am quite new to using Quill and have been looking at the events here . Using the text-change triggers everytime the text is changed (obviously) but I have other Form Input controls on the page which are checked on form submit to see if they have changed... I need my RTF boxes to do the same.

EDIT

I have managed to get the Event Firing using the example below. My problem now is that the event appears to trigger even when the editor is pre-populated on page load. I dont want to acknowledge these initial loads, only if the text has been changed by a user.

Answer 1

Two ways to do so:

1) listen for quill changes and if any occurred, raise a flag telling your form content has changed (flow: if you add a char, then delete it, your flag would be true even if resulting content is the same)

Using :

let changes = false
quill.on('text-change', function(delta, oldDelta, source) {
  changes = true
})

2) comparing two snapshots of the document to detect front-end if changes occurred. You could either compare strings (with quill.getText() ) this is the simplest, but you could miss lot of things, I would recommend to compare objects (with quill.getContents() ) and use lodash or other deep equality objects method check.

Using:

const initialContents = quill.getContents()
const beforeSubmitContents = quill.getContents()
const hasChanged = _.isEqual(initialContents.ops, beforeSubmitContents.ops)

Answer 2

for detect if exis change only implement this function

quill.on('text-change', function(delta, oldDelta, source) {
  if (source == 'api') {
    console.log("An API call triggered this change.");
  } else if (source == 'user') {
    console.log("A user action triggered this change.");
  }
});

this function detect if write or have a change on editor, detect if has change on your words or font or image...etc.. !! In this case i use the example of official page: page official result :