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

8еа39680ц8 5138ц2ц823 800е90953а 1685бдфб67

对于大多数编辑器插件， 对话框窗口和边栏面板是主要的插件界面。 两者均可使用标准 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() 和 关联的处理程序函数。有关详情，请参阅 客户端到服务器的通信。

文件打开对话框

文件打开对话框是一些预先构建好的对话框，可让用户选择文件 。您可以向插件添加文件打开对话框，而无需 但需要进行一些额外的配置您 需要访问该插件的 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() 和 关联的处理程序函数。有关详情，请参阅 客户端到服务器的通信。