The optional Notification and Notification Aggregator plugins introduced in CKEditor 4.5 make it possible to show the user information about the status of selected operations directly in the editor.

The new notification system lets you display all sorts of information in a consistent way because all plugins using the notification API will show information in the same way. This API also allows you to integrate the editor’s notifications with your website (your CMS for example). Note that notifications do not work with dialog windows so no dialog should be displayed when the notification is to be shown.

Note that a developer may implement the notification interface in a custom way, for example to show the notification with a slide-in animation. In such case updating one notification is not the same as hiding one and showing another. One notification should show the status of one process, so it is better to update it to the success type instead of creating a new one every time the status changes.

To learn more about the notification API, check the notification documentation.

By default notifications are displayed at the top center of the editable area. However, they try to be visible as long as possible without leaving the editable area. It means that notifications will move if a part of the editable will be out of the viewport, so you can edit a very long document and the notification will still be visible. The notifications also move below the toolbar if you are using the floating user interface, but they will not be visible at all if the editor is not visible at all.

Notifications can also hide after a timeout.

By default, info and success notifications hide after 5 seconds — this can be changed using the notification_duration option. The notification duration can also be changed on an instance basis.

The warning notifications need to be hidden manually.

The progress notifications are also not hidden automatically. They wait for the next progress update and to be finally changed to success or warning.

The user can always hide notifications manually by using the X button or the Esc key.

If you want to make sure that a notification will be shown after an update, that update needs to be marked asimportant. This matters also with regard to accessibility — important updates will be read by screen readers while the rest of the updates will not, because we do not want to spam the user with tons of messages if a notification is updated very often.

If you want to replace the standard notification interface with a custom one or you want to integrate editor notifications with your website or CMS, you can do it by listening to notification events: notificationShow, notificationUpdate and notificationHide.

To prevent notifications from being shown it is not enough to prevent notificationShow, but you need to cancel notificationUpdate too, otherwise important updates will display the notification.

editor.on( 'notificationShow', function( evt ) {
alert( evt.data.notification.message );
// Do not show the default notification.
evt.cancel();
} );
editor.on( 'notificationUpdate', function( evt ) {
// Do not show the notification even if the update was important.
evt.cancel();
} );

Note that if you cancel the notificationUpdate event, it only means that the notification will not be shown even if the update was important. The notification object will be updated anyway, including the element property, so you do not need to do it manually. The event is fired before updating the notification object, so it is possible to compare old and new values:

It is also possible to create a separate template for a single item message, so that it would not look strange if the aggregator was handling only one task (for example: Loading file. instead of Loading files 1 of 1.).