查看Quill官方开发文档,自己定义回车是br

2026-08-29 · 28 阅读

Quill 最新版(2.0)不能直接通过配置实现回车创建 <br> 标签,但可以通过自定义 Blot 和键盘绑定模块实现。在 Quill 2.0 中,默认回车行为就是创建新段落 <p> ⚙️ 实现方案(基于 Quill 2.0)

可以从官方文档的 Keyboard 模块入手,结合社区方案来定制这个行为。核心思路是:创建一个代表软换行的自定义 Blot,然后覆盖 Shift+Enter(或单独 Enter)的键盘绑定。 1. 创建自定义 Blot(核心步骤)

你需要继承 Embed 并注册一个新的 Blot,让 Quill 知道如何用 <br> 标签来表示一个“软换行”。import Quill from 'quill';
import { Embed } from 'parchment'; // 或从 'quill/blots/embed' 导入
class SoftBreak extends Embed {
static blotName = 'softbreak'; // 内部名称
static tagName = 'br'; // 对应的 HTML 标签
}// 注册时必须使用第二个参数 true 来强制覆盖Quill.register(SoftBreak, true);

2. 配置键盘绑定

在初始化编辑器的 modules 中配置 keyboard,覆盖 Shift+Enter(或你需要的按键组合)的行为。const quill = new Quill('#editor', {
theme: 'snow',
modules: {
keyboard: {
bindings: {
// 使用 'Enter' 字符串,而不是数字 13 (Quill 2.0 推荐方式)
'soft-break': {
key: 'Enter',
shiftKey: true, // 指定为 Shift+Enter
handler: function(range, context) {
// 在当前光标位置插入自定义的 softbreak
this.quill.insertEmbed(range.index, 'softbreak', true);
// 将光标移动到插入位置之后
this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
}
}
}
}
}
});

关键点说明:

使用键名而非键码:在 Quill 2.0 中,key 应使用 'Enter' 这样的字符串,而不是数字 13,这是官方推荐的做法。

覆盖注册:给 Quill.register() 传入 true 作为第二个参数非常重要,可以确保你的自定义 Blot 能生效。

3. (可选)处理粘贴的内容

如果希望从外部粘贴的 <br> 也被识别为软换行,可以在 clipboard 模块中添加一个匹配器:

const Delta = Quill.import('delta');
const quill = new Quill('#editor', {
modules: {
// ...
clipboard: {
matchers: [
// 当遇到 BR 标签时,转换为 softbreak
['BR', (node, delta) => new Delta().insert({ softbreak: true })]
]
}
}
});
责任编辑:管理员 更新:2026-08-30 14:37:23