Quill.js:如何阻止Enter上的换行输入提交输入?

时间:2015-09-10 07:41:33

标签: javascript jquery newline enter quill

问题:

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

我尝试了什么:

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

有什么想法吗?

4 个答案:

答案 0 :(得分:2)

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

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

键盘模块上添加了removeHotkey API,但尚未发布任何官方版本。

答案 1 :(得分:0)

这是我在 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 }
            }
          }
        }
      }
    });

答案 2 :(得分:0)

老问题但仍然相关,@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);

答案 3 :(得分:-1)

您可以使用String#slice删除最后的换行符。

如果editor.getText()返回'here is some text\n',则editor.getText().slice(0,-1)会返回'here is some text'

这就是你想要的吗?