使用 Office.js 更新电子邮件正文时行距增加问题

Question

我正在开发 Microsoft Outlook 的加载项，我的加载项的一个行为是从撰写视图将图像插入到邮件正文中。我使用 Office.js 方法

Office.context.mailbox.item.body.getAsync()

和强制类型的 HTML 来获取 HTML 形式的电子邮件正文。 我将图像添加到电子邮件的 HTML 中，然后使用 Office.js 方法

Office.context.mailbox.item.body.setAsync()

将电子邮件正文替换为更新的 HTML，再次使用强制类型的 HTML。

在 Outlook Web App 中，一切都按预期运行。 在 Outlook 桌面平台（Outlook 2016、Outlook 2013 和 Outlook for Mac）中，对电子邮件正文进行了意外的格式更改。 这可能与使用 Microsoft Word 作为文本编辑器的 Outlook 桌面平台有关。

我认为该方法

Office.context.mailbox.item.body.getAsync()

会造成两个副作用：

• <o:p>

  标签被插入到电子邮件中的每个段落之后
• 电子邮件中所有内容的段落间距设置正在设置为“自动”

这两个副作用将导致电子邮件中的每一行比以前占用更多的垂直空间。 有没有办法避免这两种副作用？

我编写了一些 Javascript 代码来重现此问题。从撰写视图运行此代码，可以看到 Outlook Web App 与桌面平台中打印的 HTML 正文值有所不同。

Office.context.mailbox.item.body.getAsync(Office.CoercionType.Html, function(asyncResult) {
    if (asyncResult && asyncResult.status === Office.AsyncResultStatus.Succeeded) {
        console.log('Value retrieved from getAsync(): ');
        console.log(asyncResult.value);

        // Isolate the email body's HTML, in case a word doc has been returned
        var parser = new DOMParser();
        var dom = parser.parseFromString(asyncResult.value, 'text/html');
        var body = $(dom.body);

        console.log('HTML body:');
        console.log(body.html());

        // Setting the email's body to be our html content:
        Office.context.mailbox.item.body.setAsync(body.html(), {
            coercionType: Office.CoercionType.Html
        }, function() {
            console.log('Complete');
        });
    }
});

使用此示例代码，测试电子邮件的 HTML 正文值在 Web 应用程序中如下：

<div id="divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;" dir="ltr">
  <div id="x_divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:#000000; font-family:Calibri,Helvetica,sans-serif">
    <p style="margin-top:0; margin-bottom:0">Hello,</p>
    <p style="margin-top:0; margin-bottom:0"><br></p>
    <p style="margin-top:0; margin-bottom:0">This is a test email.</p>
    <p style="margin-top:0; margin-bottom:0"><br></p>
    <p style="margin-top:0; margin-bottom:0">Thank you,</p>
    <p style="margin-top:0; margin-bottom:0">Steve</p>
    <div id="x_Signature">
      <div id="x_divtagdefaultwrapper" dir="ltr" style="font-size:12pt; color:rgb(0,0,0); font-family:Calibri,Helvetica,sans-serif,EmojiFont,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;,NotoColorEmoji,&quot;Segoe UI Symbol&quot;,&quot;Android Emoji&quot;,EmojiSymbols">
        <p style="margin-top:0; margin-bottom:0"></p>
      </div>
    </div>
  </div>
</div>

在 Outlook 2016 中，该值为：

<div class="WordSection1">
  <p class="MsoNormal">Hello,<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">This is a test email.<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">Thank you,<o:p></o:p></p>
  <p class="MsoNormal">Steve<o:p></o:p></p>
</div>

在 Outlook 2016 中运行此代码导致我的测试电子邮件的行间距发生变化，

Answer 1

如果我正确阅读了您的示例，您只需将 asyncResault.body 写入 setAsync 函数。我遇到了同样的问题，终于找到了问题所在。

Outlook 2016 中的此部分尝试查找 MsoNormal，它是必须包含在 setAsync 中的 Office 样式。

<div class="WordSection1">
  <p class="MsoNormal">Hello,<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">This is a test email.<o:p></o:p></p>
  <p class="MsoNormal"><o:p>&nbsp;</o:p></p>
  <p class="MsoNormal">Thank you,<o:p></o:p></p>
  <p class="MsoNormal">Steve<o:p></o:p></p>
</div>

如果将 asyncResault 中的标头包含到 setAsync 函数中，输出格式将在那里找到 MsoNormal 并保留原始电子邮件格式。

希望这对下一个在这里找到此主题的人有所帮助。