javascript - Quill JS - check if text change on Form Submit - Stack Overflow

admin管理员组

文章数量:1279176

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.

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.

• javascript
• jquery
• quill
• textchanged

Share Improve this question Follow edited May 31, 2018 at 15:13 CJH asked Apr 30, 2018 at 19:44 CJHCJH 1,59433 gold badges3535 silver badges8080 bronze badges 1

• Could you please help with below question: stackoverflow./questions/63135622/… – Sumit Das Commented Jul 28, 2020 at 13:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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) paring two snapshots of the document to detect front-end if changes occurred. You could either pare strings (with quill.getText()) this is the simplest, but you could miss lot of things, I would remend to pare 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)

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 :

本文标签： javascriptQuill JScheck if text change on Form SubmitStack Overflow