CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Examples

guideBalloon block editor

Balloon block editor lets you create your content directly in its target location with the help of two toolbars:

  • A balloon toolbar that appears next to the selected editable document element (offering inline content formatting tools).
  • A block toolbar accessible using the toolbar handle button Drag indicator attached to the editable content area and following the selection in the document (bringing additional block formatting tools). The Drag indicator button is also a handle that can be used to drag and drop blocks around the content.

Taj Mahal: A breathtaking ode to love

Taj Mahal illustration.
Taj Mahal with its poetic white marble tomb

No trip to India is complete without visiting this spectacular monument, counted among the Seven Wonders of the World.

Tourists frequently admit that Taj Mahal "simply cannot be described with words". And that’s probably true. The more you try the more speechless you become. Words give only a semblance of truth. The real truth about its beauty is revealed when you adore different shades of “Taj” depending on the time of the day or when you admire the exquisite inlay work in different corners of the façade.

Masterpiece of the world’s heritage

Taj Mahal is a mausoleum built in Agra between 1631 and 1648 by Emperor Shah Jahan in the memory of his beloved wife, Mumtaz Mahal, whose body lies there. It took 20,000 workers to complete and the excellence of this building is visible in every brick.

In 1983, Taj Mahal was appointed UNESCO World Heritage Site for being "the jewel of Muslim art in India and one of the universally admired masterpieces of the world’s heritage".

If you like having a methodology for visiting historical places, here are the four elements on which we recommend to focus your attention:

  • The tomb
  • The decorations
  • The garden
  • The outlying buildings

The tomb is what immediately catches your eyesight. The white and soft marble embroidered with stones leaves you totally enchanted.

# Editor example configuration

Check out the Quick start guide to learn more about implementing this kind of editor. You will find the implementation steps there. You can see this example editor’s code below.

View editor configuration script 

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';

BalloonEditor
    .create( document.querySelector( '#snippet-balloon-block-editor' ), {
        cloudServices: {
            // All predefined builds include the Easy Image feature.
            // Provide correct configuration values to use it.
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
            // Read more about Easy Image - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/easy-image.html.
            // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
        }
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err );
    } );
View editor content listing 
<div id="snippet-balloon-block-editor">
    Editor content is inserted here.
</div>

<style>
    /* Restrict the width of the editor to isolate it from the content of the guide. */
    #snippet-balloon-block-editor {
        margin-left: 5%;
        margin-right: 5%;
    }
</style>