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

CKEDITOR.ui.balloonToolbar

class
See source

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 = evt.data.path.lastElement;

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

Filtering

Properties

Methods

  • constructor( editor, definition ) → balloonToolbar

    since 4.8.0

    Creates a balloon toolbar instance.

    See source

    Parameters

    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.

    Returns

    balloonToolbar

  • addItem( name, element )

    Adds an item to the balloon toolbar.

    See source

    Parameters

    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.

    See source

    Parameters

    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.

    See source

    Parameters

    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.

    See source

    Parameters

    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.

    See source

  • getItem( name ) → button | richCombo

    Retrieves a particular menu item from the balloon toolbar.

    See source

    Parameters

    name : String

    The name of the desired menu item.

    Returns

    button | richCombo

  • hide()

    Hides the balloon toolbar.

    See source

  • refresh()

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

    See source

  • reposition()

    since 4.12.0

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

    See source

  • show()

    Shows the balloon toolbar.

    See source