Outlook网页版插件：文本选择、对象追踪与样式应用技术咨询

Hey Ali, let's break down how to solve your Outlook web add-in challenges, since the Outlook object model works a bit differently from Word's:

Key Differences to Note First #

Unlike Word, Outlook web add-ins don't let you persist a Range object for later manipulation—you can't just save a selection and modify it later without the user keeping it highlighted. Also, while Outlook doesn't have a direct font property like Word, you can achieve the same styling effects using HTML formatting, which is fully supported.

1. Track Selected Text (Without Needing Persistent Selection) #

Instead of saving a Range object, we'll store the selected text's content and its position offsets using Outlook's getSelectedRangeAsync method. This lets us reference the selected area later even if the user clicks away.

// Store selected text and its position offsets
var trackedSelection = {
  text: "",
  startOffset: 0,
  endOffset: 0
};

$scope.getSelectedText = function () {
  Office.context.mailbox.item.body.getSelectedRangeAsync(
    Office.CoercionType.Text,
    function (asyncResult) {
      if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
        trackedSelection.text = asyncResult.value.text;
        trackedSelection.startOffset = asyncResult.value.start;
        trackedSelection.endOffset = asyncResult.value.end;

        if (!trackedSelection.text) {
          systemService.errorHandler("Please select any text from the email body");
          return;
        }
        // Save to local storage if you need to persist across sessions
        localStorage.setItem("TrackedSelection", JSON.stringify(trackedSelection));
      } else {
        systemService.errorHandler(`Failed to get selection: ${asyncResult.error.message}`);
      }
    }
  );
};

2. Apply Styles to Tracked Text #

To replicate Word's font styling (color, bold), we'll use HTML formatting. You can either modify the entire email body or target just the previously selected range:

Option A: Highlight Words in the Entire Email Body

$scope.highlightWords = function (item) {
  var highlightColor = systemService.getColor(item.gradeText);
  var filteredWords = JSON.parse(localStorage.getItem("List")) || [];

  // Get the full email body as HTML
  Office.context.mailbox.item.body.getAsync(
    Office.CoercionType.Html,
    function (bodyResult) {
      if (bodyResult.status !== Office.AsyncResultStatus.Succeeded) {
        console.error(`Failed to get body: ${bodyResult.error.message}`);
        return;
      }

      let modifiedHtml = bodyResult.value;
      // Highlight each target word
      filteredWords.forEach(word => {
        // Regex to match whole words (ignore case, punctuation)
        const wordRegex = new RegExp(`\\b${word}\\b`, "gi");
        modifiedHtml = modifiedHtml.replace(
          wordRegex,
          `<span style="color: ${highlightColor}; font-weight: bold;">$&</span>`
        );
      });

      // Update the email body with styled HTML
      Office.context.mailbox.item.body.setAsync(
        modifiedHtml,
        { coercionType: Office.CoercionType.Html },
        function (setResult) {
          if (setResult.status === Office.AsyncResultStatus.Succeeded) {
            systemService.showNotification("Success", "Words highlighted successfully!");
          } else {
            console.error(`Failed to update body: ${setResult.error.message}`);
          }
        }
      );
    }
  );
};

Option B: Highlight Words Only in the Tracked Selection

If you want to limit styling to the previously selected text, use this approach to target just that range:

// Helper function to highlight a word in the tracked selection
function highlightInSelectedRange(word, color) {
  return new Promise((resolve, reject) => {
    Office.context.mailbox.item.body.getSelectedRangeAsync(
      Office.CoercionType.Html,
      function (rangeResult) {
        if (rangeResult.status !== Office.AsyncResultStatus.Succeeded) {
          reject(rangeResult.error);
          return;
        }

        let selectedHtml = rangeResult.value.text;
        const wordRegex = new RegExp(`\\b${word}\\b`, "gi");
        selectedHtml = selectedHtml.replace(
          wordRegex,
          `<span style="color: ${color}; font-weight: bold;">$&</span>`
        );

        // Replace the selected range with styled HTML
        Office.context.mailbox.item.body.setSelectedDataAsync(
          selectedHtml,
          { coercionType: Office.CoercionType.Html },
          function (setResult) {
            setResult.status === Office.AsyncResultStatus.Succeeded
              ? resolve()
              : reject(setResult.error);
          }
        );
      }
    );
  });
}

// Main highlight function
$scope.highlightWords = function (item) {
  var highlightColor = systemService.getColor(item.gradeText);
  var filteredWords = JSON.parse(localStorage.getItem("List")) || [];

  // Chain promises to process each word sequentially
  let promiseChain = Promise.resolve();
  filteredWords.forEach(word => {
    promiseChain = promiseChain.then(() => highlightInSelectedRange(word, highlightColor));
  });

  promiseChain
    .then(() => systemService.showNotification("Success", "Selected words highlighted!"))
    .catch(error => {
      console.error(`Highlight error: ${JSON.stringify(error)}`);
      if (error instanceof OfficeExtension.Error) {
        console.error(`Debug info: ${JSON.stringify(error.debugInfo)}`);
      }
    });
};

Important Notes #

• Edit Permissions: Make sure the user is editing a draft email or has permission to modify the message (this won't work on read-only received emails).
• HTML Compatibility: Outlook web uses HTML for rich text, so wrapping text in <span> tags with inline styles is the most reliable way to apply formatting.
• Regex Adjustments: Tweak the word-matching regex if you need to handle edge cases like hyphenated words or special characters.

内容的提问来源于stack exchange，提问作者Ali Hasan