协作编辑

bunnpmpnpmyarn
pnpm add @platejs/yjs
Copy

bunnpmpnpmyarn
pnpm add @hocuspocus/provider
Copy

bunnpmpnpmyarn
pnpm add y-webrtc
Copy

Copyimport { YjsPlugin } from '@platejs/yjs/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    YjsPlugin,
  ],
  // 重要：使用 Yjs 时需跳过 Plate 的默认初始化
  skipInitialization: true,
});

Copyimport { YjsPlugin } from '@platejs/yjs/react';
import { createPlateEditor } from 'platejs/react';
import { RemoteCursorOverlay } from '@/components/ui/remote-cursor-overlay';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    YjsPlugin.configure({
      render: {
        afterEditable: RemoteCursorOverlay,
      },
      options: {
        // 配置本地用户光标外观
        cursors: {
          data: {
            name: '用户名', // 替换为动态用户名
            color: '#aabbcc', // 替换为动态用户颜色
          },
        },
        // 配置提供者（所有提供者共享同一个 Y.Doc 和 Awareness 实例）
        providers: [
          // Hocuspocus 提供者示例
          {
            type: 'hocuspocus',
            options: {
              name: '我的文档ID', // 文档唯一标识
              url: 'ws://localhost:8888', // Hocuspocus 服务地址
            },
          },
          // WebRTC 提供者示例（可与 Hocuspocus 同时使用）
          {
            type: 'webrtc',
            options: {
              roomName: '我的文档ID', // 需与文档标识一致
              signaling: ['ws://localhost:4444'], // 可选：信令服务器地址
            },
          },
        ],
      },
    }),
  ],
  skipInitialization: true,
});

Copyimport { Plate } from 'platejs/react';
import { EditorContainer } from '@/components/ui/editor';
 
return (
  <Plate editor={editor}>
    <EditorContainer>
      <Editor />
    </EditorContainer>
  </Plate>
);

Copyimport React, { useEffect } from 'react';
import { YjsPlugin } from '@platejs/yjs/react';
import { useMounted } from '@/hooks/use-mounted'; // 或自定义挂载检查
 
const MyEditorComponent = ({ documentId, initialValue }) => {
  const editor = usePlateEditor(/** 前文配置 **/);
  const mounted = useMounted();
 
  useEffect(() => {
    if (!mounted) return;
 
    // 初始化 Yjs 连接并设置初始状态
    editor.getApi(YjsPlugin).yjs.init({
      id: documentId,          // Yjs 文档唯一标识
      value: initialValue,     // Y.Doc 为空时的初始内容
    });
 
    // 清理：组件卸载时销毁连接
    return () => {
      editor.getApi(YjsPlugin).yjs.destroy();
    };
  }, [editor, mounted]);
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
};

Copyimport React from 'react';
import { YjsPlugin } from '@platejs/yjs/react';
import { usePluginOption } from 'platejs/react';
 
function EditorStatus() {
  // 直接访问提供者状态（只读）
  const providers = usePluginOption(YjsPlugin, '_providers');
  const isConnected = usePluginOption(YjsPlugin, '_isConnected');
 
  return (
    <div>
      {providers.map((provider) => (
        <span key={provider.type}>
          {provider.type}: {provider.isConnected ? '已连接' : '未连接'} ({provider.isSynced ? '已同步' : '同步中'})
        </span>
      ))}
    </div>
  );
}
 
// 添加连接事件处理器：
YjsPlugin.configure({
  options: {
    // ... 其他配置
    onConnect: ({ type }) => console.debug(`${type} 提供者已连接！`),
    onDisconnect: ({ type }) => console.debug(`${type} 提供者已断开`),
    onSyncChange: ({ type, isSynced }) => console.debug(`${type} 提供者同步状态: ${isSynced}`),
    onError: ({ type, error }) => console.error(`${type} 提供者错误:`, error),
  },
});