服务器端处理
虽然你可以在客户端使用 BlockNoteEditor,但是你也可以使用来自 @blocknote/server-util 的 ServerBlockNoteEditor 在服务器端处理 BlockNote 文档。
例如,使用以下代码在服务器端将 BlockNote 文档转换为 HTML:
import { ServerBlockNoteEditor } from "@blocknote/server-util";
const editor = ServerBlockNoteEditor.create();
const html = await editor.blocksToFullHTML(blocks);ServerBlockNoteEditor.create 接受与 useCreateBlockNote 和 BlockNoteEditor.create 相同的 BlockNoteEditorOptions(参见文档),
因此你可以将同样的配置(例如自定义 schema)传递给服务器端的 BlockNote 编辑器,和客户端保持一致。
转换 Blocks 的函数
ServerBlockNoteEditor 提供了与客户端编辑器相同的 Blocks 转换函数(HTML,Markdown):
blocksToFullHTMLblocksToHTMLLossy和tryParseHTMLToBlocksblocksToMarkdownLossy和tryParseMarkdownToBlocks
Yjs 处理
此外,ServerBlockNoteEditor 提供了处理 Yjs 文档的函数,适用于你使用 Yjs 协作时:
yDocToBlocks或yXmlFragmentToBlocks:用于将 Yjs 文档或 XML Fragment 转换为 BlockNote blocksblocksToYDoc或blocksToYXmlFragment:用于将 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),
);