Office.js添加评论后网页版Word无法即时显示问题咨询

我正在开发一款Word插件，核心功能之一是向文档特定位置插入评论。该功能在本地安装版Word中运行正常，但切换至网页版Word时，通过Office.js程序化添加评论后，UI出现如下现象：

• 目标位置出现评论标识
• 评论选项卡中的“此文档无评论”提示消失
• 若文档已共享，所有协作者会收到评论添加的邮件通知

但只有点击浏览器刷新按钮重新加载页面后，所有评论才会正常显示。

原实现代码 #

async function addCommentsToDoc(targetString: string, commentText: string) {

// Calling run method from Word package, to initialize the context
const result = Word.run(async (context) => {
  await context.sync();
  // Handling Word's 255 character search limit
  if (targetString.length >= 255) {
    targetString = targetString.slice(0, 250);
  }

  // Cleaning the location
  targetString =  targetString.trim()

  // Getting the complete content of the current open document or content
  const body = context.document.body;

  // Using the native .search() method to search within a string.
  const searchResults = body.search(
    targetString,
    {
      matchCase: false,
      matchWholeWord: false,
      ignoreSpace: true,
      ignorePunct: false,
      matchPrefix: false,
      matchSuffix: false,
      matchWildcards: false
    }
  );
  
  // Loading the searched properties from the document
  context.load(searchResults, "text");
  await context.sync();

  if (searchResults.items.length > 0) {
    //Skip the comments who's length is 0
    if (commentText.length == 0) {
      return;
    }

    // Adding the comment to the target string
    const comment: Word.Comment = searchResults.items[0].insertComment(commentText);
    comment.track();
    comment.load(
      "id, content, authorName, contentRange, resolved, replies"
    );
    await context.sync();

    const range = comment.getRange();
    range.select("Start");
    await context.sync();

    return true;
  } else {
    return false;
  }
});
}

问题分析与解决方案 #

网页版Word的UI同步机制和本地版存在差异，原代码中存在冗余的上下文同步操作，且comment.track()可能干扰UI即时更新逻辑。以下是优化后的实现：

优化后代码 #

async function addCommentsToDoc(targetString: string, commentText: string) {
  return Word.run(async (context) => {
    // 处理Word搜索255字符限制
    if (targetString.length >= 255) {
      targetString = targetString.slice(0, 250);
    }
    targetString = targetString.trim();

    const body = context.document.body;
    const searchResults = body.search(targetString, {
      matchCase: false,
      matchWholeWord: false,
      ignoreSpace: true,
      ignorePunct: false,
      matchPrefix: false,
      matchSuffix: false,
      matchWildcards: false
    });

    context.load(searchResults, "text");
    await context.sync();

    // 提前过滤无效场景
    if (searchResults.items.length === 0 || commentText.length === 0) {
      return false;
    }

    // 插入评论并加载核心属性
    const comment = searchResults.items[0].insertComment(commentText);
    context.load(comment, "id, content, contentRange");
    await context.sync();

    // 选中评论关联的内容范围，强制触发网页版UI刷新
    comment.contentRange.select();
    await context.sync();

    return true;
  });
}

关键修改点 #

1. 移除开头冗余的await context.sync()：Word.run会自动初始化上下文，无需额外同步
2. 合并无效场景判断：提前过滤无搜索结果或空评论内容的情况，简化逻辑
3. 移除comment.track()：仅在需要监听评论后续变化时使用，否则会增加UI同步负担
4. 使用comment.contentRange替代comment.getRange()：更精准获取评论绑定的文档范围，确保选中操作触发UI更新
5. 调整同步时机：在插入评论并加载属性后，通过选中操作强制触发网页版UI刷新

内容的提问来源于stack exchange，提问作者Mayank saini