使用Office.js API在Word文档中添加嵌套内容控件的问题咨询

开发者阿泽

2026-9-25

Word 插件嵌套内容控件实现方案

要实现内容控件嵌套，核心是获取父级内容控件的内部文本范围，直接在该范围内插入新的内容控件即可，不需要拆分多次Word.run调用。

可直接运行的实现代码

async function addNestedContentControls() {
  try {
    await Word.run(async context => {
      // 1. 插入第一层父内容控件
      const range = context.document.getSelection();
      range.clear();
      const parentCC = range.insertContentControl();
      parentCC.tag = "Level_1_Parent";
      parentCC.insertText("父级内容：", "Start"); // 父控件开头插入提示文本
      parentCC.cannotEdit = false;
      parentCC.appearance = "BoundingBox";
      parentCC.font.color = "red";

      // 2. 获取父控件末尾位置，插入嵌套的子内容控件
      // 关键：获取父控件的内容范围，在范围内插入新控件
      const parentContentRange = parentCC.getRange("End");
      const childCC = parentContentRange.insertContentControl();
      childCC.tag = "Level_2_Child";
      childCC.insertText("子级内容", "End");
      childCC.appearance = "BoundingBox";
      childCC.font.color = "blue";

      // 3. 如果需要更多层级嵌套，重复以上逻辑即可
      // 比如在子控件里再插孙控件
      const childContentRange = childCC.getRange("End");
      const grandChildCC = childContentRange.insertContentControl();
      grandChildCC.tag = "Level_3_GrandChild";
      grandChildCC.insertText("孙级内容", "End");
      grandChildCC.appearance = "BoundingBox";
      grandChildCC.font.color = "green";

      await context.sync();
      console.log("多层嵌套内容控件插入完成");
    });
  } catch (error) {
    console.log("插入失败：", error);
  }
}