How do I use the Quill event for text-change?

hjohnsick

I would like to listen to the quill text-change event but I am not sure how to do that. In my editor, I am setting the type of one of my fields to quill and the quill editor displays when the editor is open. Could someone provide me with an example of how to get the quill instance so I can use the text-change event? The error I get is quill is not defined.

quill.on('text-change', function () {
            if (messageHtml.value && messageHtmlError.error()) {
                messageHtmlError.error('');
            }
        });

I want to be able to run this when my editor is open.

In the documentation, https://editor.datatables.net/plug-ins/field-type/editor.quill, under Methods it says: quill: Get the Quill instance used for this field, so you can add additional modules, or perform other API operations on it directly.

kthorngren

I'm not sure what you want to do in this event. Maybe there is an Editor event you can use, submitComplete for example.

The docs have this:

Methods
This field type supports the following methods, in addition to the default field() methods:
quill: Get the Quill instance used for this field, so you can add additional modules, or perform other API operations on it directly.

It looks like you will need to use the field() API to get the field then chain the quill method. Something like this:

editor.field( "my_quill_filed" ).quill().on('text-change', function () {
            if (messageHtml.value && messageHtmlError.error()) {
                messageHtmlError.error('');
            }
        });

Kevin

kthorngren

I tried the above code snippet. It looks like the event fires when the editor form is open, likely do to the plugin setting the text to the field value. Then fires when changes are made. So it may fire twice for you when editing.

Kevin

kthorngren

Possibly it might be better to update the quill plugin to turn on the text-change event after the field value is set. When the field is submitted turn off the event. Something like this:

    get: function ( conf ) {
        // Disable quill text-change event after submitting
        conf._quill.off('text-change');
        return conf._quill.getText();
    },
  
    set: function ( conf, val ) {
        conf._quill.setText( val !== null ? val : '' );

        // Enable quill text-change event after setting the initial field value
        conf._quill.on('text-change', function () {
            console.log('text-change')
        });
    },

Note the text-change event fires each time something is typed in the quill field.

Kevin

hjohnsick

@kthorngren Thank you for your help! Using the field api was exactly what I needed to get this working.