如何在TipTap编辑器中保留粘贴文本的换行符？

即使是TipTap编辑器的演示环境，也会出现这样的问题：当你粘贴带有换行符的文本时，编辑器会自动移除换行符，最终显示无换行的连续文本。

要实现粘贴时保留换行符，可以通过自定义handlePaste方法覆盖默认粘贴行为，具体实现代码如下：

const editor = {
  editorProps: {
    handlePaste: (view, event, slice) => {
      // 阻止默认粘贴行为
      event.preventDefault();

      // 从剪贴板获取纯文本内容
      const text = event.clipboardData?.getData("text/plain");

      if (text) {
        // 按换行符分割文本
        const lines = text.split(/\n/);

        // 创建事务对象处理文本插入
        const tr = view.state.tr;
        lines.forEach((line, index) => {
          // 插入当前行文本
          tr.insertText(line);

          // 除了最后一行，其余行插入后添加段落换行
          if (index < lines.length - 1) {
            tr.split(tr.selection.from);
          }
        });

        // 分发事务，更新编辑器状态
        view.dispatch(tr);
      }

      return true;
    },
  },
}

关键逻辑说明： #

• 先阻止默认粘贴行为，避免编辑器自动格式化文本
• 从剪贴板读取纯文本内容，确保能获取到原始换行符
• 将文本按换行符分割成多行，逐行插入编辑器
• 每插入一行（最后一行除外），通过split方法创建新段落，实现换行效果

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