实现方案概述 #

基于Lexical的自定义节点系统，创建PageBreakNode处理手动分页逻辑，配合CSS实现页面分隔样式与自动分页效果，同时通过插件提供插入分页符的交互能力。

1. 创建PageBreak自定义节点 #

自定义节点负责渲染分页符标识，并处理Lexical的序列化/反序列化逻辑：

import { LexicalNode, $createParagraphNode, $isParagraphNode } from 'lexical';

export class PageBreakNode extends LexicalNode {
  static getType() {
    return 'page-break';
  }

  static clone(node) {
    return new PageBreakNode(node.__key);
  }

  static create() {
    return new PageBreakNode();
  }

  constructor(key) {
    super(key);
  }

  exportDOM() {
    const div = document.createElement('div');
    div.className = 'lexical-page-break';
    div.innerHTML = '<hr class="page-break-line"><span class="page-break-label">分页符</span>';
    return { element: div };
  }

  importDOM() {
    return {
      div: (el) => {
        if (el.classList.contains('lexical-page-break')) {
          return { node: PageBreakNode.create() };
        }
        return null;
      },
    };
  }

  canBeEmpty() {
    return true;
  }

  isInline() {
    return false;
  }
}

注册节点到编辑器配置：

// 编辑器初始化配置
const editorConfig = {
  nodes: [PageBreakNode],
  // 其他配置项（如theme、onError等）
};

2. 实现PageBreak插件与插入逻辑 #

插件注册命令处理分页符插入，并提供工具栏交互：

import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getSelection, $createRangeSelection, createCommand, COMMAND_PRIORITY_EDITOR } from 'lexical';
import { PageBreakNode } from './PageBreakNode';

export const INSERT_PAGE_BREAK_COMMAND = createCommand('INSERT_PAGE_BREAK_COMMAND');

export function PageBreakPlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerCommand(
      INSERT_PAGE_BREAK_COMMAND,
      () => {
        editor.update(() => {
          const selection = $getSelection();
          if (!selection) return false;

          const pageBreakNode = PageBreakNode.create();
          const selectedNode = selection.getNodes()[0];
          
          // 处理插入位置，确保分页符后自动创建新段落
          if (selectedNode && $isParagraphNode(selectedNode.getParentOrThrow())) {
            selectedNode.getParentOrThrow().insertAfter(pageBreakNode);
            const newParagraph = $createParagraphNode();
            pageBreakNode.insertAfter(newParagraph);
            $setSelection($createRangeSelection().collapse(newParagraph, 0));
          } else {
            selection.insertNodes([pageBreakNode, $createParagraphNode()]);
          }
        });
        return true;
      },
      COMMAND_PRIORITY_EDITOR
    );
  }, [editor]);

  return null;
}

工具栏插入按钮 #

添加按钮触发分页符插入：

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { INSERT_PAGE_BREAK_COMMAND } from './PageBreakPlugin';

export function PageBreakButton() {
  const [editor] = useLexicalComposerContext();

  const insertPageBreak = () => {
    editor.dispatchCommand(INSERT_PAGE_BREAK_COMMAND);
  };

  return (
    <button onClick={insertPageBreak} className="lexical-toolbar-btn" title="插入分页符">
      分页符
    </button>
  );
}

3. CSS样式实现页面分隔与溢出处理 #

通过CSS模拟纸张样式，实现分页符可视化与自动分页：

/* 编辑器容器：提供纸张间距背景 */
.lexical-editor-wrapper {
  padding: 2rem;
  background-color: #f0f0f0;
}

/* 单个页面样式：模拟A4纸张 */
.lexical-editor {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 2rem;
  padding: 20mm;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 分页符样式 */
.lexical-page-break {
  position: relative;
  margin: 1.5rem 0;
}

.page-break-line {
  border: 0;
  border-top: 1px dashed #666;
  width: 100%;
}

.page-break-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 0 1rem;
  color: #666;
  font-size: 0.85rem;
}

/* 强制分页：手动插入的分页符后强制新起一页 */
.lexical-page-break {
  break-after: page;
  page-break-after: always;
}

/* 自动分页：长内容超出页面高度时自动拆分 */
.lexical-editor .lexical-content {
  display: grid;
  grid-template-rows: repeat(auto-fill, 257mm); /* 页面高度减去内边距 */
  gap: 2rem;
}

关键注意事项 #

• 确保编辑器容器的CSS正确设置，模拟真实纸张的尺寸与边距
• 分页符节点需设置为块级元素，避免与行内内容混合
• 自动分页依赖CSS的break-after和网格布局，若需更精细的分页控制（如避免标题跨页），可添加额外CSS规则（如break-inside: avoid）

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