正文组件

对话框的主体必须是 panel（单个面板）或 tabpanel（面板集合）。每个面板可以包含面板组件，这些组件可以是布局组件或基本组件，如输入框、按钮和文本。

panel

基本的对话框类型是 panel 对话框。面板是交互式面板组件的容器。面板类型对话框只有一个面板。

{
  type: 'panel',
  items: [ ... ] // array of panel components
}

tabpanel

tabpanel 对话框包含多个面板，并在对话框左侧有一个标签导航菜单，允许在面板之间切换。每个面板可以包含不同的面板组件，从而支持复杂的对话框。

每个标签面板通过以下配置选项定义：

不同标签中具有相同 name 的面板组件将在 对话框的数据对象中使用相同的值。这允许在标签之间传输数据。例如，charmap 和 emoticons 插件对话框在每个标签中都包含一个搜索输入字段。通过将所有搜索字段分配相同的名称，当用户切换标签时，在一个标签中输入的用户数据将被传输。

{
  type: 'tabpanel',
  tabs: [ // array of tab panel configurations
    {
      name: 'mytab',
      title: 'My Tab',
      items: [ ... ] // array of panel components
    },
    ... // more panel configurations
  ]
}

对话框实例 API 方法

对话框实例 API 包含 showTab("tabName") 方法，该方法允许使用标签的注册 name 以编程方式切换标签。

对话框配置事件回调

对话框可以配置 onTabChange 回调。当用户切换标签时会调用此函数。它接收对话框实例 API 和一个 details 对象，该对象包含 newTabName 和 oldTabName。

例如，当这很有用时，charmap 和 emoticons 插件对话框使用 newTabName 来更改搜索结果，以匹配当前标签表示的字符或表情符号类别。

示例：使用对话框 API

下面是如何使用 onTabChange 和 showTab() 的一个简单示例。

const dialogConfig = {
  title: 'Example Dialog',
  body: {
    type: 'tabpanel',
    tabs: [ ... ] // array of panel configurations
  },
  buttons: [],
  onTabChange: (dialogApi, details) => {
    // log the contents of details
    console.log(details.newTabName);
    console.log(details.oldTabName);

    // switch back to the old tab
    dialogApi.showTab(details.oldTabName);
  }
};

面板组件

面板可以包含布局组件和基本组件，其中包括用于显示信息以及用户交互和输入的组件。

不同标签中具有相同 name 的面板组件将在 对话框的数据对象中使用相同的值。这允许在标签之间传输数据。例如，charmap 和 emoticons 插件对话框在每个标签中都包含一个搜索输入字段。通过将所有搜索字段分配相同的名称，当用户切换标签时，在一个标签中输入的用户数据将被传输。

布局组件

一些面板组件可用于将布局应用于其他面板组件的数组。

bar

bar 是一种布局组件，可在对话框主体中创建一行项目。

{
  type: 'bar', // component type
  items: [ ... ] // array of panel components
}

collection

collection 是一种布局组件，可在对话框主体中创建一个包含一组小按钮的面板。例如，此组件用于 charmap 和 emoticons 插件的对话框中。

{
  type: 'collection', // component type
  name: 'collection-1', // identifier
  label: 'Collection Label'
}

要在集合中填充集合项，请在对话框的 initialData 属性中指定一个项数组。要更新集合中的项，请使用对话框 API 的 setData() 方法。每个项应包含 text、value 和 icon 属性。例如：

[
  {
    text: 'Bold',
    value: 'bold',
    icon: 'bold'
  },
  ... // 更多项目配置
]

grid

grid 是一种布局组件，可在对话框主体中创建列。

{
  type: 'grid', // 组件类型
  columns: 2, // 列数
  items: [ ... ] // 面板组件数组
}

label

label 是一种布局组件，可包裹其他组件，并在组件组上方添加标签。

{
  type: 'label', // 组件类型
  label: 'Caption', // 组标签的文本
  for: 'findtext', // 对话框标签组件的标识符
  items: [ ... ] // 面板组件数组
}

基本组件

这些面板组件用于显示信息或允许用户交互和输入。

alertbanner

alertbanner 是一种彩色横幅，旨在通知用户重要信息。alertbanner 有四种“级别”，每种级别以不同颜色显示。这些级别为：

• info

• warn

• error

• success

