Plate 如何在 Node.js 脚本中运行无 React 的内容处理【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate在迁移、校验、序列化或批量修改 Plate 文档时你通常不需要浏览器和 React 运行时只需要一个能在 Node.js 脚本里读取、转换并输出编辑器值的运行时。Plate 为此提供了非 React 入口从platejs导入createSlateEditor创建编辑器实例再通过editor.api、editor.tf与platejs/markdown的序列化函数完成内容处理。完成本文后你可以在 Node.js 脚本中完成三件事提取纯文本、读写 Markdown、对整篇文档执行批量转换。关键限制Node.js 中只使用基础导入官方安装文档 Node.js 指南 明确警告在 Node.js 脚本中不要从platejs/react或任何platejs/*/react子路径导入应始终使用基础导入。也就是说Node.js 脚本里不能用platejs/react中的createPlateEditor应改用platejs的createSlateEditor。即使某个插件同时提供基础入口和 React 入口Node.js 中也应选择基础入口。文档给出的三种运行时边界如下运行时导入来源适用场景Node.js 脚本platejs、platejs/*迁移、校验、序列化、搜索索引React 编辑器platejs/react、platejs/*/react可编辑 UI、hooks、渲染组件、工具栏行为静态渲染platejs/static服务端渲染的只读内容本文只覆盖第一行Node.js 脚本场景。准备安装依赖在一个使用 npm 的项目中安装核心运行时和管线需要的包npm install platejs platejs/basic-nodes platejs/markdown各包职责来自安装文档包提供platejscreateSlateEditor、核心编辑器 API、核心段落行为platejs/basic-nodes基础标题、引用块、水平线、文本标记platejs/markdownMarkdown 序列化、反序列化与MarkdownPluginAPI基础节点也可以用单个插件注册如BaseBoldPlugin、BaseH1Plugin中文版指南 node.cn.mdx 展示了这种写法下面的主路径使用聚合插件BaseBasicBlocksPlugin和BaseBasicMarksPlugin。第一步创建非 React 编辑器并提取文本文档把示例脚本放在scripts/process-content.ts。createSlateEditor是框架无关的它创建的编辑器暴露与 React 版相同的editor.api和editor.tf接口但不挂载任何 React 树。import type { Value } from platejs; import { BaseBasicBlocksPlugin, BaseBasicMarksPlugin, } from platejs/basic-nodes; import { createSlateEditor } from platejs; const value: Value [ { children: [{ text: Document Title }], type: h1, }, { children: [ { text: With }, { bold: true, text: bold }, { text: text. }, ], type: p, }, ]; const editor createSlateEditor({ plugins: [BaseBasicBlocksPlugin, BaseBasicMarksPlugin], value, }); const plainText editor.api.string([]); console.info(plainText);要点value是 Plate 内容结构节点数组可以直接从你的存储或 CMS 中取得editor.api.string([])读取整个文档的文本[]表示根路径运行后console.info会把文档全文打印到控制台这是该步骤的验证方式——看到按块组织的纯文本输出说明编辑器创建与读取成功。文档未给出固定输出字符串块之间的连接格式以实际输出为准。第二步在脚本中读写 Markdown需要 Markdown 互转时把MarkdownPlugin加入插件列表然后可以通过editor.getApi(MarkdownPlugin)使用插件 API也可以直接调用deserializeMd和serializeMd。文档示例scripts/markdown-io.tsimport { BaseBasicBlocksPlugin, BaseBasicMarksPlugin, } from platejs/basic-nodes; import { MarkdownPlugin, deserializeMd, serializeMd, } from platejs/markdown; import { createSlateEditor } from platejs; const editor createSlateEditor({ plugins: [BaseBasicBlocksPlugin, BaseBasicMarksPlugin, MarkdownPlugin], }); const value deserializeMd( editor, [ # Migration Note, , Move legacy content into **Plate** format., ].join(\n) ); const markdown serializeMd(editor, { value }); console.info(markdown);这条链路的判断标准deserializeMd(editor, markdownString)把 Markdown 字符串转成 Plate 值节点数组示例中的输入是一段含标题和加粗段落的 MarkdownserializeMd(editor, { value })把编辑器值或通过value选项显式传入的值转回 Markdown打印结果应包含标题行和加粗标记的段落内容如果你不使用MarkdownPlugin.configure配置默认规则也可以直接用editor.api.markdown.deserialize/editor.api.markdown.serialize但没有插件配置的默认规则详见 Markdown 指南/(serializing)/markdown.mdx)。注意示例中脚本没有传value给createSlateEditor而是在serializeMd时用{ value }显式指定要序列化的值这样同一编辑器可以复用处理多份内容。第三步用转换函数批量处理文档迁移和批量清理场景使用editor.tf转换。文档强调当操作需要扫描整篇文档时传at: []。示例scripts/normalize-headings.ts把全部 H1 改成 H2并在文末追加一个段落最后一次性输出三种结果import type { Value } from platejs; import { BaseBasicBlocksPlugin, BaseBasicMarksPlugin, } from platejs/basic-nodes; import { MarkdownPlugin, serializeMd } from platejs/markdown; import { createSlateEditor } from platejs; export function normalizeHeadings(value: Value) { const editor createSlateEditor({ plugins: [BaseBasicBlocksPlugin, BaseBasicMarksPlugin, MarkdownPlugin], value, }); editor.tf.setNodes( { type: h2 }, { at: [], match: (node) type in node node.type h1, } ); editor.tf.insertNodes( [{ children: [{ text: Imported from the legacy CMS. }], type: p }], { at: [editor.children.length] } ); return { markdown: serializeMd(editor), text: editor.api.string([]), value: editor.children, }; }editor.tf.setNodes(props, { at: [], match })更新所有匹配节点match负责挑选目标这里是type h1的节点editor.tf.insertNodes(nodes, { at: [editor.children.length] })在根路径末尾插入新节点返回对象同时给出转换后的 Markdown、纯文本和节点结构editor.children你可以按下游存储格式取用其中一种。把这段封装成函数后迁移脚本只需遍历数据源、对每份文档调用一次即可转换是否生效通过返回值核对例如 Markdown 中标题级别是否已变为##。API 速查以下条目来自安装文档的 API 参考表API包用途createSlateEditorplatejs创建非 React 编辑器实例editor.api.string([])platejs读取整篇文档的文本editor.tf.setNodesplatejs更新匹配节点整篇扫描时用at: []editor.tf.insertNodesplatejs在指定路径插入节点deserializeMdplatejs/markdownMarkdown 转 Plate 值serializeMdplatejs/markdown编辑器值或显式value选项转 Markdown下一步安装文档给出的后续方向序列化到 MarkdownMarkdown/(serializing)/markdown.mdx)序列化到 HTMLHTML/(serializing)/html.mdx)服务端只读渲染platejs/static运行时Static Rendering/static.mdx)【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考