CKEditor 4 Documentation

CKEDITOR.ui.balloonPanel

Files

A class that represents a floating, balloon-shaped panel capable of presenting defined content at a precise position in the document. It can be used to represent contextual data or forms i.e. related to an element in the editor's editable.

// Create an instance of the balloon panel.
var panel = new CKEDITOR.ui.balloonPanel( editor, {
    title: 'My Panel',
    content: '<p>This is my panel</p>'
} );

// Attach the panel to an element in DOM and show it immediately.
panel.attach( domElement );

Available since: 4.6

Parameters

  • editor : CKEDITOR.editor

    The editor instance for which the panel is created.

  • definition : Object

    An object containing the panel definition.

Defined By

Properties

CKEDITOR.ui.balloonPanel
view source
: Object
Event listeners associated with this balloon panel, active as long as the panel is shown. ...

Event listeners associated with this balloon panel, active as long as the panel is shown. See addShowListener, activateShowListeners, deactivateShowListeners.

Defaults to: {}

CKEDITOR.ui.balloonPanel
view source
: Object

The editor for this balloon panel.

The editor for this balloon panel.

CKEDITOR.ui.balloonPanel
view source
: Object
Focusable elements in this balloon panel. ...

Focusable elements in this balloon panel. See registerFocusable, deregisterFocusable and CKEDITOR.focusManager.

Defaults to: {}

CKEDITOR.ui.balloonPanel
view source
: String
The default height of the balloon panel. ...

The default height of the balloon panel.

Defaults to: 'auto'

CKEDITOR.ui.balloonPanel
view source
: Object
The UI elements of the balloon panel. ...

The UI elements of the balloon panel.

Defaults to: {}

CKEDITOR.ui.balloonPanel
view source
: Object
Contains panel properties as move, resize, show and hide are called. ...

Contains panel properties as move, resize, show and hide are called. It stores values and avoids unnecessary and expensive checks in the future.

Defaults to: {visible: false}

  • width : Number
  • height : Number
  • top : Number
  • left : Number
  • visible : Boolean
CKEDITOR.ui.balloonPanel
view source
: Object
Event listeners associated with this balloon panel, activated on panel show. ...

Event listeners associated with this balloon panel, activated on panel show. See addShowListener, activateShowListeners, deactivateShowListeners.

Defaults to: {}

CKEDITOR.ui.balloonPanel
view source
: Object
Balloon panel templates. ...

Balloon panel templates. Automatically converted into a CKEDITOR.template in the panel constructor.

  • panel : String

    The template for the panel outermost container.

  • content : String

    The template for the panel content container.

  • title : String

    The template for the panel title bar.

  • close : String

    The template for the panel Close button.

  • triangleOuter : String

    The template for the panel outer triangle.

  • triangleInner : String

    The template for the panel inner triangle.

CKEDITOR.ui.balloonPanel
view source
: Object
Templates for UI elements in this balloon panel. ...

Templates for UI elements in this balloon panel. See templateDefinitions, parts.

Defaults to: {}

CKEDITOR.ui.balloonPanel
view source
: Number
The default height of the triangle that points to the element in the editable. ...

The default height of the triangle that points to the element in the editable.

Defaults to: 20

CKEDITOR.ui.balloonPanel
view source
: Number
The default distance between the triangle and the vertical edge of the panel. ...

The default distance between the triangle and the vertical edge of the panel.

Defaults to: 40

CKEDITOR.ui.balloonPanel
view source
: Number
The default width of the triangle that points to the element in the editable. ...

The default width of the triangle that points to the element in the editable.

Defaults to: 20

CKEDITOR.ui.balloonPanel
view source
: Number
The default width of the balloon panel. ...

The default width of the balloon panel.

Defaults to: 360

Defined By

Methods

CKEDITOR.ui.balloonPanel
view source
( elementRect, editorRect )private
This method will modify elementRect if the element is outside of editorRect. ...

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.

