CKEditor 4 reached its End of Life (EOL) in June 2023. From then on, it will receive no more updates, new features, bug fixes, and security patches. Visit CKEditor 5 Docs for the actively supported CKEditor or check Extended Support Model.

Home/CKEditor 4/Examples

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.25.1-lts/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.25.1-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.25.1-lts/examples/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,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>