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.0-lts/standard-all/ckeditor.js"></script> </head> <body> <textarea cols="10" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></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.0-lts/full-all/contents.css', 'https://ckeditor.com/docs/ckeditor4/4.25.0-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>