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?

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?

• javascript
• jquery
• newline
• enter
• quill

• So, you don't want any newlines in your text at all? Or you want to be able to use enter for two purposes? – aidan Commented Sep 11, 2015 at 19:43

5 Answers 5

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.

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

You can use this to disable the enter key:

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

There are really a lot of missleading answers here.

First: There is no stable version 2.0.0 of quill.js. The latest version is 1.3.7 as of May, 26th 2022. See: https://github.com/quilljs/quill/releases

Second: In the official docu it is written: "Some bindings are essential to preventing dangerous browser defaults, such as the enter and backspace keys. You cannot remove these bindings to revert to native browser behaviors. However since bindings specified in the configuration will run before Quill’s defaults, you can handle special cases and propagate to Quill’s otherwise.". See: https://quilljs.com/docs/modules/keyboard/#configuration

That means: The only working solution for me with current quill.js version 1.3.7 is the one from Reed answered Jun 29, 2021 at 2:40.

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