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">
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Configuring custom Balloon Toolbars</title>
      <script src=""></script>
      <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;;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
        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.
                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: [
          // 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,
          removeButtons: 'PasteFromWord'