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

guideInline editor

Inline editor lets you create your content directly in its target location with the help of a floating toolbar that apprears when the editable text is focused.

In this example the image styles configuration was changed to enable left- and right-aligned images.

Gone traveling

Monthly travel news and inspiration

Destination of the Month

Valletta

Picture of a sunlit facade of a Maltan building.
It's siesta time in Valletta.

The capital city of Malta is the top destination this summer. It’s home to cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine, and at least 8 months of sun. It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy, and many more.

The three greatest things you learn from traveling

Find out more

Walking the capitals of Europe: Warsaw

Find out more

# 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 InlineEditor from '@ckeditor/ckeditor5-build-inline/src/ckeditor';

const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );

Array.from( inlineInjectElements ).forEach( inlineElement => {
    const config = {
        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.
        },
    };

    if ( inlineElement.tagName.toLowerCase() == 'header' ) {
        config.removePlugins = [
            'Blockquote',
            'Image',
            'ImageCaption',
            'ImageStyle',
            'ImageToolbar',
            'ImageUpload',
            'List',
            'EasyImage',
            'CKFinder',
            'CKFinderUploadAdapter'
        ];
        config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];
    } else {
        config.image = {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        };
    }

    InlineEditor
        .create( inlineElement, config )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( err => {
            console.error( err );
        } );
} );
View editor content listing 
<div id="snippet-inline-editor">
    <header data-inline-inject="true">
        Editor content is inserted here.
    </header>

    <div data-inline-inject="true">
        Editor content is inserted here.
    </div>

    <div class="demo-row">
        <div class="demo-row__half">
            <div data-inline-inject="true">
                Editor content is inserted here.
            </div>
        </div>

        <div class="demo-row__half">
            <div data-inline-inject="true">
                Editor content is inserted here.
            </div>
        </div>
    </div>
</div>