CKEDITOR.ui.balloonPanel
view source
( elementRect, panelWidth, panelHeight ) : Objectprivate
Returns a dictionary containing different alignment positions. ...

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
CKEDITOR.ui.balloonPanel
view source
( window ) : Object
...

Parameters

Returns

  • Object

    Returns viewport position, taking scroll offset into account.

    • top : Number
    • bottom : Number
    • left : Number
    • right : Number
CKEDITOR.ui.balloonPanel
view source
( id )
Activates an event listener associated with this balloon panel. ...

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

Parameters

  • id : Object
CKEDITOR.ui.balloonPanel
view source
( )
Activates all event listeners associated with this balloon panel. ...

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

CKEDITOR.ui.balloonPanel
view source
( listener ) : Object
Adds an event listener associated with this balloon panel. ...

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.

CKEDITOR.ui.balloonPanel
view source
( element, [focusElement] )
Places the balloon panel next to a specified element so the tip of the balloon's triangle touches that element. ...

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

Parameters

  • element : CKEDITOR.dom.element

    The element to which the panel is attached.

  • focusElement : CKEDITOR.dom.element/Boolean (optional)

    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 focus at all by setting it to false.

CKEDITOR.ui.balloonPanel
view source
( )
Moves the focus back to the editor's editable. ...

Moves the focus back to the editor's editable.

CKEDITOR.ui.balloonPanel
view source
( )
Builds the UI of the balloon panel. ...

Builds the UI of the balloon panel.

CKEDITOR.ui.balloonPanel
view source
( id )
Deactivates an event listener associated with this balloon panel. ...

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

Parameters

  • id : Object
CKEDITOR.ui.balloonPanel
view source
( )
Removes all event listeners associated with this balloon panel. ...

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

CKEDITOR.ui.balloonPanel
view source
( element )
Unregisters an element from editor's focus manager. ...

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

Parameters

CKEDITOR.ui.balloonPanel
view source
( )
Destroys the balloon panel by removing it from DOM and purging all associated event listeners. ...

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

CKEDITOR.ui.balloonPanel
view source
( ) : Number
Returns the balloon panel height. ...

Returns the balloon panel height.

Returns

  • Number
CKEDITOR.ui.balloonPanel
view source
( ) : Number
Returns the balloon panel width. ...

Returns the balloon panel width.

Returns

  • Number
CKEDITOR.ui.balloonPanel
view source
( )
Hides the balloon panel and moves the focus back to the editable. ...

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

CKEDITOR.ui.balloonPanel
view source
( left, top )
Moves the upper-left balloon panel corner to the specified absolute position. ...

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

Parameters

  • left : Number
  • top : Number
CKEDITOR.ui.balloonPanel
view source
( element )
Registers a new focusable element in the editor's focus manager so the instance does not blur once the child of the b...

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

CKEDITOR.ui.balloonPanel
view source
( id )
Removes an event listener associated with this balloon panel visible state. ...

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

Parameters

  • id : Number

    An ID of the listener.

CKEDITOR.ui.balloonPanel
view source
( width, height )
Resizes the balloon panel container to given dimensions. ...

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

Parameters

  • width : Number
  • height : Number
CKEDITOR.ui.balloonPanel
view source
( title )
Sets the balloon panel title. ...

Sets the balloon panel title.

Parameters

  • title : String

    A new panel title.

CKEDITOR.ui.balloonPanel
view source
( side )
Changes the position of the balloon's triangle that points to the element in the editable. ...

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'.

CKEDITOR.ui.balloonPanel
view source
( )
Shows the balloon panel. ...

Shows the balloon panel.

Defined By

Events

CKEDITOR.ui.balloonPanel
view source
( evt )
Event fired when the balloon panel is attached to an element. ...

Event fired when the balloon panel is attached to an element.

Parameters

CKEDITOR.ui.balloonPanel
view source
( evt )
Event fired when the balloon panel is hidden. ...

Event fired when the balloon panel is hidden.

Parameters

CKEDITOR.ui.balloonPanel
view source
( evt )
Event fired when the balloon panel is shown. ...

Event fired when the balloon panel is shown.

Parameters