React中Quill编辑器Enter提交消息、Shift+Enter换行实现问题

问题核心 #

直接在onKeyDown中调用e.preventDefault()无法阻止Quill默认换行，是因为Quill内部键盘事件优先级更高；错误的键盘绑定配置会导致编辑器初始化失败（前端消失），根源是绑定结构不符合Quill 1.3.7的要求。

正确解决方案 #

方案1：规范配置Quill键盘绑定（推荐） #

在Quill模块的keyboard.bindings中，按正确结构覆盖Enter键行为，通过返回false阻止默认换行：

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
    ['link', 'image']
  ],
  keyboard: {
    bindings: {
      // 覆盖默认Enter键行为，仅未按Shift时生效
      enter: {
        key: 13,
        shiftKey: false,
        handler: () => {
          const strippedHTML = newMessage.replace(/(<p><br><\/p>)+/gi, '').trim();
          if (strippedHTML || /^\s*$/.test(strippedHTML)) {
            createMessage();
          }
          return false; // 阻止Quill默认换行逻辑
        }
      }
    }
  }
};

移除ReactQuill组件上的onKeyDown属性，避免事件冲突：

<ReactQuill
  theme="snow"
  value={newMessage}
  onChange={setNewMessage}
  modules={modules}
  formats={formats}
  placeholder="What's on your mind?"
/>

方案2：通过Quill实例动态修改绑定 #

若方案1仍有问题，可在编辑器初始化后，通过实例直接修改键盘绑定：

const handleEditorChange = (content, delta, source, editor) => {
  setNewMessage(content);
  // 仅初始化时设置一次绑定，避免重复执行
  if (source === 'user' && !editor.__keyBindingInited) {
    editor.keyboard.bindings[13] = [{
      key: 13,
      shiftKey: false,
      handler: () => {
        const strippedHTML = content.replace(/(<p><br><\/p>)+/gi, '').trim();
        if (strippedHTML || /^\s*$/.test(strippedHTML)) {
          createMessage();
        }
        return false;
      }
    }];
    editor.__keyBindingInited = true;
  }
};

// 组件使用
<ReactQuill
  theme="snow"
  value={newMessage}
  onChange={handleEditorChange}
  modules={modules}
  formats={formats}
  placeholder="What's on your mind?"
/>

原配置问题说明 #

之前添加键盘绑定后编辑器消失，是因为Quill 1.3.7要求keyboard.bindings的结构为键对应绑定对象数组，而你写的是单对象（custom: { ... }），导致模块初始化出错，进而让整个编辑器渲染失败。

额外提示 #

• 若需保留Shift+Enter换行功能，无需额外配置，默认行为会自动生效；
• 提交消息后记得清空newMessage状态，避免重复提交。

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