用于编辑器插件的对话框和边栏

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

对于大多数编辑器插件,对话框窗口和边栏面板是主要插件界面。这两者都可以使用标准的 HTML 和 CSS 完全自定义,而且当用户与边栏或对话框互动时,您可以使用 Apps 脚本的客户端-服务器通信模型来运行 Apps 脚本函数。插件可以定义多个边栏和对话框,但插件一次只能显示一个。

如果希望用户在插件界面中做出选择之前禁止用户与编辑器进行互动,请使用对话框;否则请使用边栏。

对话框

对话框是叠加在主编辑器内容的窗口面板。Apps 脚本对话框是模态的;打开这些对话框时,用户无法与编辑器界面的其他元素互动。您可以自定义对话框的内容和大小。

构建插件对话框的方式与 Apps 脚本自定义对话框相同;一般的推荐步骤如下:

  1. 创建一个脚本项目文件,用于定义对话框的 HTML 结构、CSS 和客户端 JavaScript 行为。定义对话框时,请参阅编辑器插件样式指南
  2. 在您希望打开对话框的服务器端代码中,调用 HtmlService.createHtmlOutputFromFile(filename) 以创建表示对话框的 HtmlOutput 对象。或者,如果您使用的是模板化 HTML,则可以调用 HtmlService.createTemplateFromFile(filename) 生成模板,然后调用 HtmlTemplate.evaluate() 将其转换为 HtmlOutput 对象。
  3. 调用 Ui.showModalDialog(htmlOutput, dialogTitle),以使用该 HtmlOutput 显示对话框。

当对话框打开时,对话框不会暂停服务器端脚本。客户端 JavaScript 可以使用 google.script.run() 和关联的处理程序函数对服务器端进行异步调用。如需了解详情,请参阅客户端到服务器的通信

文件打开对话框

文件打开对话框是预建对话框,可让用户从其 Google 云端硬盘中选择文件。您无需设计即可将文件插件对话框添加到插件,但需要一些额外的配置。您还需要拥有相关插件的 Cloud Platform 项目的访问权限,才能启用 Google Picker API。

如需了解完整详情,请参阅文件打开对话框

边栏是显示在编辑器界面右侧的面板,是最常见的插件界面类型。与对话框不同,您可以在打开边栏时继续与编辑器界面的其他元素互动。边栏的宽度是固定的,但您可以自定义其内容。

构建插件边栏的方式与 Apps 脚本自定义边栏相同;一般的推荐步骤如下:

  1. 创建一个脚本项目文件,用于定义边栏的 HTML 结构、CSS 和客户端 JavaScript 行为。定义边栏时,请参阅编辑器插件样式指南
  2. 在您希望打开边栏的服务器端代码中,调用 HtmlService.createHtmlOutputFromFile(filename) 以创建代表边栏的 HtmlOutput 对象。或者,如果您使用的是模板化 HTML,则可以调用 HtmlService.createTemplateFromFile(filename) 生成模板,然后调用 HtmlTemplate.evaluate() 将其转换为 HtmlOutput 对象。

  3. 调用 Ui.showSidebar(htmlOutput),以使用该 HtmlOutput 显示边栏。

边栏处于打开状态时,不会暂停服务器端脚本。客户端 JavaScript 可以使用 google.script.run() 和关联的处理程序函数对服务器端进行异步调用。如需了解详情,请参阅客户端到服务器的通信