Contribute to this guideReport an issue

Balloon Toolbar Documentation

The optional Balloon Toolbar plugin, introduced in CKEditor 4.8, allows for adding context-aware toolbars in the editor.

This feature provides you with a very easy way of defining customized toolbar for a given content type.

As an example, below you'll find an editor where following buttons are displayed:

  • Link, Unlink and Image buttons for image widgets.
  • Open Link, Link and Unlink buttons for links.

Please, give it a try!

Please note that this plugin is not compatible with Internet Explorer 8.

Get Sample Source Code

  • Configuring custom Balloon Toolbars
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Configuring custom Balloon Toolbars</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="10" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          extraPlugins: 'balloontoolbar,linkballoon,image2',
          height: 240,
    
          on: {
            instanceReady: function(evt) {
              var editor = evt.editor;
    
              // Register custom context for image widgets on the fly.
              editor.balloonToolbars.create({
                buttons: 'Link,Unlink,Image',
                widgets: 'image'
              });
            }
          },
    
          // Toolbar adjustments to simplify the editor.
          toolbar: [{
              name: 'document',
              items: ['Source', '-', 'Undo', 'Redo']
            },
            {
              name: 'basicstyles',
              items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
            },
            {
              name: 'links',
              items: ['Link', 'Unlink', 'Anchor']
            },
            {
              name: 'insert',
              items: ['Image', 'Format']
            },
            {
              name: 'tools',
              items: ['Maximize', 'ShowBlocks', 'About']
            }
          ],
    
          // Load the default contents.css file plus customizations for this sample.
          contentsCss: [
            'http://cdn.ckeditor.com/4.11.1/full-all/contents.css',
            'assets/css/widgetstyles.css'
          ],
    
          // Configure the Enhanced Image plugin to use classes instead of styles and to disable the
          // resizer (because image size is controlled by widget styles or the image takes maximum
          // 100% of the editor width).
          image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
          image2_disableResizer: true
        });
      </script>
    </body>
    
    </html>