点击 alertbanner 中的图标会触发对话框配置中的 onAction 函数，并传递一个包含 alertbanner 组件的 name 和 value 的对象。若配置了 url 选项，则 value 为该选项的值，否则为空字符串。

{
  type: 'alertbanner', // 组件类型
  level: 'info',
  text: 'An <strong>informative</strong> message to the user',
  url: 'http://my.url',
  icon: 'question'
}

button

button 是一种可点击组件，可包含文本或图标。按钮有两种类型（主按钮和次按钮），区别仅在于样式不同。主按钮旨在突出显示，颜色取决于所选的 skin。

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

事件：与 button 组件交互会触发对话框配置中的 onAction 函数，并在 details 对象中传递按钮的 name。这让开发者可以为每个按钮创建点击处理程序。

默认值：mode:design - 该上下文属性会根据编辑器的当前状态动态启用或禁用按钮。仅当enabled为true时生效。详情请参阅：Context。

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

{
  type: 'button', // 组件类型
  text: 'Alpha',
  buttonType: 'primary',
  name: 'alpha-button',
  enabled: true,
  borderless: false,
  context: 'mode:design'
}

checkbox

checkbox是一个复合组件，包含复选框和标签，具有on和off两种状态。

事件：与checkbox组件交互会触发对话框配置中的onChange函数。

{
  type: 'checkbox', // 组件类型
  name: 'checkbox-1', // 标识符
  label: 'Checkbox Label', // 标签文本
  enabled: true, // 启用状态
  context: 'mode:design' // 当编辑器处于设计模式时复选框激活，仅在enabled为true时有效
}

colorinput

colorinput是一个专用复合组件，包含标签、输入字段和按钮，点击按钮会打开颜色选择器弹出窗口。用户可直接在输入框中键入hex颜色代码，或通过颜色面板选择颜色。颜色面板按钮会随所选颜色变化。

{
  type: 'colorinput', // 组件类型
  name: 'colorinput', // 标识符
  label: 'Color Label', // 标签文本
  context: 'mode:design' // 当编辑器处于设计模式时颜色输入组件激活，仅在enabled为true时有效
}

colorpicker

colorpicker组件是一个直观的颜色选择工具，类似现代图像编辑器中的颜色选择器。支持通过RGB滑块选择颜色，或直接输入RGB或hex颜色值。

{
  type: 'colorpicker', // 组件类型
  name: 'colorpicker', // 标识符
}

dropzone

dropzone是一个复合组件，支持拖放操作或浏览文件，可将文件列表发送处理并接收结果。拖放区域上方会显示文本标签。

事件：与dropzone组件交互会触发对话框配置中的onChange函数。

{
  type: 'dropzone', // 组件类型
  name: 'dropzone', // 标识符
  label: 'Dropzone', // 标签文本
  dropAreaLabel: 'Drag and drop files here', // 拖放区域文本（默认值：'Drop an image here'）
  buttonLabel: 'Browse files', // 浏览按钮文本（默认值：'Browse for an image'）
  allowedFileTypes: 'image/*', // MIME类型模式（默认值：'image/*'）
  allowedFileExtensions: ['.jpg', '.png', '.pdf'], // 允许的文件扩展名（默认值：images_file_types）
  context: 'mode:design' // 当编辑器处于设计模式时拖放区域激活
}

htmlpanel

htmlpanel组件可在对话框中渲染任意有效HTML内容。

尽管名称如此，HTMLpanel不能像panel和tabpanel那样作为主体组件使用。

{
  type: 'htmlpanel', // 组件类型
  html: '<div>Html goes here</div>'
}

iframe

iframe组件接收HTML文档字符串，并在对话框的iframe中显示。

如需用iframe替换整个对话框主体并通过URL加载内容，请使用URL dialog。

{
  type: 'iframe', // 组件类型
  name: 'iframe', // 标识符
  label: 'iframe 的描述', // 用于 iframe 的 title 属性的文本
  sandboxed: true,
  transparent: true
}

要在对话框打开时设置 iframe 的内容，请在对话框的 initialData 属性中以字符串形式指定文档 HTML。要更新 iframe 的内容，请使用 对话框 API 的 setData() 方法。例如：

dialogApi.setData({
  iframe: '<!DOCTYPE html>' +
          '<html>' +
          '<head></head>' +
          '<body><p>此处为内容。</p></body>' +
          '</html>'
})

imagepreview

imagepreview 是一个专用组件，允许预览和缩放任何图像。

