如何在unlayer-react-email-editor中加载模板

Question

<EmailEditor ref={emailEditorRef} onReady={onTemplateReady} />
const onTemplateReady = () => {
    try {
      const templateJson = htmlToJSON(savedData?.email?.content);
      console.log({ templateJson });
      emailEditorRef?.current?.editor?.loadDesign(templateJson);
    } catch (error) {
      console.error("Error loading template:", error);
    }
  };
export const htmlToJSON = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');

  const parseNode = (node) => {
    const jsonNode = {
      tagName: node.tagName.toLowerCase(),
      attributes: {},
      children: []
    };

    for (const { name, value } of node.attributes) {
      jsonNode.attributes[name] = value;
    }

    for (const childNode of node.childNodes) {
      if (childNode.nodeType === Node.ELEMENT_NODE) {
        jsonNode.children.push(parseNode(childNode));
      } else if (childNode.nodeType === Node.TEXT_NODE) {
        jsonNode.children.push(childNode.nodeValue);
      }
    }

    return jsonNode;
  };

  return parseNode(doc.body);
};

为什么无法加载模板设计？我没有明白我做错了什么。将 html 数据转换为 json 格式是否有任何问题。如何在 unlayer-react-email-editor 中加载模板。任何线索将不胜感激。

Answer 1

您可以尝试使用本机js使用此方法。

https://docs.unlayer.com/docs/export-html

Unlayer 电子邮件编辑器以 html 和 json 格式导出设计。

• 您需要导出 json 以及 HTML
• 使用 HTML 发送电子邮件
• 加载图像时使用 json 加载

它会像魔术一样起作用。

稍后谢谢我