CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.plugins.notification

class since 4.5.0
See source

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

    See source

    Notification area reference.

  • readonly

    duration : Number

    See source

    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

    See source

    The editor instance.

  • readonly

    element : element

    See source

    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

    See source

    Unique notification ID.

  • readonly

    message : String

    See source

    Message displayed in the notification.

  • readonly

    progress : Number

    See source

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

  • readonly

    type : String

    See source

    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

    See source

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

    Parameters

    editor : editor

    The editor instance.

    options : Object

    Returns

    notification

  • hide()

    See source

    Removes the notification element from the notification area.

    Fires the CKEDITOR.editor.notificationHide event.

  • isVisible() → Boolean

    See source

    Returns true if the notification is in the notification area.

    Returns

    Boolean

    true if the notification is in the notification area.

  • show()

    See source

    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 )

    See source

    Updates the notification object and element.

    Fires the CKEDITOR.editor.notificationUpdate event.

    Parameters

    options : Object

  • private

    _createElement() → element

    See source

    Creates the notification DOM element.

    Returns

    element

    Notification DOM element.

  • private

    _createProgressElement() → element

    See source

    Creates a progress element for the notification element.

    Returns

    element

    Progress element for the notification element.

  • private

    _getClass() → String

    See source

    Gets the notification CSS class.

    Returns

    String

    Notification CSS class.

  • private

    _getPercentageProgress() → String

    See source

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

    Returns

    String

    Progress as a percentage.

  • private

    _hideAfterTimeout()

    See source

    Hides the notification after a timeout.