{
  type: 'imagepreview', // 组件类型
  name: 'preview', // 标识符
  height: '100px', // 用于限制图像预览的可选 CSS 高度
}

imagepreview 组件的对话框数据由 URL 和可选的缩放因子组成。

{
  url: 'https://www.example.com/image.png', // 图像 URL
  zoom: 1.5 // 可选缩放因子
}

input

input 是一个复合组件，渲染一个标签和一个单行文本输入字段。

事件： 与 input 组件交互将在用户输入时触发对话框配置中的 onChange 函数。

{
  type: 'input', // 组件类型
  name: 'inputA', // 标识符
  inputMode: 'text',
  label: '输入标签', // 标签的文本
  placeholder: '示例', // 输入的占位符文本
  enabled: true, // 启用状态
  maximized: false, // 扩展宽度以占据尽可能多的空间
  context: 'mode:design' // 当编辑器处于设计模式时输入处于活动状态，仅当 enabled 为 true 时生效
}

inputMode

inputMode 是 input 的一个属性。

使用 inputMode 设置当用户聚焦输入元素时在移动设备上提供的屏幕键盘类型。

有关有效输入模式的列表，请参阅：MDN Web Docs - inputmode。

listbox

listbox 是一个复合组件，带有标签和一个供用户选择的选项下拉列表。该组件显示类似菜单的下拉列表，并允许向用户显示嵌套选项。

事件： 与 listbox 组件交互将触发对话框配置中的 onChange 函数。

{
  type: 'listbox', // 组件类型
  name: 'ListBoxA', // 标识符
  label: 'ListBox 标签',
  enabled: true, // 启用状态
  items: [
    { text: '一', value: 'one' },
    { text: '二', value: 'two' },
    { text: '子菜单', items: [
      { text: '三', value: 'three' }
    ]}
  ],
  context: 'mode:design' // 当编辑器处于设计模式时 listbox 处于活动状态，仅当 enabled 为 true 时生效
}

selectbox

selectbox 是一个复合组件，带有标签和一个供用户选择的单个选项下拉列表。

事件： 与 selectbox 组件交互将触发对话框配置中的 onChange 函数。

{
  type: 'selectbox', // 组件类型
  name: 'SelectA', // 标识符
  label: '选择标签',
  enabled: true, // 启用状态
  size: 1, // 可见值数量（可选）
  items: [
    { value: 'one', text: 'One' },
    { value: 'two', text: 'Two' }
  ],
  context: 'mode:design' // 当编辑器处于设计模式时 selectbox 激活，仅在 enabled 为 true 时生效
}

sizeinput

sizeinput 是一个专用的复合组件，包含两个标记为“Width”和“Height”的输入字段以及一个“ratio lock”按钮。它用于设置内容元素的尺寸。

事件： 与 sizeinput 组件的输入字段交互将在用户点击离开组件时触发对话框配置中的 onChange 函数。

{
  type: 'sizeinput', // 组件类型
  name: 'size', // 标识符
  label: 'Dimensions',
  enabled: true, // 启用状态
  context: 'mode:design' // 当编辑器处于设计模式时 sizeinput 激活，仅在 enabled 为 true 时生效
}

slider

slider 是一个带有标签和水平滑动条的专用组件。可用于让用户在指定范围内选择一个值。

事件： 与 slider 组件交互将在用户释放滑块时触发对话框配置中的 onChange 函数。

{
  type: 'slider', // 组件类型
  name: 'vol', // 标识符
  label: 'Volume',
  min: 0, // 最小值
  max: 100 // 最大值
}

table

table 是用于渲染简单表格的布局组件。

{
  type: 'table', // 组件类型
  header: [ 'Heading 1', 'Heading 2', 'Heading 3' ],
  cells: [
    [ 'Cell 1', 'Cell 2', 'Cell 3' ],
    [ 'Cell 4', 'Cell 5', 'Cell 6' ]
  ]
}

textarea

textarea 是多行文本字段。

事件： 与 textbox 组件交互将触发对话框配置中的 onChange 函数。

{
  type: 'textarea', // 组件类型
  name: 'text-a', // 标识符
  label: 'Text: ',
  placeholder: 'example',
  enabled: true, // 启用状态
  maximized: false, // 宽度扩展以占据尽可能多的空间
  context: 'mode:design' // 当编辑器处于设计模式时 textarea 激活，仅在 enabled 为 true 时生效
}

