Create Custom Notifications
Learn how to make custom dialogs with NotificationManager.
Contribute to this pageIn 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
Text is the most critical setting when opening a notification. The "text" property sets the text that is displayed at the center of the notification.
editor.notificationManager.open({
text: 'A test informational notification.'
});
Type
There are several types of notifications that differ in color and purpose. These are:
- success
- info
- warning
- error
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();
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.