[英]Quill.js: How to prevent newline entry on Enter to submit the input?
问题:
我正在尝试使用Quill.js创建富文本内联内容可编辑元素。 我很难弄清楚如何在没有我想用来提交输入的输入触发器添加的不必要的换行符的情况下提交正文。
我尝试了什么:
$(quill.editor.root).on('keydown', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
submit();
}
});
有任何想法吗?
Quill 也会监听keydown
并且因为它是在你的处理程序之前注册的,所以它会首先触发。 您可以通过键盘模块将其删除:
var keyboard = quill.getModule('keyboard');
delete keyboard.hotkeys[13];
在键盘模块上添加了一个removeHotkey
API,但尚未发布任何正式版本。
这就是我在 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 }
}
}
}
}
});
老问题但仍然相关,@jhcen 的答案现在至少在 2.0.0 的 Quill 中已经过时。
要完全防止 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);
您可以使用它来禁用回车键:
var keyboard = quill.getModule('keyboard');
keyboard.bindings['Enter'] = null;
keyboard.bindings['13'] = null;
这里确实有很多误导性的答案。
第一: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 回答的解决方案。
您可以使用String#slice
删除结尾的换行符。
如果editor.getText()
返回'here is some text\\n'
,则editor.getText().slice(0,-1)
返回'here is some text'
。
那是你要的吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.