Report an issue
Class

CKEDITOR.plugins.notification

class since 4.5.0

Notification class. Notifications are used to display short messages to the user. They might be used to show the result of asynchronous actions or information about changes in the editor content. It is recommended to use them instead of alert dialogs. They should not be used if a user response is required nor with dialog windows (e.g. in dialog validation).

There are four types of notifications available, see the type property.

Note that the notification constructor only creates a notification instance. To show it, use the show method:

var notification = new CKEDITOR.plugins.notification( editor, { message: 'Foo' } );
notification.show();

You can also use the CKEDITOR.editor.showNotification method:

editor.showNotification( 'Foo' );

All of the notification actions: (show, update and hide) fire cancelable events on the related CKEDITOR.editor instance so you can integrate editor notifications with your website notifications.

Refer to the Notifications article for more information about this feature.

Filtering

Properties

  • readonly

    area : area

  • readonly

    duration : Number

    Notification duration. Determines after how many milliseconds the notification should close automatically. 0 means that the notification will not close automatically and that the user needs to close it manually. The default value for warning and progress notifications is 0. For info and success the value can either be set through the CKEDITOR.config.notification_duration configuration option or equals 5000 if the configuration option is not set.

  • readonly

    editor : editor

    The editor instance.

  • readonly

    element : element

    Notification DOM element. There is one element per notification. It is created when the notification is created, even if it is not shown. If the notification is hidden, the element is detached from the document but not deleted. It will be reused if the notification is shown again.

  • readonly

    id : Number

    Unique notification ID.

  • readonly

    message : String

    Message displayed in the notification.

  • readonly

    progress : Number

    If the notification type is 'progress', this is the progress from 0 to 1.

  • readonly

    type : String

    Notification type. There are four types available:

    • info (default) – Information for the user (e.g. "File is uploading.", "ACF modified content."),
    • warning – Warning or error message (e.g. "This type of file is not supported.", "You cannot paste the script."),
    • success – Information that an operation finished successfully (e.g. "File uploaded.", "Data imported.").
    • progress – Information about the progress of an operation. When the operation is done, the notification type should be changed to success.

Methods

  • constructor( editor, options ) → notification

    Create a notification object. Call show to show the created notification.

    Parameters

    editor : editor

    The editor instance.

    options : Object

    Returns

    notification
  • hide()

    Removes the notification element from the notification area.

    Fires the CKEDITOR.editor.notificationHide event.

  • isVisible() → Boolean

    Returns true if the notification is in the notification area.

    Returns

    Boolean

    true if the notification is in the notification area.

  • show()

    Adds the notification element to the notification area. The notification will be hidden automatically if duration is set.

    Fires the CKEDITOR.editor.notificationShow event.

  • update( options )

    Updates the notification object and element.

    Fires the CKEDITOR.editor.notificationUpdate event.

    Parameters

    options : Object
  • private

    _createElement() → element

    Creates the notification DOM element.

    Returns

    element

    Notification DOM element.

  • private

    _createProgressElement() → element

    Creates a progress element for the notification element.

    Returns

    element

    Progress element for the notification element.

  • private

    _getClass() → String

    Gets the notification CSS class.

    Returns

    String

    Notification CSS class.

  • private

    _getPercentageProgress() → String

    Gets the progress as a percentage (ex. 0.3 -> 30%).

    Returns

    String

    Progress as a percentage.

  • private

    _hideAfterTimeout()

    Hides the notification after a timeout.