CKEditor Ecosystem Documentation
Search
CKEditor 4 reached its End of Life (EOL) in June 2023. From then on, it will receive no more updates, new features, bug fixes, and security patches. Visit CKEditor 5 Docs for the actively supported CKEditor or check Extended Support Model.
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

  • since 4.8.0

    constructor( editor, definition ) → balloonToolbarView

    See source

    Creates a balloon toolbar view instance.

    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

  • inherited

    _getViewPaneRect( window ) → Object

    See source

    Parameters

    window : window

    Returns

    Object

    Returns viewport position, taking scroll offset into account.

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

  • inherited

    activateShowListener( id )

    See source

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

    Parameters

    id : Object

  • inherited

    activateShowListeners()

    See source

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

  • inherited

    addShowListener( listener ) → Object

    See source

    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.

    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.

  • inherited

    attach( elementOrSelection, [ options ] )

    See source

    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.

    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.

  • inherited

    blur()

    See source

    Moves the focus back to the editor's editable.

  • inherited

    build()

    See source

    Builds the UI of the balloon panel.

  • inherited

    deactivateShowListener( id )

    See source

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

    Parameters

    id : Object

  • inherited

    deactivateShowListeners()

    See source

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

  • inherited

    deregisterFocusable( element )

    See source

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

    Parameters

    element : element

    An element to be registered.

  • inherited

    destroy()

    See source

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

  • inherited

    getHeight() → Number

    See source

    Returns the balloon panel height.

    Returns

    Number

  • inherited

    getWidth() → Number

    See source

    Returns the balloon panel width.

    Returns

    Number

  • inherited

    hide()

    See source

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

  • inherited

    move( top, left )

    See source

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

    Parameters

    top : Number
    left : Number

  • inherited

    registerFocusable( element )

    See source

    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.

    Parameters

    element : element

    An element to be registered.

  • inherited

    removeShowListener( id )

    See source

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

    Parameters

    id : Number

    An ID of the listener.

  • renderItems( items )

    See source

    Renders provided UI elements inside the view.

    Parameters

    items : button[] | richCombo[]

    An array of UI element objects.

  • since 4.12.0

    reposition()

    See source

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

  • inherited

    resize( width, height )

    See source

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

    Parameters

    width : Number
    height : Number

  • inherited

    setTitle( title )

    See source

    Sets the balloon panel title.

    Parameters

    title : String

    A new panel title.

  • inherited

    setTriangle( side )

    See source

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

    Parameters

    side : String

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

  • inherited

    show()

    See source

    Shows the balloon panel.

  • private inherited

    _adjustElementRect( elementRect, editorRect )

    See source

    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.

    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.

  • since 4.9.0 private

    _deregisterItemFocusables()

    See source

    Deregisters focusables registered by UI items, like buttons.

  • private

    _detachListeners()

    See source

    Detaches all listeners.

  • private inherited

    _getAlignments( elementRect, panelWidth, panelHeight ) → Object

    See source

    Returns a dictionary containing different alignment positions.

    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