2

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.

CJH
  • 1,266
  • 2
  • 27
  • 61
  • Could you please help with below question: https://stackoverflow.com/questions/63135622/quill-editor-check-for-change-in-content-in-angular – Sumit Das Jul 28 '20 at 13:48

2 Answers2

4

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)
guillaumepotier
  • 7,369
  • 8
  • 45
  • 72
  • Thanks for this...! I am not in work to try it out for a week or so but this seems to make sense. Hopefully will get it implemented and feed back. – CJH May 11 '18 at 21:23
  • Many thanks for this again! I am just trying to implement now but not sure I am getting this right. I have a javascript method that is called to create some events, I basically want to apply the above to all uses of quill ($j('.ql-editor').on('text-change'....) but I can see the event is being created against the div - but nothing happens when I try triggering the event. I will update my Question with what I am doing. – CJH May 31 '18 at 09:50
  • I have now successfully applied this and got the event triggering. What i am finding however is that it is getting fired when the text box is first auto-populated with data from "" to "some data". If there is no data on load then the event is not triggered - as expected. Is there an easy way to make sure the event is only triggered when a change is made by the user and not by the field being auto-populated. i have checked the source attribute and this is always showing 'user'. – CJH May 31 '18 at 13:51
  • I might add that I have several quill text boxes on a page which is why I have gone down the event route.. It seemed easier! I may be missing something from your other suggestion that might help but cannot see that just yet. – CJH May 31 '18 at 13:54
  • @CJH maybe check the `source` of the event ? on loading, it might originate from `api` while edited by an human it will originate from `user` ? – guillaumepotier Jun 01 '18 at 14:38
  • They were both coming from User :( – CJH Jun 01 '18 at 22:56
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 : Result Example

Diego Avila
  • 700
  • 7
  • 24