You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将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节点类型与属性
  • 简化示例代码:
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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 20:24:51