页脚按钮

按钮是可点击的组件，可包含文本或图标。按钮有三种类型（主要按钮、次要按钮和菜单按钮）。主要按钮和次要按钮点击后会执行操作，但样式不同。主要按钮旨在醒目显示。颜色取决于所选的皮肤。菜单按钮点击后会打开一个提供更多选项的菜单，而非执行操作。

对话框页脚按钮与对话框面板按钮不同。

配置

目前按钮不支持混合显示图标和文本。

禁用和启用按钮

要在按钮禁用和启用状态之间切换，请使用对话框实例 API中的setEnabled(name, state)函数，其中name是配置按钮时指定的标识符，state表示按钮应启用还是禁用。

按钮类型与事件回调

不同类型的页脚按钮点击时将调用不同的回调函数：

• 提交类型按钮将调用对话框配置中提供的onSubmit回调函数。

• 取消类型按钮将调用onCancel和onClose回调函数。当用户点击对话框右上角的X按钮时，这些回调函数也会被触发。

• 自定义类型按钮将调用onAction回调函数，并将按钮的name传递到details对象中。这允许开发者为对话框中的每个自定义类型页脚按钮创建点击处理程序。使用示例请参见Redial 示例。

• 菜单类型按钮将获取选项列表并在下拉菜单中显示。点击菜单按钮项时，该项的name将传递到对话框 onAction 回调。详情请参见：对话框菜单按钮。

更多信息请参见对话框配置选项文档。

示例：对话框页脚按钮

{
  type: 'submit', // button type
  name: 'submitButton', // identifying name
  text: 'Submit', // text for the button
  // icon: 'checkmark', // will replace the text if configured
  enabled: true, // button is active when the dialog opens
  buttonType: 'primary', // style the button as a primary button
  align: 'start', // align the button to the left of the dialog footer
  context: 'mode:design' // button is active when the editor is in design mode, only effective if enabled is true
}

对话框菜单按钮

对话框菜单按钮是一个下拉按钮，可用于在对话框页脚中提供下拉项列表。

当点击对话框菜单项时，会触发对话框 onAction 回调。菜单项的 name 会传递给 onAction 回调。点击菜单页脚按钮不会触发任何回调，只会打开指定项的菜单。

对话框菜单按钮

可以为对话框菜单按钮指定以下选项：

对话框菜单项

可以为对话框菜单按钮项指定以下选项：

示例：对话框页脚菜单按钮

buttons: [
  {
    type: 'menu', // button type
    name: 'myMenuButton', // identifying name
    text: 'My Menu', // text for the button
    // icon: 'user', // will replace the text if configured
    enabled: true, // button is active when the dialog opens
    align: 'start', // align the button to the left of the dialog footer
    tooltip: 'This is "My" button.',
    items: [
      {
        name: 'dialogMenuButtonItem1',
        type: 'togglemenuitem',
        text: 'Item 1.',
        context: 'mode:design'
      },
      {
        name: 'dialogMenuButtonItem2',
        type: 'togglemenuitem',
        text: 'Item 2.',
        context: 'mode:design'
      }
    ]
  }
]

使用 buttons 配置无页脚的对话框

除了其常规功能外，buttons 属性还可用于停止显示页脚部分。

要配置自定义对话框以便在显示时不渲染页脚部分，请将 buttons 属性设置为空数组 []，或完全省略该属性。

无按钮或页脚的对话框的基本示例

tinymce.activeEditor.windowManager.open({
  title: 'Dialog Title', // The dialog's title - displayed in the dialog header
  body: {
    type: 'panel', // The root body type - a Panel or TabPanel
    items: [ // A list of panel components
      {
        type: 'htmlpanel', // an HTML panel component
        html: 'Panel content goes here.'
      }
    ]
  },
  buttons: []
});