处理内容控件

使用自动化 API 从外部 UI 添加不同类型的内容控件并检查其属性。

信息

点击内容控件类型标签将其插入文档。使用 List 按钮切换所有内容控件的列表。在编辑器中点击任何内容控件，即可在面板中查看其属性和 JSON 表示。

CONTENT CONTROLS0

Click a type above to add it, then click a content control in the editor to inspect it.

它是如何运作的

当用户打开文档时，将执行 GetAllContentControls 方法来获取内容控件的总数：

connector.executeMethod("GetAllContentControls", null, (data) => {
  allControls = data;
});

当用户点击类型标签时，将根据类型调用相应的方法：
- AddContentControl — 用于纯文本（块或内联）
- AddContentControlDatePicker — 用于日期选择器
- AddContentControlPicture — 用于图片
- AddContentControlList — 用于组合框或下拉列表
- AddContentControlCheckBox — 用于复选框
```
// 示例：添加块内容控件
connector.executeMethod("AddContentControl", [1, { Lock: 0 }]);

// 示例：添加复选框
connector.executeMethod("AddContentControlCheckBox", [
  { Checked: false },
  { Lock: 0 },
]);
```

当内容控件获得焦点时，将触发 onFocusContentControl 事件，并执行 GetCurrentContentControlPr 方法获取其属性（Id、Tag、Lock、Appearance、Color）。当失去焦点时，onBlurContentControl 事件隐藏面板：

connector.attachEvent("onFocusContentControl", (control) => {
  selectedId = control["InternalId"];
  connector.executeMethod("GetCurrentContentControlPr", ["none"], (props) => {
    // 显示属性和 JSON
  });
});

connector.attachEvent("onBlurContentControl", () => {
  selectedId = null;
  // 隐藏详情面板
});

connector.attachEvent("onChangeContentControl", () => {
  // 刷新列表和属性
});

当用户编辑 Tag、Lock、Appearance 或 Color 并点击 Apply changes 时，通过 connector.callCommand 使用 Document Builder API 更新属性：

Asc.scope.ccProps = { internalId, tag, lock, appearance, r, g, b };
connector.callCommand(() => {
  const p = Asc.scope.ccProps;
  const doc = Api.GetDocument();
  const controls = doc.GetAllContentControls();
  for (let i = 0; i < controls.length; i++) {
    const cc = controls[i];
    if (cc.GetInternalId() === p.internalId) {
      cc.SetTag(p.tag);
      cc.SetLock(p.lock);
      cc.SetAppearance(p.appearance);
      const color = Api.RGBA(p.r, p.g, p.b, 255);
      cc.SetBackgroundColor(color);
      cc.SetBorderColor(color);
      break;
    }
  }
});

当用户点击 Remove 时，将执行 RemoveContentControl 方法删除当前选中的内容控件：
```
connector.executeMethod("RemoveContentControl", [selectedId]);
```

备注

请注意，该连接器仅适用于 ONLYOFFICE 文档开发者版本。

此类是一项附加功能，默认情况下不包含在ONLYOFFICE文档开发者版中，需要额外付费。如果您有任何疑问，请通过 sales@onlyoffice.com联系我们的销售团队。

它是如何运作的​

它是如何运作的