google-apps-script - 是否可以查看 Google 幻灯片中使用的所有对象的列表？

Question

当 Google 幻灯片中的某些对象隐藏在另一个对象后面时，以后可能很难在幻灯片上找到它们。例如，是否有可能查看一个面板，其中包含给定幻灯片上存在的所有对象的列表？即使它们在底层（完全隐藏在另一个对象后面）也可能编辑它们？当对象稍后显示并完全覆盖先前显示的对象时，这可能对动画很有用。

标签： google-apps-scriptgoogle-slides

Answer 1

我相信你的目标如下。

• 您的 Google 幻灯片有多个相同大小和相同位置的文本框。
• 您想从文本框中检索文本列表并希望使用更简单的方法更改文本。

在这种情况下，我认为当使用 Google Apps Script 创建的侧边栏来更改文本时，您的目标也许可以简单地实现。

示例脚本如下。

用法：

1.准备脚本：

请将以下脚本复制并粘贴到 Google 幻灯片的脚本编辑器中并保存。然后，请重新打开 Google 幻灯片。这样，为 Google 幻灯片创建了自定义菜单“示例”。打开自定义菜单“样本”中的“运行”时，将运行脚本。

代码.gs

请将此脚本复制并粘贴为Code.gs.

function onOpen() {
  SlidesApp.getUi().createMenu("sample").addItem("RUN", "openSidebar").addToUi();
}

function openSidebar() {
  const html = HtmlService.createHtmlOutputFromFile("index").setTitle("sample");
  SlidesApp.getUi().showSidebar(html);
}

function getSelectedShapes() {
  const select = SlidesApp.getActivePresentation().getSelection();
  const pageElementRange = select.getPageElementRange();
  if (pageElementRange) {
    const obj = pageElementRange.getPageElements().reduce((ar, e) => {
      if (e.getPageElementType() == SlidesApp.PageElementType.SHAPE) {
        const shape = e.asShape();
        ar.push({objectId: shape.getObjectId(), text: shape.getText().asString().trim()});
      }
      return ar;
    }, []).reverse();
    return obj;
  }
  return [];
}

function updatedTexts(o) {
  const select = SlidesApp.getActivePresentation().getSelection();
  const slide = select.getCurrentPage();
  const obj = slide.getShapes().reduce((o, e) => Object.assign(o, {[e.getObjectId()]: {shape: e, text: e.getText().asString().trim()}}), {});
  o.forEach(({objectId, text}) => {
    if (obj[objectId] && obj[objectId].text != text) {
      obj[objectId].shape.getText().setText(text);
    }
  });
  return "Done";
}

索引.html

请将此脚本复制并粘贴为index.html.

<input type="button" id="main" value="Get selected shapes" onClick="main()">
<div id="shapes"></div>
<input type="button" id="update" value="Updated texts" onClick="updatedTexts()" style="display:none">
<script>
  function main() {
    document.getElementById("main").disabled = true;
    document.getElementById("shapes").innerHTML = "";
    google.script.run.withSuccessHandler(o => {
      if (o.length == 0) {
        document.getElementById("update").style.display = "none";
        return;
      }
      const div = document.getElementById("shapes");
      o.forEach(({objectId, text}) => {
        const input = document.createElement("input");
        input.setAttribute("type", "text");
        input.setAttribute("id", objectId);
        input.setAttribute("value", text);
        div.appendChild(input);
      });
      document.getElementById("update").style.display = "";
      document.getElementById("main").disabled = false;
    }).getSelectedShapes();
  }

  function updatedTexts() {
    const inputs = document.getElementById("shapes").getElementsByTagName('input');
    const obj = [...inputs].map(e => ({objectId: e.id, text: e.value}));
    console.log(obj)
    google.script.run.withSuccessHandler(e => console.log(e)).updatedTexts(obj);
  }
</script>

2. 测试：

请重新打开 Google 幻灯片。这样，就创建了自定义菜单。请打开“样品”->“运行”。这样，侧边栏就打开了。

1. 请选择 Google 幻灯片上的文本框。
2. 单击“获取选定的形状”按钮。
   • 这样，选定的文本框被检索，您可以看到文本框的文本。
3. 修改文字。
4. 单击“更新文本”按钮。
   • 这样，修改后的文本就会反映在文本框中。

此外，您可以通过以下演示影片看到它。

笔记：

• 这是一个简单的示例脚本。所以请根据您的实际情况修改上述脚本和 HTML 样式。

参考：

• 自定义侧边栏