CKEditor 4
Report an issue
Class

CKEDITOR.plugins.notification

class since 4.5

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

  • area : area

    readonly

    Notification area reference.

  • duration : Number

    readonly

    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.

  • editor : editor

    readonly

    The editor instance.

  • element : element

    readonly

    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.

  • id : Number

    readonly

    Unique notification ID.

  • message : String

    readonly

    Message displayed in the notification.

  • progress : Number

    readonly

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

  • type : String

    readonly

    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
    Properties
    message : String

    The message displayed in the notification.

    [ type ] : String

    Notification type, see type.

    Defaults to 'info'

    [ progress ] : Number

    If the type is progress this may be a progress from 0 to 1.

    Defaults to 0

    [ duration ] : Number

    How long the notification will be visible, see duration.

    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
    Properties
    [ message ] : String

    message

    [ type ] : String

    type

    [ progress ] : Number

    progress

    [ duration ] : Number

    duration

    [ important ] : Boolean

    If the update is important, the notification will be shown if it was hidden and read by screen readers.

    Defaults to false

  • _createElement() → element

    private

    Creates the notification DOM element.

    Returns

    element

    Notification DOM element.

  • _createProgressElement() → element

    private

    Creates a progress element for the notification element.

    Returns

    element

    Progress element for the notification element.

  • _getClass() → String

    private

    Gets the notification CSS class.

    Returns

    String

    Notification CSS class.

  • _getPercentageProgress() → String

    private

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

    Returns

    String

    Progress as a percentage.

  • _hideAfterTimeout()

    private

    Hides the notification after a timeout.