🚀 BlockNote AI is here! Access the early preview.
BlockNote Docs/Features/服务器端处理

服务器端处理

虽然你可以在客户端使用 BlockNoteEditor,但是你也可以使用来自 @blocknote/server-utilServerBlockNoteEditor 在服务器端处理 BlockNote 文档。

例如,使用以下代码在服务器端将 BlockNote 文档转换为 HTML:

import { ServerBlockNoteEditor } from "@blocknote/server-util";

const editor = ServerBlockNoteEditor.create();
const html = await editor.blocksToFullHTML(blocks);

ServerBlockNoteEditor.create 接受与 useCreateBlockNoteBlockNoteEditor.create 相同的 BlockNoteEditorOptions(参见文档),
因此你可以将同样的配置(例如自定义 schema)传递给服务器端的 BlockNote 编辑器,和客户端保持一致。

转换 Blocks 的函数

ServerBlockNoteEditor 提供了与客户端编辑器相同的 Blocks 转换函数(HTMLMarkdown):

  • blocksToFullHTML
  • blocksToHTMLLossytryParseHTMLToBlocks
  • blocksToMarkdownLossytryParseMarkdownToBlocks

Yjs 处理

此外,ServerBlockNoteEditor 提供了处理 Yjs 文档的函数,适用于你使用 Yjs 协作时:

  • yDocToBlocksyXmlFragmentToBlocks:用于将 Yjs 文档或 XML Fragment 转换为 BlockNote blocks
  • blocksToYDocblocksToYXmlFragment:用于将 BlockNote 文档(blocks)转换为 Yjs 文档或 XML Fragment

React 兼容性

如果你在 React 中使用了自定义 schema,你也可以在服务器端使用同样的 schema。
blocksToFullHTML 这样的函数会使用你的自定义 React 渲染函数将 blocks 导出为 HTML,就像它们在客户端一样。
不过,可能你的 React 组件需要访问 React 上下文(例如主题或本地化上下文)。

针对这些情况,我们提供了一个函数 withReactContext,允许你向服务器端编辑器传递 React 上下文。
下面的示例演示了如何在 React 上下文 YourContext 环境中导出 BlockNote 文档为 HTML,
这样即使是需要 YourContext 的 React 自定义 Blocks 也能被正确导出:

const html = await editor.withReactContext(
  ({ children }) => (
    <YourContext.Provider value={true}>{children}</YourContext.Provider>
  ),
  async () => editor.blocksToFullHTML(blocks),
);