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

guideBalloon editor

Balloon editor lets you create your content directly in its target location with the help of a balloon toolbar that appears next to the selected editable document element.

Walking the capitals of Europe: Warsaw

If you enjoyed my previous articles in which we discussed wandering around Copenhagen and Vilnius, you’ll definitely love exploring Warsaw.

Time to put comfy sandals on!

The best time to visit the city is July and August when it’s cool enough not to break a sweat and hot enough to enjoy summer. The city, which has quite a combination of both old and modern textures, is located by the river of Vistula.

The historic Old Town, reconstructed after World War II, with its late 18th-century characteristics, is a must-see. You can start your walk from Nowy Świat Street which will take you straight to the Old Town.

Then you can go to the Powiślearea and take a walk on the newly renovated promenade on the riverfront. There are also lots of cafes, bars, and restaurants where you can shake off the exhaustion of the day. On Sundays, there are many parks where you can enjoy nature or listen to pianists from around the world playing Chopin.

For museum lovers, you can add these to your list:

Next destination

We will go to Berlin and have a night walk in the city that never sleeps! Make sure you subscribe to our newsletter!

# Editor example configuration

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

View editor configuration script 

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

BalloonEditor
    .create( document.querySelector( '#snippet-balloon-editor' ), {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        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-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-editor {
        margin-left: 5%;
        margin-right: 5%;
    }
</style>