在 Quill.js 中，我希望按 Enter 提交消息并按 Shift + Enter 创建新行

Question

我有一个 React 应用程序，带有 Quill 版本 1.3.7。

对于上下文/复习： Quill 文本编辑器中 Enter 的默认行为是创建一个新行。我想改变这一点。

我编写了以下函数，以便当用户按 Enter 时，它会提交消息。但事实证明，它既发送消息 又创建新行。我不希望它创建换行符（我必须阻止创建换行符，而不是让它创建新行然后将其删除）。

const handleKeyDown = (e) => {
    if (e.keyCode === 13 && !e.shiftKey) {
      e.preventDefault(); // Prevent the default behavior of adding a new line
      const strippedHTML = newMessage.replace(/(<p><br><\/p>)+/gi, '').trim();
      if (strippedHTML || /^\s*$/.test(strippedHTML)) {
        createMessage();
        console.log(newMessage)
      }
    }
  };

我的 Quill 模块如下所示：

const modules = {
   toolbar: [
   ['bold', 'italic', 'underline', 'strike', 'blockquote'],
   [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
   ['link', 'image']
   ],
};

添加以下内容会破坏编辑器（它从前端消失，没有控制台错误）

const modules = {
   toolbar: [
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      ['link', 'image']
   ],
   keyboard:{
      bindings:{
         custom: {  //tried changing this to enter, still no luck
            key: 13,
            handler: function() {
               // do nothing
            }
          },
      }
  }
  };

我的鹅毛笔组件：

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

<button className="sendButton" onClick={createMessage}>
    <img src={sendIcon} alt="Send" />
</button>

我感谢任何帮助/建议！

我查看了 Stackoverflow 和 Github 上有关此问题的几篇帖子，但我无法自行解锁。我也尝试过聊天 GPT 吗？是的🫠不走运。

我读了 Quill 的

关于键盘的文档，他们提到有几个键具有可以覆盖的默认功能，但我很难使用他们建议的方法来覆盖 Enter 的功能。

Answer 1

const modules = useMemo(
        () => ({
            toolbar: [
                ['bold', 'italic', 'underline','blockquote', 'code-block'],
            ],
            keyboard: {
                bindings: {
                    enter: {
                        key: 13,
                        handler: function () {
                            return false;
                        }
                    },
                }
            },
        }),
        [],
    );

输入不工作