Create custom notifications

Learn how to make custom dialogs with NotificationManager.

Contribute to this page

TinyMCE can display customized notifications.

Text

The text property sets the text that is displayed at the center of the notification. This is the most important setting when opening a notification.

editor.notificationManager.open({
  text: 'A test informational notification.'
});

Type

The following notification types differ in color and purpose:

  • success
  • info
  • warning
  • error

Set the type property when opening the notification. The default style is used if this property is not set.

editor.notificationManager.open({
  text: 'A test informational notification.',
  type: 'info'
});

Timeout

The notification automatically closes after the value set in the timeout property elapses in milliseconds.

editor.notificationManager.open({
  text: 'A test notification that will close automatically after 5 seconds.',
  timeout: 5000
});

Close Button

Disable the close button to the right of the notification by setting the closeButton property to false in conjunction with a timeout property that is not zero.

editor.notificationManager.open({
  text: 'A test notification that will close automatically after 5 seconds and has the close button disabled.',
  timeout: 5000,
  closeButton: false
});

Icon

Set the icon property to display an icon to the left of the text.

editor.notificationManager.open({
  text: 'A test notification that contains a bold icon.',
  icon: 'bold'
});

Progress Bar

Set the progressBar property type to True to display a progress bar to the left of the close button and to the right of the text.

var notification = editor.notificationManager.open({
  text: 'A test notification that contains a progress bar.',
  progressBar: true
});

Set the progressBar property between 0 and 100 to set the progress of the progress bar.

notification.progressBar.value(50);

To close the last shown notification, call the following method:

// Close the last shown notification.
top.tinymce.activeEditor.notificationManager.close();

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.