Report an issue



A class representing an instance of the balloon toolbar.

The easiest way to create a balloon toolbar is by using the CKEDITOR.editor.balloonToolbars create method.

However, it is possible to maintain it manually, like below:

// The following example will show a balloon toolbar on any selection change. The toolbar is anchored to the
// last element in the selection, assuming that the editor variable is an instance of CKEDITOR.editor.
editor.on( 'instanceReady', function() {
    var toolbar = new CKEDITOR.ui.balloonToolbar( editor );

    toolbar.addItems( {
        link: new CKEDITOR.ui.button( {
            command: 'link'
        } ),
        unlink: new CKEDITOR.ui.button( {
            command: 'unlink'
        } )
    } );

    editor.on( 'selectionChange', function( evt ) {
        var lastElement =;

        if ( lastElement ) {
            toolbar.attach( lastElement );
    } );
} );



  • private

    _items : Object.<String, button | richCombo>

    Menu items added to the balloon toolbar.

    Defaults to {}

  • private

    _view : balloonToolbarView

    A view instance of the balloon toolbar.


  • since 4.8.0

    constructor( editor, definition ) → balloonToolbar

    Creates a balloon toolbar instance.


    editor : editor

    The editor instance for which the toolbar is created.

    definition : Object

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


  • addItem( name, element )

    Adds an item to the balloon toolbar.


    name : String

    The menu item name.

    element : button | richCombo

    An instance of the UI element.

  • addItems( elements )

    Adds one or more items to the balloon toolbar.


    elements : Object

    An object where keys are used as itemName and corresponding values as a definition for the addItem call.

  • attach( element, [ hidden ] )

    Displays the balloon toolbar, pointing it to the element.


    element : element

    The element to which the panel is attached.

    [ hidden ] : Boolean

    Do not show the balloon toolbar after attaching it.

    Defaults to false

  • deleteItem( name )

    Removes a particular menu item from the balloon toolbar.


    name : String

    The name of the menu item to be deleted.

  • destroy()

    Hides the toolbar, removes it from the DOM, and clears all its items.

  • getItem( name ) → button | richCombo

    Retrieves a particular menu item from the balloon toolbar.


    name : String

    The name of the desired menu item.


    button | richCombo
  • hide()

    Hides the balloon toolbar.

  • refresh()

    Refreshes all command states so buttons state on the balloon toolbar are up to date.

  • since 4.12.0


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

  • show()

    Shows the balloon toolbar.