如何将Slate JSON文本迁移至Tiptap的ProseMirror格式?有无转换工具?
Slate JSON 转 ProseMirror JSON 迁移方案
一、直接编写自定义转换脚本(推荐,避免数据丢失)
中间转HTML的方式容易丢失自定义属性或特殊格式,直接从Slate AST映射到ProseMirror AST是最可靠的路径:
- 先梳理你的Slate节点结构:Slate节点为
{ type, children, text, [自定义属性] }格式,ProseMirror节点是{ type, content, attrs, text }(文本节点需包含marks数组存储样式) - 递归遍历Slate JSON节点:
- 基础节点映射:比如Slate的
paragraph对应ProseMirror的paragraph,heading对应heading(需补充attrs.level字段),bold/italic这类行内样式对应ProseMirror的marks数组元素 - 自定义节点适配:如果项目中有自定义Slate节点(如代码块、引用框),需先在Tiptap中定义对应扩展,再在转换时匹配对应的ProseMirror节点类型与属性
- 基础节点映射:比如Slate的
- 简化示例代码:
function slateToProseMirror(slateNode) { // 处理文本节点 if (slateNode.text) { const marks = []; slateNode.bold && marks.push({ type: 'bold' }); slateNode.italic && marks.push({ type: 'italic' }); return { type: 'text', text: slateNode.text, marks: marks }; } // 处理块级节点 const pmNode = { type: slateNode.type, content: slateNode.children.map(child => slateToProseMirror(child)) }; // 补充节点属性,如标题级别 if (slateNode.type === 'heading') { pmNode.attrs = { level: slateNode.level }; } return pmNode; }
- 验证环节:用Tiptap的
editor.setContent(pmJson)方法加载转换结果,检查内容是否完整还原
二、利用工具链辅助转换
- 借助Slate官方序列化工具:使用
@slate-serializers/core自定义序列化规则,替代易丢数据的HTML中转方案,能更精准控制节点映射逻辑 - 匹配版本适配:注意Slate v0.9x与v0.10x的AST结构差异较大,选择社区工具时要对应自己的项目版本
三、在线转换器的替代方案
目前没有通用的可靠在线转换器(因不同项目存在自定义节点/属性),可自行搭建临时转换页面:
- 用Tiptap和Slate的CDN版本快速搭建页面,输入Slate JSON后通过自定义转换函数生成ProseMirror JSON,同时在Tiptap编辑器中实时预览,方便调整转换逻辑
内容的提问来源于stack exchange,提问作者Shivam Balikondwar
相关产品推荐
相关产品推荐

