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

CKEDITOR.ui.balloonToolbarView

class private
See source

A class representing the view of the balloon toolbar, used by CKEDITOR.ui.balloonToolbar.

Filtering

Properties

Methods

  • constructor( editor, definition ) → balloonToolbarView

    since 4.8.0

    Creates a balloon toolbar view instance.

    See source

    Parameters

    editor : editor

    The editor instance for which the toolbar is created.

    definition : Object

    An object containing the toolbar definition. See CKEDITOR.ui.balloonPanel documentation for an example definition.

    Returns

    balloonToolbarView

  • _getViewPaneRect( window ) → Object

    inherited

    See source

    Parameters

    window : window

    Returns

    Object

    Returns viewport position, taking scroll offset into account.

    Properties
    top : Number
    bottom : Number
    left : Number
    right : Number

  • activateShowListener( id )

    inherited

    Activates an event listener associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListener, addShowListener, removeShowListener.

    See source

    Parameters

    id : Object

  • activateShowListeners()

    inherited

    Activates all event listeners associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListeners, addShowListener, removeShowListener.

    See source

  • addShowListener( listener ) → Object

    inherited

    Adds an event listener associated with this balloon panel. This listener will be activated on panel show and deactivated on panel hide. See showListeners, activeShowListeners, activateShowListeners, deactivateShowListeners.

    See source

    Parameters

    listener : Function

    A function that, if called, attaches the listener and returns the listener object.

    Returns

    Object

    An object containing the removeListener method that removes the listener from the collection.

  • attach( elementOrSelection, [ options ] )

    inherited

    Places the balloon panel next to a specified element or a selection so the tip of the balloon's triangle touches that element or the center of the selection. Once the panel is attached it gains focus.

    See source

    Parameters

    elementOrSelection : element | selection

    The element or selection to which the panel is attached. Since 4.11.0 instead of an element it is possible to pass a selection CKEDITOR.dom.selection.

    [ options ] : Object | element | Boolean

    Since 4.8.0 this parameter works as an options object.

    If a CKEDITOR.dom.element/Boolean instance is given, this parameter acts as an options.focusElement.

    Properties
    [ focusElement ] : element | Boolean

    The element to be focused after the panel is attached. By default the panel property of parts will be focused. You might specify the element to be focused by passing any CKEDITOR.dom.element instance. You can also prevent changing the focus at all by setting it to false.

    [ show ] : Boolean

    Defines if the balloon panel should be shown after being attached.

    Defaults to true

  • blur()

    inherited

    Moves the focus back to the editor's editable.

    See source

  • build()

    inherited

    Builds the UI of the balloon panel.

    See source

  • deactivateShowListener( id )

    inherited

    Deactivates an event listener associated with this balloon panel. See activateShowListener.

    See source

    Parameters

    id : Object

  • deactivateShowListeners()

    inherited

    Removes all event listeners associated with this balloon panel. See activateShowListeners.

    See source

  • deregisterFocusable( element )

    inherited

    Unregisters an element from editor's focus manager. See focusables.

    See source

    Parameters

    element : element

    An element to be registered.

  • destroy()

    inherited

    Destroys the balloon panel by removing it from DOM and purging all associated event listeners.

    See source

  • getHeight() → Number

    inherited

    Returns the balloon panel height.

    See source

    Returns

    Number

  • getWidth() → Number

    inherited

    Returns the balloon panel width.

    See source

    Returns

    Number

  • hide()

    inherited

    Hides the balloon panel and moves the focus back to the editable.

    See source

  • move( top, left )

    inherited

    Moves the upper-left balloon panel corner to the specified absolute position.

    See source

    Parameters

    top : Number
    left : Number

  • registerFocusable( element )

    inherited

    Registers a new focusable element in the editor's focus manager so the instance does not blur once the child of the balloon panel gains focus. See focusables.

    See source

    Parameters

    element : element

    An element to be registered.

  • removeShowListener( id )

    inherited

    Removes an event listener associated with this balloon panel visible state. See addShowListener.

    See source

    Parameters

    id : Number

    An ID of the listener.

  • renderItems( items )

    Renders provided UI elements inside the view.

    See source

    Parameters

    items : button[] | richCombo[]

    An array of UI element objects.

  • reposition()

    since 4.12.0

    Repositions the balloon toolbar, pointing to the previously attached element.

    See source

  • resize( width, height )

    inherited

    Resizes the balloon panel container to given dimensions. Use 'auto' to make the dimensions of the panel flexible.

    See source

    Parameters

    width : Number
    height : Number

  • setTitle( title )

    inherited

    Sets the balloon panel title.

    See source

    Parameters

    title : String

    A new panel title.

  • setTriangle( side )

    inherited

    Changes the position of the balloon's triangle that points to the element in the editable.

    See source

    Parameters

    side : String

    One of 'left', 'right', 'top' or 'bottom'.

  • show()

    inherited

    Shows the balloon panel.

    See source

  • _adjustElementRect( elementRect, editorRect )

    private inherited

    This method will modify elementRect if the element is outside of editorRect. If it is outside, it is going to change it into a rectangle that is within editorRect.

    See source

    For example here elementRect is going to be changed into a very narrow rectangle (with unmodified height) representation within editorRect.

    +------------------------------------------+
|                                          |
|                                         #|          +----------+
|                                         #|          |          |
|                                         #|          |          |
|               editorRect                #|          |elmentRect|
|                                         #|          |          |
|                                         #|          |          |
|                                         #|          +----------+
|                                          |
+------------------------------------------+

    Parameters

    elementRect : Object

    Rectangle object that should be contained within editorRect. This object might be modified.

    editorRect : Object

    Reference container that should contain elementRect.

  • _deregisterItemFocusables()

    since 4.9.0 private

    Deregisters focusables registered by UI items, like buttons.

    See source

  • _detachListeners()

    private

    Detaches all listeners.

    See source

  • _getAlignments( elementRect, panelWidth, panelHeight ) → Object

    private inherited

    Returns a dictionary containing different alignment positions.

    See source

    Keys tell where the balloon is positioned relative to the element, e.g. this would be the result for "top center":

    [Editor]
+-------------------------------------+
|         [Panel]                     |
|         +-----------------+         |
|         |                 |         |
|  [El.]  +--------v--------+         |
|  +-------------------------------+  |
|  |                               |  |
|  |                               |  |
+--+-------------------------------+--+

    Sample result:

    {
    "right vcenter": { top: 529.5, left: 175 },
    "left vcenter": { top: 529.5, left: 10},
    "top hcenter": { top: 402, left: 92.5},
    "top left": { top: 402, left: 102.5},
    "top right": { top: 402, left: 82.5},
    "bottom hcenter": { top: 643, left: 92.5},
    "bottom left": { top: 643, left: 102.5},
    "bottom right": { top: 643, left: 82.5}
}

    Parameters

    elementRect : Object
    panelWidth : Number
    panelHeight : Number

    Returns

    Object