6

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?

Adam Halasz
  • 57,421
  • 66
  • 149
  • 213
  • 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 Sep 11 '15 at 19:43

5 Answers5

8

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.

jhchen
  • 14,355
  • 14
  • 63
  • 91
5

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 }
            }
          }
        }
      }
    });
Reed
  • 1,515
  • 1
  • 21
  • 38
  • This will works only when we typing. The new line is keeping when we copy-paste the content – Nishal K.R Sep 19 '21 at 09:05
  • @NishalK.R yes, this code is specifically listening for the enter key being pressed. If you have newlines being pasted in, you can listen for the text change event and modify the insert text on the delta that occurs upon paste. – Reed Sep 19 '21 at 16:26
1

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.

tebe
  • 26
  • 5
0

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);
tkefauver
  • 491
  • 5
  • 19
0

You can use this to disable the enter key:

var keyboard = quill.getModule('keyboard');
keyboard.bindings['Enter'] = null;
keyboard.bindings['13'] = null;
Mohamad Hamouday
  • 2,070
  • 23
  • 20