Report an issue


class abstract

This is an abstract class that describes the definition of a balloon toolbar context.

Note that context matching options have a different priority by default, see more details in CKEDITOR.plugins.balloontoolbar.contextManager.



  • cssSelector : String | null

    A CSS selector. If any element in the path matches against it, the toolbar will be shown.

    Defaults to null

  • priority : Number

    A number based on CKEDITOR.plugins.balloontoolbar.PRIORITY.

    var defA = {
        buttons: 'Bold',
        refresh: function() { return true; }
    // Even though the previous definition uses the refresh function, it will not take
    // priority over this definition, as it explicitly states the high priority.
    var defB = {
        buttons: 'NumberedList,BulletedList',
        cssSelector: 'li',
        priority: CKEDITOR.plugins.balloontoolbar.PRIORITY.HIGH

    Defaults to CKEDITOR.plugins.balloontoolbar.PRIORITY.MEDIUM

  • widgets : String[] | String | null

    An array of widget names that should show the related toolbar. Alternatively it can be passed as a comma-separated string.

    Defaults to null


  • refresh( editor, path, selection ) → Boolean | element

    An optional function that determines whether the toolbar should be visible for a given path.

    An example below will show the toolbar only for paths containing <strong> elements.

    // Assuming that the editor is a CKEDITOR.editor instance.
    // Show the toolbar only if there is a <strong> element in the path.
    editor.balloontoolbar.create( {
        buttons: 'Bold,Underline',
        refresh: function( editor, path ) {
            return path.contains( 'strong' );
    } );
    // In this case the toolbar will always be visible, pointing at the editable, despite the selection.
    editor.balloontoolbar.create( {
        buttons: 'Bold,Underline',
        refresh: function( editor, path ) {
            return editor.editable();
    } );


    editor : editor

    An editor that controls this context.

    path : elementPath

    The path for the currently probed selection.

    selection : selection

    A selection object used for probing.


    Boolean | element

    Returning true means that the balloon toolbar should be shown, pointing at the last element in the selection. Returning false means that no toolbar should be shown. It may also return a CKEDITOR.dom.element instance; in that case the toolbar will be shown and point at a given element.