Angular 4+中无法监听QuillJS编辑器回车键事件的求助

我懂你遇到的困扰——用QuillJS的addBinding监听其他按键都正常，唯独回车键没反应，查了文档和相关帖子还是没搞明白对吧？这其实是因为Quill默认已经给回车键绑定了核心的编辑行为（比如创建新段落、在列表中新增项目），普通的绑定会被内置逻辑覆盖掉，得用针对性的方式来处理。

下面给你两个实用的解决方案，附代码示例：

方案1：保留默认换行行为，同时添加自定义逻辑 #

如果你只是想在用户按下回车键时额外执行一些操作（比如记录日志、同步数据），不需要改变默认的换行效果，可以这么写：

// 初始化Quill编辑器
const quill = new Quill('#editor', {
  theme: 'snow'
});

// 绑定回车键事件
quill.keyboard.addBinding({
  key: 'Enter', // 指定监听回车键
  handler: function(range, context) {
    // 这里写你的自定义逻辑
    console.log('用户按下了回车键！当前光标位置：', range.index);
    
    // 不要返回false，这样Quill的默认换行行为会正常执行
  }
});

方案2：完全自定义回车键行为 #

如果你想替换Quill默认的回车键行为（比如把“创建新段落”改成“插入换行符”），可以加上preventDefault: true来阻止默认逻辑：

const quill = new Quill('#editor', {
  theme: 'snow'
});

quill.keyboard.addBinding({
  key: 'Enter',
  preventDefault: true, // 阻止Quill的默认回车键行为
  handler: function(range, context) {
    // 自定义逻辑：插入一个换行符，而不是新段落
    quill.insertText(range.index, '\n');
    // 把光标移动到换行后的位置
    quill.setSelection(range.index + 1);
    
    // 你也可以在这里添加其他操作，比如触发自定义事件
    // document.dispatchEvent(new CustomEvent('quill-enter-pressed'));
  }
});

关键说明 #

为什么之前的尝试无效？因为Quill的内置按键绑定优先级比你直接用addBinding注册的更高。通过quill.keyboard.addBinding注册的绑定，会和内置逻辑处于同一层级，再配合preventDefault就能覆盖默认行为。

另外，你还可以通过context参数判断当前编辑环境（比如是否在列表、代码块中），实现更精准的逻辑：

quill.keyboard.addBinding({
  key: 'Enter',
  handler: function(range, context) {
    if (context.format.list) {
      console.log('在列表中按下了回车键');
    } else {
      console.log('在普通段落中按下了回车键');
    }
  }
});

内容的提问来源于stack exchange，提问作者adarsh