CKEDITOR.plugins.autocomplete.view

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

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;
};

Properties

• readonly

  document : documentCKEDITOR.plugins.autocomplete.view#document

  See source

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

• readonly

  editor : editorCKEDITOR.plugins.autocomplete.view#editor

  See source

  The editor instance.

• readonly

  element : elementCKEDITOR.plugins.autocomplete.view#element

  See source

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

• readonly

  itemTemplate : templateCKEDITOR.plugins.autocomplete.view#itemTemplate

  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 | StringCKEDITOR.plugins.autocomplete.view#selectedItemId

  See source

  The ID of the selected item.

Static properties

• mixed static

  useCapture : BooleanCKEDITOR.plugins.autocomplete.view#useCapture

  See source

Methods

• constructor( editor ) → viewCKEDITOR.plugins.autocomplete.view#constructor

  See source

  Creates the autocomplete view instance.

  Parameters

  editor : editor

  The editor instance.

  Returns

  view

  append()CKEDITOR.plugins.autocomplete.view#append

  See source

  Appends the main element to the DOM.

  appendItems( itemsFragment )CKEDITOR.plugins.autocomplete.view#appendItems

  See source

  Removes existing items and appends given items to the element.

  Parameters

  itemsFragment : documentFragment

  The document fragment with item elements.

  attach()CKEDITOR.plugins.autocomplete.view#attach

  See source

  Attaches the view's listeners to the DOM elements.

  capture()CKEDITOR.plugins.autocomplete.view#capture

  See source

  Register event handler under the capturing stage on supported target.

  close()CKEDITOR.plugins.autocomplete.view#close

  See source

  Closes the panel.

  createItem( item ) → elementCKEDITOR.plugins.autocomplete.view#createItem

  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 )CKEDITOR.plugins.autocomplete.view#define

  See source

  Predefine some intrinsic properties on a specific event name.

  Parameters

  name : String

  The event name

  meta : Object

  fire( eventName, [ data ], [ editor ] ) → Boolean | ObjectCKEDITOR.plugins.autocomplete.view#fire

  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 | ObjectCKEDITOR.plugins.autocomplete.view#fireOnce

  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 ) → elementCKEDITOR.plugins.autocomplete.view#getItemById

  See source

  Gets the item element by the item ID.

  Parameters

  itemId : Number | String

  Returns

  element

  The item element.

  getViewPosition( range ) → ObjectCKEDITOR.plugins.autocomplete.view#getViewPosition

  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 ) → BooleanCKEDITOR.plugins.autocomplete.view#hasListeners

  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 ) → BooleanCKEDITOR.plugins.autocomplete.view#isItemElement

  See source

  Checks whether a given node is the item element.

  Parameters

  node : node

  Returns

  Boolean

  on( eventName, listenerFunction, [ scopeObj ], [ listenerData ], [ priority ] ) → ObjectCKEDITOR.plugins.autocomplete.view#on

  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()CKEDITOR.plugins.autocomplete.view#once

  See source

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

  CKEDITOR.event.on

  open()CKEDITOR.plugins.autocomplete.view#open

  See source

  Opens the panel.

  removeAllListeners()CKEDITOR.plugins.autocomplete.view#removeAllListeners

  See source

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

  removeListener( eventName, listenerFunction )CKEDITOR.plugins.autocomplete.view#removeListener

  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 )CKEDITOR.plugins.autocomplete.view#scrollElementTo

  See source

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

  Parameters

  itemElement : element

  selectItem( itemId )CKEDITOR.plugins.autocomplete.view#selectItem

  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 )CKEDITOR.plugins.autocomplete.view#setPosition

  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 )CKEDITOR.plugins.autocomplete.view#updateItems

  See source

  Updates the list of items in the panel.

  Parameters

  items : item[]

  .

  updatePosition( range )CKEDITOR.plugins.autocomplete.view#updatePosition

  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() → elementCKEDITOR.plugins.autocomplete.view#createElement

  See source

  Creates and returns the view's main element.

  Returns

  element

  Static methods

  • mixed static

    implementOn( targetObject )CKEDITOR.plugins.autocomplete.view#implementOn

    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

    • change-selectedItemId( evt )CKEDITOR.plugins.autocomplete.view#change-selectedItemId

      See source

      Event fired when the selectedItemId property changes.

      Parameters

      evt : eventInfo

    • click-item( evt )CKEDITOR.plugins.autocomplete.view#click-item

      See source

      Event fired when an item in the panel is clicked.

      Parameters

      evt : eventInfo