如何通过Office-JS在Word中插入可自由拖动的浮动元素？

核心思路 #

利用Word的**浮动形状（Floating Shape）**作为类文本框载体，配合自定义属性标记，既能实现自由拖动不干扰其他元素，又能后续批量查询元素及内容。

1. 插入可自由拖动的浮动元素 #

浮动形状在Word中默认支持用户手动拖动，设置为浮动环绕方式后不会影响周边文档元素，完全符合需求。通过Office-JS可直接创建这类形状并配置文本内容：

await Word.run(async (context) => {
  const body = context.document.body;
  // 创建矩形形状（可替换为其他形状类型）
  const floatShape = body.insertShape(Word.ShapeType.rectangle, "end");
  
  // 设置浮动环绕（关键：避免干扰其他元素）
  floatShape.wrapFormat.type = Word.WrappingStyle.floating;
  // 自定义位置（单位：磅）
  floatShape.left = 100;
  floatShape.top = 200;
  // 设置形状尺寸
  floatShape.width = 200;
  floatShape.height = 100;
  
  // 添加文本内容
  floatShape.textFrame.textRange.text = "可自由拖动的浮动类文本框内容";
  // 可选：设置文本对齐方式
  floatShape.textFrame.verticalAlignment = Word.TextVerticalAlignment.center;
  floatShape.textRange.font.size = 12;
  
  // 添加自定义标记，用于后续识别插件插入的元素
  floatShape.customProperties.add("isPluginFloatElement", true);
  
  await context.sync();
});

2. 自由拖动特性说明 #

• 插入的浮动形状可直接用鼠标拖动到任意位置（包括页面底部），不会触发页面跳转或带动周边元素。
• 若需通过代码控制位置，直接修改left和top属性，同步后立即生效。

3. 查询所有插入的元素及内容 #

通过自定义属性isPluginFloatElement筛选插件插入的形状，批量提取内容：

await Word.run(async (context) => {
  const allShapes = context.document.body.shapes;
  allShapes.load("items, textFrame/textRange/text, customProperties");
  
  await context.sync();
  
  // 筛选标记过的元素
  const pluginElements = allShapes.items.filter(shape => {
    const prop = shape.customProperties.getItemOrNullObject("isPluginFloatElement");
    return prop.value === true;
  });
  
  // 提取元素信息
  const elementContents = pluginElements.map(shape => ({
    id: shape.id,
    content: shape.textFrame.textRange.text,
    position: { left: shape.left, top: shape.top }
  }));
  
  console.log("插件插入的所有浮动元素：", elementContents);
});

方案优势对比 #

• 文本框：Office-JS目前未开放文本框拖动控制API，但浮动形状可完全替代其功能，且支持更灵活的定位。
• 表格：表格属于流式排版元素，拖动必然影响周边内容；浮动形状独立于文档流，不会干扰排版。
• 图片：图片虽可设置浮动环绕，但形状能直接承载可编辑文本，无需处理内嵌文本的额外问题，更适配类文本框需求。

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