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

CKEDITOR.plugins.autocomplete.view

class since 4.10.0 private
See source

Class representing the autocomplete view.

In order to use a different view, implement a new view class and override the CKEDITOR.plugins.autocomplete.getView method.

myAutocomplete.prototype.getView = function() {
    return new myView( this.editor );
};

You can also modify this autocomplete instance on the fly.

myAutocomplete.prototype.getView = function() {
    // Call the original getView method.
    var view = CKEDITOR.plugins.autocomplete.prototype.getView.call( this );

    // Override one property.
    view.itemTemplate = new CKEDITOR.template( '<li data-id={id}><img src="{iconSrc}" alt="..."> {name}</li>' );

    return view;
};

Note: This class is marked as private, which means that its API might be subject to change in order to provide further enhancements.

Filtering

Properties

  • readonly

    document : document

    See source

    The document to which the view is attached. It is set by the append method.

  • readonly

    editor : editor

    See source

    The editor instance.

  • readonly

    element : element

    See source

    The view's main element. It is set by the append method.

  • readonly

    itemTemplate : template

    See source

    The panel's item template used to render matches in the dropdown.

    You can use data item properties to customize the template.

    A minimal template must be wrapped with a HTML li element containing the data-id="{id}" attribute.

    var itemTemplate = '<li data-id="{id}"><img src="{iconSrc}" alt="{name}">{name}</li>';

  • readonly

    selectedItemId : Number | String

    See source

    The ID of the selected item.

Static properties

Methods

  • constructor( editor ) → view

    See source

    Creates the autocomplete view instance.

    Parameters

    editor : editor

    The editor instance.

    Returns

    view

  • append()

    See source

    Appends the main element to the DOM.

  • appendItems( itemsFragment )

    See source

    Removes existing items and appends given items to the element.

    Parameters

    itemsFragment : documentFragment

    The document fragment with item elements.

  • attach()

    See source

    Attaches the view's listeners to the DOM elements.

  • capture()

    See source

    Register event handler under the capturing stage on supported target.

  • close()

    See source

    Closes the panel.

  • createItem( item ) → element

    See source

    Creates the item element based on the itemTemplate.

    Parameters

    item : item

    The item for which an element will be created.

    Returns

    element

  • define( name, meta )

    See source

    Predefine some intrinsic properties on a specific event name.

    Parameters

    name : String

    The event name

    meta : Object

  • fire( eventName, [ data ], [ editor ] ) → Boolean | Object

    See source

    Fires an specific event in the object. All registered listeners are called at this point.

    someObject.on( 'someEvent', function() { ... } );
someObject.on( 'someEvent', function() { ... } );
someObject.fire( 'someEvent' );             // Both listeners are called.

someObject.on( 'someEvent', function( event ) {
    alert( event.data );                    // 'Example'
} );
someObject.fire( 'someEvent', 'Example' );

    Parameters

    eventName : String

    The event name to fire.

    [ data ] : Object

    Data to be sent as the CKEDITOR.eventInfo.data when calling the listeners.

    [ editor ] : editor

    The editor instance to send as the CKEDITOR.eventInfo.editor when calling the listener.

    Returns

    Boolean | Object

    A boolean indicating that the event is to be canceled, or data returned by one of the listeners.

  • fireOnce( eventName, [ data ], [ editor ] ) → Boolean | Object

    See source

    Fires an specific event in the object, releasing all listeners registered to that event. The same listeners are not called again on successive calls of it or of fire.

    someObject.on( 'someEvent', function() { ... } );
someObject.fire( 'someEvent' );         // Above listener called.
someObject.fireOnce( 'someEvent' );     // Above listener called.
someObject.fire( 'someEvent' );         // No listeners called.

    Parameters

    eventName : String

    The event name to fire.

    [ data ] : Object

    Data to be sent as the CKEDITOR.eventInfo.data when calling the listeners.

    [ editor ] : editor

    The editor instance to send as the CKEDITOR.eventInfo.editor when calling the listener.

    Returns

    Boolean | Object

    A booloan indicating that the event is to be canceled, or data returned by one of the listeners.

  • getItemById( itemId ) → element

    See source

    Gets the item element by the item ID.

    Parameters

    itemId : Number | String

    Returns

    element

    The item element.

  • getViewPosition( range ) → Object

    See source

    Returns the view position based on a given range.

    Indicates the start position of the autocomplete dropdown. The value returned by this function is passed to the setPosition method by the updatePosition method.

    Parameters

    range : range

    The range of the text match.

    Returns

    Object

    Represents the position of the caret. The value is relative to the panel's offset parent.

  • hasListeners( eventName ) → Boolean

    See source

    Checks if there is any listener registered to a given event.

    var myListener = function() { ... };
