Quill.js: 如何防止在Enter 上输入换行符以提交输入？

Question

问题：

我正在尝试使用 Quill.js 创建富文本内联内容可编辑元素。我很难弄清楚如何在没有我想用来提交输入的输入触发器添加不必要的换行符的情况下提交正文。

我试过的：

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

有什么想法吗？

Answer 1

Quill 还监听 keydown，因为它在您的处理程序之前注册，所以它会先触发。您可以通过键盘模块将其删除：

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

在键盘模块上添加了removeHotkey API，但尚未发布任何正式版本。

Answer 2

这就是我在 2021 年所做的，以防止回车键，并提交编辑器内容，但允许在 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

老问题但仍然相关，@jhcen 的回答至少从 2.0.0 开始在 Quill 中已经过时了。

要完全防止羽毛笔监听某些键，您可以这样做：

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

但为了更安全和封装它，您可以将绑定临时存储在某个地方并在您的代码之后恢复，如下所示：

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

用法：

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

Answer 4

您可以使用它来禁用回车键：

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

Answer 5

这里确实有很多误导性的答案。

首先：没有quill.js的稳定版2.0.0。截至 2022 年 5 月 26 日，最新版本为 1.3.7。请参阅：https://github.com/quilljs/quill/releases

其次：官方文档中是这样写的： “一些绑定对于防止危险的浏览器默认设置是必不可少的，例如回车键和退格键。您不能删除这些绑定以恢复到本机浏览器行为。但是由于配置中指定的绑定将运行在 Quill 的默认设置之前，您可以处理特殊情况并传播到 Quill 的其他情况。”。参见：https://quilljs.com/docs/modules/keyboard/#configuration

这意味着：当前quill.js版本1.3.7对我来说唯一可行的解决方案是Reed于2021年6月29日在2:40.

Quill.js: 如何防止在Enter 上输入换行符以提交输入？

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

javascript

jquery

newline

enter

quill