如何获取GrapesJS包含html、head标签的完整标准HTML代码？

GrapesJS默认的getHtml()方法仅返回编辑器画布中body子节点的片段内容，本身不内置完整HTML文档的拼接逻辑，因此会出现缺失DOCTYPE、html/head根标签、meta标签嵌套错误的问题，可通过以下方式实现标准HTML导出，适配邮件场景： #

实现逻辑 #

• 手动拼接符合W3C标准、兼容邮件客户端的HTML文档骨架，不要直接零散拼接getHtml()/getCss()/getJs()的返回值
• 邮件场景下移除所有JS相关代码，绝大多数邮件客户端会拦截脚本内容，甚至触发垃圾邮件判定
• 固定写入邮件场景通用的meta配置，兼容Outlook、Apple Mail、QQ邮箱、网易邮箱等主流客户端
• 可选追加CSS内联处理，解决部分邮件客户端不支持head内样式表的问题

可直接复用的代码 #

替换原有代码中setGetTemplateCode部分的逻辑即可：

setGetTemplateCode(() => () => {
  // 邮件场景兼容用标准meta标签
  const mailCompatibleMeta = `
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
  `;

  // 获取编辑器内的内容和样式
  const templateBody = editor.getHtml({ cleanId: false });
  const templateCss = editor.getCss();

  // 拼接完整标准HTML文档
  return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  ${mailCompatibleMeta}
  <title>邮件模板</title>
  <style type="text/css">
    ${templateCss}
    /* 邮件通用重置样式，可根据需求调整 */
    body { margin: 0 !important; padding: 0 !important; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { max-width: 100%; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  </style>
</head>
<body style="margin: 0; padding: 0;">
  ${templateBody}
</body>
</html>`;
})

优化建议 #

• 若需要兼容Outlook等老旧邮件客户端，可在head内追加对应的条件注释代码
• 生产环境建议在导出后接入CSS内联工具（如juice），把所有样式规则内联到元素的style属性上，避免客户端不支持外部样式表导致的排版错乱
• 配置项中的canvasCss仅作用于编辑器编辑态的预览界面，不会被getCss()导出，不会污染最终生成的邮件模板

内容的提问来源于stack exchange，提问作者Ericson Willians