Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Create custom notifications

Learn how to make custom dialogs with NotificationManager.

Contribute to this page

TinyMCE can display customized notifications.

Interactive example

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'
});

For a list of the icon identifiers, see: Available icons.

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.