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 }
            }
          }
        }
      }
    });