tree

tree 是用于呈现树形结构的组件。例如包含其他文件夹和文件的文件夹列表。

tree 可以包含两种不同的项：

• 一个目录；以及

• 一个叶子。

目录项可以包含其他目录项和叶子项。

此外，tree 项可以设置为 fetch 其他 TinyMCE 菜单。

激活树中的项

激活目录项会在两个状态之间切换项：折叠和展开。

激活叶子项会触发 onLeafAction 回调函数。

项可通过点击、按键或键盘导航激活。

使用键盘进行树导航和激活

• 向上或向下箭头键高亮项。

• 如果高亮项是目录，向左或向右箭头键会折叠或展开目录项。

• 如果高亮项是叶子，按下Return键会触发 onLeafAction 回调函数。

onLeafAction： 与 tree 组件交互将执行在对话框配置中设置的 onLeafAction 回调函数。

tinymce.init({
  selector: "textarea",
  toolbar: "tree",
  setup: (ed) => {
    ed.ui.registry.addButton('tree', {
      text: 'Tree toolbar button',
      onAction: () => {
        ed.windowManager.open({
          title: 'Tree dialog',
          buttons: [{
	    type: 'cancel',
	    text: 'Cancel'
	  }],
          body : {
            type: 'panel',
            items: [{
              type: 'tree',
              onLeafAction: (id) => {
                console.log('clicked on item with id', id);
              },
              items: [
                {
                  type: 'directory',
                  id: 'dir',
                  title: 'Directory',
                  menu: {
                    icon: 'image-options',
                    type: 'menubutton',
                    fetch: (success) => success([
                      'bold',
                      'italic',
                      'underline',
                      {
                          type: 'menuitem',
                          text: 'Menu item',
                          onAction: () => {
                            console.log('dir menu item');
                          }
                      }
                    ])
                  },
                  children: [
                    {
                      type: 'leaf',
                      title: 'Leaf 3',
                      id: '3'
                    },
                    {
                      type: 'leaf',
                      title: 'Leaf 4',
                      id: '4',
                      menu: {
                        icon: 'image-options',
                        type: 'menubutton',
                        fetch: (success) => success([
                          'blocks',
                          'fontfamily',
                          'fontsize',
                          {
                            type: 'menuitem',
                            text: 'Menu item',
                            onAction: () => {
                              console.log('leaf menu item'); // 为了演示目的
                            }
                          }
                        ])
                      }
                    },
                  ]
                },
                {
                  type: 'leaf',
                  title: 'Leaf 5',
                  id: '5'
                },
                {
                  type: 'leaf',
                  title: 'Leaf 6',
                  id: '6'
                },
              ]
            }]
          }
        });
      }
    });
  },
});

urlinput

urlinput 是一个专用的复合组件，用于URL输入或文件上传。它包含一个标签、一个文本输入框和一个可选的文件选择器按钮。urlinput组件还包括一个 typeahead 下拉菜单，会显示与当前输入文本匹配的之前输入的URL，并在用户输入时更新。

只有配置了 file_picker_callback 时，文件选择器按钮才会显示。

事件：与 selectbox 组件交互时，当用户点击离开该组件时，将触发对话框配置中的 onChange 函数。

urlinput 示例

用于链接的urlinput

文件选择器将接受任何文件类型；typeahead将包含5个之前输入的URL以及文档中的所有锚点目标和标题；文件选择器按钮将有一个自定义工具提示。

{
  type: 'urlinput', // 组件类型
  name: 'url', // 标识符
  filetype: 'file', // 允许任何文件类型
  label: 'Url', // 组件标签的文本
  enabled: true, // 启用状态
  picker_text: 'Find local files', // 为文件选择器按钮设置自定义提示文本
  context: 'mode:design' // 当编辑器处于设计模式时，urlinput 才处于活动状态，仅在 enabled 为 true 时生效
}

用于图像上传的 urlinput

文件选择器将仅接受图像，并且自动补全功能将包含之前输入过的5个图像URL。

{
  type: 'urlinput', // 组件类型
  name: 'src', // 标识符
  filetype: 'image', // 将文件类型限制为图像类型
  label: 'Source', // 组件标签的文本
  enabled: true, // 启用状态
  context: 'mode:design' // 当编辑器处于设计模式时，urlinput 才处于活动状态，仅在 enabled 为 true 时生效
}