unlayer-react-email-editor模板加载失败 求助正确加载方法

核心问题：你自定义的htmlToJSON生成的是通用DOM树的JSON结构，但unlayer-react-email-editor的loadDesign方法要求传入unlayer专属的模板设计格式，而非原生DOM的JSON映射，这是模板加载失败的根本原因。

排查方向 #

• 对比标准格式：在unlayer编辑器中手动创建一个简单模板，调用editor.saveDesign()获取正确的JSON结构，和你生成的templateJson对比，就能直观看到格式差异。
• 查看控制台日志：除了catch块捕获的错误，检查浏览器控制台是否有unlayer抛出的格式不兼容警告或错误信息。
• 验证输入HTML：确认savedData?.email?.content的HTML格式是否规范，有没有unlayer不支持的复杂标签或样式，可先把HTML渲染到普通页面确认是否正常显示。

解决方案 #

1. 使用官方HTML导入方法（推荐） #

unlayer提供了直接导入HTML的API，无需自行转换JSON，能最大程度保证兼容性：

const onTemplateReady = () => {
  try {
    emailEditorRef?.current?.editor?.importHtml(savedData?.email?.content, (result) => {
      if (!result.success) {
        console.error('HTML导入失败:', result.error);
      }
    });
  } catch (error) {
    console.error("Error loading template:", error);
  }
};

2. 自定义转换需匹配unlayer格式 #

如果必须自行处理转换，先通过saveDesign()获取unlayer的标准设计结构，再将HTML解析后映射为该结构。例如unlayer的基础设计结构大致如下：

{
  "version": "1.0.0",
  "body": {
    "rows": [
      {
        "columns": [
          {
            "components": [
              {
                "type": "text",
                "content": "示例文本",
                "styles": {
                  "fontSize": "16px",
                  "color": "#333"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

你需要修改htmlToJSON逻辑，将DOM节点转换为上述层级的rows/columns/components结构，而非原生DOM的tagName/attributes结构。

3. 验证输入数据有效性 #

先确认savedData?.email?.content的HTML是否完整、格式正确，比如是否闭合所有标签、是否包含非法字符，可先将HTML插入到页面的<div>中验证渲染效果，再尝试导入。

内容的提问来源于stack exchange，提问作者Anubhav Garg