如何在TinyMCE表单提交→谷歌表格→邮件流程中保留文本格式

我太懂你现在的糟心情况了——用TinyMCE编辑的加粗、斜体这些富文本，提交到谷歌表格后，发邮件时居然直接显示一堆<strong>、<p>这类HTML标签，完全没渲染出预期的格式对吧？别着急，我帮你拆解问题，给你搞定的办法。

问题根源 #

谷歌表格会原样存储TinyMCE生成的HTML代码，这本身没问题。但你在HTML邮件模板里用<?= alertDetails ?>输出内容时，Google Apps Script的模板引擎会自动转义HTML特殊字符（比如把<变成<），导致邮件里显示的是纯文本形式的标签，而不是被渲染后的样式。

解决办法：用未转义输出指令替代转义输出 #

核心就是把模板里的转义输出标签<?= ?>换成未转义的<?!= ?>，这样模板引擎就会直接把原始HTML代码插入到邮件内容里，让邮件客户端能正常解析渲染格式。

步骤1：修改Google Apps Script代码（可选优化）

其实你不需要提前用HtmlService.createHtmlOutput处理内容，直接把表格里存的原始HTML字符串传给模板就行（要是担心XSS风险，保留HtmlService.createHtmlOutput(...).getContent()做安全过滤也可以，不影响效果）：

function saveAlerts(data) {
  // 原有保存到谷歌表格的代码保持不变
  let sheetData = alerts.getDataRange().getDisplayValues();
  let keys = sheetData[0];
  data.forEach(el => {
    let temp = [];
    keys.forEach(key => {
      temp.push(el[key]);
    });
    alerts.appendRow(temp);
  });

  // 加载邮件模板
  let template = HtmlService.createTemplateFromFile('htmlEmail');
  template.data = data;
  // 直接传递原始的Alert Details HTML内容
  template.alertDetails = data[0]['Alert Details'];
  // （可选）如果需要安全过滤：
  // template.alertDetails = HtmlService.createHtmlOutput(data[0]['Alert Details']).getContent();

  // 生成邮件HTML内容
  let message = template.evaluate().getContent();

  // 发送邮件
  MailApp.sendEmail({
    to: 'lofton.gentry@one-line.com',
    subject: `${data[0]['Alert Subject']}`,
    htmlBody: message,
    replyTo: `${data[0]['User Email']}`
  });
}

步骤2：修改HTML邮件模板

把模板里输出Alert Details的部分，从<?= alertDetails ?>改成<?!= alertDetails ?>：

<body>
  <div class="alert-container">
    <div class="alert-header" id="alertHeader">
      <p class="alert-title">New Alert</p>
    </div>
    <div class="alert-body">
      <!-- 原有其他字段保持不变 -->
      <p id="alert-type"><strong>Type:</strong><?= data[0]['Alert Type'] ?></p>
      <p id="alert-date"><strong>Alert Date:</strong><?= data[0]['Alert Date'] ?></p>
      <p id="alert-loc"><strong>Location:</strong><?= data[0]['Alert Location'] ?></p>
      <p id="alert-loc"><strong>Code:</strong><?= data[0]['Alert Code'] ?></p>
      <p id="alert-loc"><strong>Affected:</strong><?= data[0]['Services Affected'] ?></p>
      <p id="alert-add"><strong>Alert Address:</strong><?= data[0]['Alert Address'] ?></p>
      
      <p id="alert-details"><strong>Alert Details:</strong></p>
      <!-- 关键修改：用<?!=替代<?= -->
      <div><?!= alertDetails ?></div>
    </div>
  </div>
</body>

原理说明 #

<?= ?>是Google Apps Script模板的转义输出指令，它会把所有HTML特殊字符转义，防止XSS但也导致标签无法被渲染；而<?!= ?>是未转义输出指令，会直接把变量里的HTML代码插入到最终的邮件HTML中，邮件客户端解析时就能识别<strong>、<em>这些标签，正确显示加粗、斜体等格式了。

你之前单独测试HtmlService.createHtmlOutput(alertDetails).getContent()能生效，就是因为那时候直接输出了原始HTML，没有经过模板的转义处理。现在换成未转义输出，就能和模板完美配合啦～

备注：内容来源于stack exchange，提问作者Lofton Gentry