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

  • private

    _items : Object.<String, button | richCombo>

    See source

    Menu items added to the balloon toolbar.

    Defaults to {}

  • private

    _view : balloonToolbarView

    See source

    A view instance of the balloon toolbar.

Methods