someObject.on( 'someEvent', myListener );
alert( someObject.hasListeners( 'someEvent' ) );    // true
alert( someObject.hasListeners( 'noEvent' ) );      // false

    Parameters

    eventName : String

    The event name.

    Returns

    Boolean

  • isItemElement( node ) → Boolean

    See source

    Checks whether a given node is the item element.

    Parameters

    node : node

    Returns

    Boolean

  • on( eventName, listenerFunction, [ scopeObj ], [ listenerData ], [ priority ] ) → Object

    See source

    Registers a listener to a specific event in the current object.

    someObject.on( 'someEvent', function() {
    alert( this == someObject );        // true
} );

someObject.on( 'someEvent', function() {
    alert( this == anotherObject );     // true
}, anotherObject );

someObject.on( 'someEvent', function( event ) {
    alert( event.listenerData );        // 'Example'
}, null, 'Example' );

someObject.on( 'someEvent', function() { ... } );                       // 2nd called
someObject.on( 'someEvent', function() { ... }, null, null, 100 );      // 3rd called
someObject.on( 'someEvent', function() { ... }, null, null, 1 );        // 1st called

    Note: CKEditor's event system has a limitation that one function cannot be used as a listener for the same event more than once. Hence, to reuse it with multiple listeners, it should be wrapped into additional wrapper function:

    function listener( evt ) { ... };

someObject.on( 'someEvent', function() {
    listener();
} );

someObject.on( 'someEvent', function( evt ) {
    listener( evt );
} );

    Parameters

    eventName : String

    The event name to which listen.

    listenerFunction : Function

    The function listening to the event. A single CKEDITOR.eventInfo object instanced is passed to this function containing all the event data.

    [ scopeObj ] : Object

    The object used to scope the listener call (the this object). If omitted, the current object is used.

    [ listenerData ] : Object

    Data to be sent as the CKEDITOR.eventInfo.listenerData when calling the listener.

    [ priority ] : Number

    The listener priority. Lower priority listeners are called first. Listeners with the same priority value are called in registration order.

    Defaults to 10

    Returns

    Object

    An object containing the removeListener function, which can be used to remove the listener at any time.

  • once()

    See source

    Similiar with on but the listener will be called only once upon the next event firing.

    CKEDITOR.event.on

  • open()

    See source

    Opens the panel.

  • removeAllListeners()

    See source

    Remove all existing listeners on this object, for cleanup purpose.

  • removeListener( eventName, listenerFunction )

    See source

    Unregisters a listener function from being called at the specified event. No errors are thrown if the listener has not been registered previously.

    var myListener = function() { ... };
someObject.on( 'someEvent', myListener );
someObject.fire( 'someEvent' );                 // myListener called.
someObject.removeListener( 'someEvent', myListener );
someObject.fire( 'someEvent' );                 // myListener not called.

    Parameters

    eventName : String

    The event name.

    listenerFunction : Function

    The listener function to unregister.

  • scrollElementTo( itemElement )

    See source

    Scrolls the list so the item element is visible in it.

    Parameters

    itemElement : element

  • selectItem( itemId )

    See source

    Selects the item in the panel and scrolls the list to show it if needed. The currently selected item is deselected first.

    Parameters

    itemId : Number | String

    The ID of the item that should be selected.

  • setPosition( rect )

    See source

    Sets the position of the panel. This method only performs the check for the available space below and above the specified rect and positions the panel in the best place.

    This method is used by the updatePosition method which controls how the panel should be positioned on the screen, for example based on the caret position and/or the editor position.

    Parameters

    rect : Object

    Represents the position of a vertical (e.g. a caret) line relative to which the panel should be positioned.

  • updateItems( items )

    See source

    Updates the list of items in the panel.

    Parameters

    items : item[]

    .

  • updatePosition( range )

    See source

    Updates the position of the panel.

    By default this method finds the position of the caret and uses setPosition to move the panel to the best position close to the caret.

    Parameters

    range : range

    The range of the text match.

  • private

    createElement() → element

    See source

    Creates and returns the view's main element.

    Returns

    element

Static methods

  • mixed static

    implementOn( targetObject )

    See source

    Implements the CKEDITOR.event features in an object.

    var myObject = { message: 'Example' };
CKEDITOR.event.implementOn( myObject );

myObject.on( 'testEvent', function() {
    alert( this.message );
} );
myObject.fire( 'testEvent' ); // 'Example'

    Parameters

    targetObject : Object

    The object into which implement the features.

Events