javascript - Quill.js: How to prevent newline entry on Enter to submit the input?

Question

The problem:

I'm trying to create a Rich-Text Inline content-editable element with Quill.js. I'm having a hard time figuring out how to submit the body without the unnecessary newline added by the enter trigger which I want to use to submit the input.

What I tried:

 $(quill.editor.root).on('keydown', function (e) {
       if (e.keyCode === 13) {
           e.preventDefault();
           e.stopPropagation();
           submit();
       }
 });

Any ideas?

Answer 1

Quill also listens on keydown and since it's registered before your handler it will fire first. You can remove it via the keyboard module:

var keyboard = quill.getModule('keyboard');
delete keyboard.hotkeys[13];

A removeHotkey API has been added on the keyboard module but this is not released an any official version yet.

Answer 2

This is what I am doing in 2021 to prevent the enter key, and submitting the editor contents, but allowing a new line upon shift+enter:

    this.editor = new Quill(this.editorContainer.nativeElement, {
      placeholder: 'Message',
      modules: {
        keyboard: {
          bindings: {
            shift_enter: {
              key: 13,
              shiftKey: true,
              handler: (range, ctx) => {
                console.log(range, ctx); // if you want to see the output of the binding
                this.editor.insertText(range.index, '\n');
              }
            },
            enter: {
              key: 13,
              handler: () => { // submit form }
            }
          }
        }
      }
    });

Answer 3

Old question but still relevant and @jhcen's answer is now obsolete in Quill as of 2.0.0 at least.

To flat-out prevent quill from listening to certain key's you can do:

var keyboard = quill.getModule('keyboard');
keyboard.bindings['Enter'] = null;

But to be safer and encapsulate this you can store the bindings somewhere temporarily and restore after your code like this:

function disableKey(keyName) {
    var tempBindings = null;

    var keyboard = quill.getModule('keyboard');
    tempBindings = keyboard.bindings[keyName];
    keyboard.bindings[keyName] = null;

    return tempBindings;
}

function reenableKey(keyName,bindings) {
    var keyboard = quill.getModule('keyboard');
    keyboard.bindings[keyName] = bindings;
}

Usage:

let enterBindings = disableKey('Enter');
//do you stuff
reenableKey('Enter', enterBindings);