Create Custom Notifications

Learn how to make custom dialogs with NotificationManager.

Contribute to this page

In version 4.3 of TinyMCE, a new feature was added to allow you to display notifications. These notifications can be customized in several ways.

Text

By far the most important setting when opening a notification, the "text" property will set the text that is displayed at the center of the notification.

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

Type

There are several notification types that differ in colour and purpose. These are:

To set a notification type, set the "type" property when opening the notification. Leaving this property blank will use the default style.

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

Timeout

By setting the "timeout" property, the notification will automatically close after the provided value's time has elapsed in milliseconds.

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

Close Button

By setting the "closeButton" property to false in conjunction with a non-zero timeout, you may disable the close button to the right of the notification.

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

By setting the "icon" property, the notification will 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

By setting the "progressBar" property to true, the notification will 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
});

To set the current progress of this progress bar, set the value of the progress bar's value property to between 0 and 100.

notification.progressBar.value(50);

You can also close the last shown notification by calling:

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

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.