Question

我正在制作一个插件，该插件读取电子邮件正文的首字母缩写词，然后修改html正文，以便当您将鼠标悬停在找到的首字母缩写词上时，它会为您提供其定义。我在逻辑上没有问题，甚至还找到了一种使用Office.context.mailbox.item.body.getAsync("html", function callback(result) {..}提取正文html源代码的方法。然后，我在新窗口上对其进行了测试，以确保已正确对其进行了修改。

我的下一步是将html代码放回原始窗口，以便对于我收到的所有电子邮件，将鼠标悬停在数据库中的所有首字母缩略词都将有一个定义。我尝试使用此页面here上提供的.setAsync()方法将html代码放回原处，但是我似乎无法使其正常工作或无法正确理解。

这是我代码的基础

'use strict';
funciton(){
  function readJSONFile(file, callback) {
    //read my database of acronyms
  }

  function replace(body, acronyms) {
    //replace acronyms in body with elements that have definitions
  }

  Office.onReady(function () {
    // window is ready
    $(document).ready(function () {
        var emailBody;
        Office.context.mailbox.item.body.getAsync("html", function callback(result) {
            //Contains the email body
            emailBody = result.value;
            readJSONFile("data.json", function (acronyms) {
                //Replaces acronyms in email body based on the JSON file
                emailBody = replace(emailBody, JSON.parse(acronyms));
                //I tried this, didn't seem to do anything
                Office.context.mailbox.item.body.setAsync(emailBody, { coercionType: "html" }, function callback(result));
                //I also tried this, just in case I read the syntax wrong
                Office.context.mailbox.item.body.setAsync(emailBody, "html", function callback(result));
                });
            });
        });
    });
}()

注意：emailBody包含html结构，因此当我将其推到为测试代码的功能而创建的另一个窗口中（如果将其读取为html）。我正在尝试在原始电子邮件正文窗口上做同样的事情。

Answer 1

以下是示例代码，您可以将其用作修改消息正文的基础：

<div id="rootBox">
  <div id="mainBox">
    <div id="previewBox">
      <iframe class="previewContent"></iframe>
    </div>
  </div>  
</div>

#rootBox {
  width: 100%;
  height: 700px;
  display: flex;
  background-color: #FFF;
  flex-grow: 1;
  box-sizing: border-box;
  margin: auto;
}

#mainBox {
  background: black;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  box-sizing: border-box;
}


#previewBox {
  background: yellow;
  flex-grow: 1;
  width: 100%;
  margin: 25px auto 25px;
}


#previewBox .previewContent {
  width: 100%;
  height: 100%;
  background: red;
}

电子邮件正文修改（Outlook插件）

1 个答案: