TinyMCE 5 webinar: Q1 review, migration tips, roadmap —  Register today
TinyMCE 5 webinar : Q1 review, migration tips, roadmap

Dialog components

Dialog component summary is a reference list of all TinyMCE UI components that can be used to display simple information.

Contribute to this page

This chapter describes the Dialog component summary is a reference list of all TinyMCE UI components that can be used to display simple information.

alertbanner

An alertbanner is a color-coded banner to alert the user of a problem. A URL may be provided to direct users to a reference site that may resolve the informed issue.

{
  type: 'alertbanner',
  level: 'info', // 'info' | 'warn' | 'error' | 'success'
  text: 'An informative message to the user',
  icon: string
}

bar

A bar is a layout component that creates a single row of items in the dialog body.

{
  type: 'bar',
  items: [ ]
}

button

A button is a component to be used inside the dialog body. These buttons differ from toolbar buttons and dialog footer buttons.

{
  type: 'button',
  text: 'Alpha',
  primary: true,
  name: 'alpha-button'
}

checkbox

A checkbox is a component used to toggle states to on or off.

{
  type: 'checkbox',
  name: 'checkbox-1',
  label: 'Checkbox Label'
}

collection

A collection is a layout component that creates a panel containing a collection of symbols in the dialog body.

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

Note: To populate the collection with data, specify an array of items in the dialogs initialData property. Each item should contain a text, value, and icon property.

colorinput

A colorinput is a specialized input field which takes RGB colors and will render the sample color typed.

{
  type: 'colorinput',
  name: 'colorA',
  label: 'Color Label'
}

colorpicker

A colorpicker is an intuitive color picker tool similar to image editors.

{
  type: 'colorpicker',
  name: 'color',
  label: 'Color A'
}

dropzone

A dropzone is a component that catches drag and drops items or lets the user browse that can send a list of files for processing and receive the result.

{
  type: 'dropzone',
  name: 'dropzone',
  label: 'Dropzone'
}

grid

A grid is a layout component that creates columns in the dialog body.

{
  type: 'grid',
  columns: 2,
  items: [ ]
}

htmlpanel

An htmlpanel is similar to panel. It only takes a string of HTML.

{
  type: 'htmlpanel',
  html: '<div>html</div>'
}

iframe

An iframe is a component used to define the values of an iframe.

{
  name: 'IframeName',
  type: 'iframe',
  label: 'Description of iframe',
  sandboxed: true
}

input

An input is a single line text field, and also renders a label element.

{
  type: 'input',
  name: 'inputA',
  label: 'Input Label',
  placeholder: 'example'
}

label

A label is a component that wraps other components and renders a label element.

{
  type: 'label',
  label: 'Caption',
  items: [ ]
}

panel

A panel is a basic container, that holds other components, we can compose many components inside a panel. In HTML terms consider a panel a <div> wrapper. A dialog body configuration must begin with either a panel or a tabpanel.

{
  type: 'panel',
  items: [ ... ]
}

selectbox

A selectbox allows users to select a choice from a list of many options.

{
  type: 'selectbox',
  name: 'SelectA',
  label: 'Select Label',
  items: [
    { value: 'one', text: 'One' },
    { value: 'two', text: 'Two' }
  ]
}

sizeinput

A sizeinput is a specialized input field that can lock ratios, see image dialog.

{
  type: 'sizeinput',
  name: 'size',
  label: 'Dimensions'
}

table

A table is a layout component that renders a simple table.

{
  type: 'table',
  header: [ 'Heading 1', 'Heading 2', 'Heading 3' ],
  cells: [
    [ 'Cell 1', 'Cell 2', 'Cell 3' ],
    [ 'Cell 4', 'Cell 5', 'Cell 6' ]
  ]
}

tabpanel

A tabpanel is similar to a panel, where it can hold other components. Tabpanel is a layout component that will separate sections using tabs. Each tab is a panel that can contain different components. A dialog body configuration must begin with either a panel or a tabpanel.

{
  type: 'tabpanel',
  tabs: [
    {
      title: 'First Tab',
      items: [ .... ]
    },
    ...
  ]
}

textarea

A textarea is a multiline text field.

{
  type: 'textarea',
  name: 'text-a',
  label: 'Text: ',
  placeholder: 'example'
}

urlinput

A urlinput is a specialized input text field for image dialog. This will include a typeahead for previous image URLs entered.

// URL input for image dialog
// This will include a typeahead for previous image urls entered
{
  name: 'src',
  type: 'urlinput',
  filetype: 'image',
  label: 'Source'
}
// URL input for link dialog
// The main difference from the image mode is that it will include typeahead
// Information for all anchor targets and headings in the document as well
// As the history of 5 previously entered URLs.
{
  name: 'url',
  type: 'urlinput',
  filetype: 'file',
  label: 'Url'
}
// Note that "filetype" also accepts "media"

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.