如何使用Office.js和Manifest更新Word Web加载项的功能区布局

核心调整方向 #

针对你的需求，需要对manifest.xml中的功能区配置进行以下3项关键修改：

• 拆分原有单一功能组为两个独立组
• 为核心操作按钮设置大尺寸样式
• 在辅助功能组内添加分隔线区分按钮模块

修改后的功能区XML代码 #

替换原manifest中<CustomTab>节点内的所有内容为以下代码：

<CustomTab id="Contoso.TabCustom">
  <!-- 第一组：核心操作区（大尺寸按钮） -->
  <Group id="Contoso.MainGroup" label="Main Actions">
    <ToggleButton
        id="Contoso.MainToggle"
        label="Enable Feature"
        size="large"
        image="Icon.32x32"
        getPressed="getMainToggleState"
        onAction="toggleMainFeature" />
  </Group>

  <!-- 第二组：辅助工具区（带分隔的小按钮） -->
  <Group id="Contoso.ToolsGroup" label="Tools">
    <!-- 第一行按钮 -->
    <Button id="Contoso.Button1" label="Button 1" image="Icon.16x16" imageSize="16" onAction="button1Click" />
    <Button id="Contoso.Button2" label="Button 2" image="Icon.16x16" imageSize="16" onAction="button2Click" />
    
    <!-- 组内分隔线 -->
    <Separator id="Contoso.ToolSeparator" />
    
    <!-- 第二行按钮 -->
    <Button id="Contoso.Button3" label="Button 3" image="Icon.16x16" imageSize="16" onAction="button3Click" />
    <Button id="Contoso.Button4" label="Button 4" image="Icon.16x16" imageSize="16" onAction="button4Click" />
  </Group>
</CustomTab>

关键细节说明 #

1. 大尺寸按钮配置

   • 使用<ToggleButton>实现带选中状态的主按钮（若无需切换状态，可改用<Button>）
   • 通过size="large"启用大尺寸样式，需确保在<Resources>节点中定义对应32x32尺寸的图标：

     <Resources>
       <bt:Images>
         <bt:Image id="Icon.16x16" DefaultValue="icons/icon-16.png" />
         <bt:Image id="Icon.32x32" DefaultValue="icons/icon-32.png" />
       </bt:Images>
     </Resources>
     

2. 组与分隔线

   • 两个<Group>会自动在功能区横向排列，窗口宽度不足时自动换行
   • <Separator>用于在辅助组内划分按钮模块，提升布局可读性

3. 回调函数适配

   • 若使用<ToggleButton>，需在你的Office.js代码中实现getMainToggleState（返回按钮选中状态）和toggleMainFeature（处理点击事件）两个回调函数

验证步骤 #

1. 保存修改后的manifest.xml
2. 重启加载项调试服务（如npm run start）
3. 在Word Web端刷新加载项，检查功能区布局是否匹配预期

内容的提问来源于stack exchange，提问作者Abhishek Katariya