CODEWITHSUNDEEP
angular
Hp19
Hp19

Reputation: 1

Quill editor not firing (change) event in when i change toolbar

I have below code for capturing quill editor event, but when i change something from toolbar that event is not capturing, how i get this event?

<quill-editor [formControl]="termsAndConditionsForm" 
              [styles]="{ flex: '1 1 auto' }" 
              (keyup)="contentChanged(termsAndConditions, $event)" 
              (onSelectionChanged)="onContentChanged($event)"
              class="quill card" fxFlex="auto" fxLayout="column">
</quill-editor>

Upvotes: 0

Views: 3343

Answers (1)

Maxime
Maxime

Reputation: 2234

You need to use onContentChanged event.

onSelectionChanged is only emitted for text selection changes.

onContentChanged emits when content changes. It returns undefined if nothing has changed but you even made a toolbar action.

So with your code it'll look like:

<quill-editor [formControl]="termsAndConditionsForm" 
              [styles]="{ flex: '1 1 auto' }" 
              (keyup)="contentChanged(termsAndConditions, $event)" 
              (onSelectionChanged)="onContentChanged($event)"
              (onContentChanged)="onContentChanged($event)
              class="quill card" fxFlex="auto" fxLayout="column">
</quill-editor>

onContentChanged = (event) =>{
  if (event.html) {
    // Do whatever you want here
    console.log('The content has changed', event.html);
  }
}

Here's a working example (check the messages in the console)

Upvotes: 1

Related Questions