CODEWITHSUNDEEP
javascriptquill
Eduardo Alvarez
Eduardo Alvarez

Reputation: 234

Listen to key press Enter in Quill.js

According to the documentation, Quill can handle the Enter key but I can't make it work.

I have followed these steps listed on their site:

  1. Import Keyboard module: const Keyboard = Quill.import('modules/keyboard'); Quill.js Extension import documentation.
  2. Add the custom event called key binding. Quill.js Key binding documentation
  3. Call a function to handle the event.

My code is the following:

quill.keyboard.addBinding({ key: Keyboard.keys.ENTER, handler: function(range, context) { console.log('Enter Key!!!'); result.innerText = 'Key presset = ENTER'; } })

Code example

I have tried on Chrome (latest version) and Safari 11.0.3 on MacOS High Sierra 10.13.3

Upvotes: 3

Views: 11564

Answers (2)

Chris Fremgen
Chris Fremgen

Reputation: 5368

Here's how to prevent future bubbling of the enter key. You have to put your handler first, then return true if you want to continue bubbling.

quillEditor.keyboard.bindings[13].unshift({
        key: 13,
        handler: (range, context) => {
            if (this.popupVisible) {
                return false;
            }
            return true;
        }
    });

Upvotes: 5

jhchen
jhchen

Reputation: 14757

Not sure if you want the Enter key or the Space key but you were on the right page with the Keyboard module but missed this key sentence:

The key is the JavaScript event key code, but string shorthands are allowed for alphanumeric keys and some common keys.

So you can either specify 13 or 'enter' if you meant the Enter key or 32 if you meant the Space key (sadly there is no shortcut for the Space key).

The upcoming 2.0 version (no public timeline) will also support the new easier to use KeyboardEvent.key but currently you should use keyCode.

Upvotes: 5

Related Questions