CKEDITOR.ui.balloonToolbarView
A class representing the view of the balloon toolbar, used by CKEDITOR.ui.balloonToolbar.
Filtering
Properties
-
Event listeners associated with this balloon panel, active as long as the panel is shown. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{} -
The editor for this balloon panel.
-
Focusable elements in this balloon panel. See registerFocusable, deregisterFocusable and CKEDITOR.focusManager.
Defaults to
{} -
-
-
Event listeners associated with this balloon panel, activated on panel show. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{} -
Balloon panel templates. Automatically converted into a CKEDITOR.template in the panel constructor.
-
Templates for UI elements in this balloon panel. See templateDefinitions, parts.
Defaults to
{} -
The default height of the triangle that points to the element in the editable.
Defaults to
20 -
The default distance between the triangle and the vertical edge of the panel.
Defaults to
40 -
The default width of the triangle that points to the element in the editable.
Defaults to
20 -
-
-
The DOM element used by the balloon toolbar to attach to.
Methods
since 4.8.0
constructor( editor, definition ) → balloonToolbarViewCKEDITOR.ui.balloonToolbarView#constructorCreates a balloon toolbar view instance.
Parameters
editor : editorThe editor instance for which the toolbar is created.
definition : ObjectAn object containing the toolbar definition. See CKEDITOR.ui.balloonPanel documentation for an example definition.
Returns
balloonToolbarView
Parameters
window : window
Returns
ObjectReturns viewport position, taking scroll offset into account.
Propertiestop : Numberbottom : Numberleft : Numberright : Number
Activates an event listener associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListener, addShowListener, removeShowListener.
Parameters
id : Object
Activates all event listeners associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListeners, addShowListener, removeShowListener.
Adds an event listener associated with this balloon panel. This listener will be activated on panel
showand deactivated on panelhide. See showListeners, activeShowListeners, activateShowListeners, deactivateShowListeners.Parameters
listener : FunctionA function that, if called, attaches the listener and returns the listener object.
Returns
ObjectAn object containing the
removeListenermethod that removes the listener from the collection.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 | selectionThe 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 | BooleanSince 4.8.0 this parameter works as an
optionsobject.If a
CKEDITOR.dom.element/Booleaninstance is given, this parameter acts as anoptions.focusElement.Moves the focus back to the editor's editable.
Builds the UI of the balloon panel.
Deactivates an event listener associated with this balloon panel. See activateShowListener.
Parameters
id : Object
Removes all event listeners associated with this balloon panel. See activateShowListeners.
Unregisters an element from editor's focus manager. See focusables.
Parameters
element : elementAn element to be registered.
Destroys the balloon panel by removing it from DOM and purging all associated event listeners.
Hides the balloon panel and moves the focus back to the editable.
Moves the upper-left balloon panel corner to the specified absolute position.
Parameters
top : Numberleft : Number
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 : elementAn element to be registered.
Removes an event listener associated with this balloon panel visible state. See addShowListener.
Parameters
id : NumberAn ID of the listener.
renderItems( items )CKEDITOR.ui.balloonToolbarView#renderItemsRenders provided UI elements inside the view.
Parameters
items : button[] | richCombo[]An array of UI element objects.
Repositions the balloon toolbar, pointing to the previously attached
element.Resizes the balloon panel container to given dimensions. Use
'auto'to make the dimensions of the panel flexible.Parameters
width : Numberheight : Number
Sets the balloon panel title.
Parameters
title : StringA new panel title.
Changes the position of the balloon's triangle that points to the element in the editable.
Parameters
side : StringOne of 'left', 'right', 'top' or 'bottom'.
Shows the balloon panel.
private inherited
_adjustElementRect( elementRect, editorRect )CKEDITOR.ui.balloonToolbarView#_adjustElementRectThis method will modify
elementRectif the element is outside ofeditorRect. If it is outside, it is going to change it into a rectangle that is withineditorRect.For example here
elementRectis going to be changed into a very narrow rectangle (with unmodified height) representation withineditorRect.+------------------------------------------+ | | | #| +----------+ | #| | | | #| | | | editorRect #| |elmentRect| | #| | | | #| | | | #| +----------+ | | +------------------------------------------+Parameters
elementRect : ObjectRectangle object that should be contained within
editorRect. This object might be modified.editorRect : ObjectReference container that should contain
elementRect.since 4.9.0 private
_deregisterItemFocusables()CKEDITOR.ui.balloonToolbarView#_deregisterItemFocusablesDeregisters focusables registered by UI items, like buttons.
Detaches all listeners.
private inherited
_getAlignments( elementRect, panelWidth, panelHeight ) → ObjectCKEDITOR.ui.balloonToolbarView#_getAlignmentsReturns 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 : ObjectpanelWidth : NumberpanelHeight : Number
Returns
Object