Rectangle 27 0

You can do that using the sharedspace plugin.

<div id="toolbarLocation></div>
<div id="editor" contenteditable="true"></div>


    CKEDITOR.disableAutoInline = true;
    CKEDITOR.replace( 'editor', { 
        sharedSpaces: { 
            top: 'toolbarLocation' 
    } );


position - How to make the inline ckeditor toolbar fixed at the top an...

position ckeditor toolbar floating
Rectangle 27 0

It does not have configuration option for this. There are only four options for the X,Y offset in pinned and docked modes - e.g. config.floatSpacePinnedOffsetY.

The only idea that I have is implementing your own plugin like floatingspace, or modifying current implementation.

And as the last resort, you can use the sharedspace plugin ( to place toolbar in container chosen by you and then position it as you wish. has examples of left/right aligned inline toolbars, this is what I am looking for. I guess I could do a right:0 css rule with it but it will be overwritten if any modification is done on window size. Can you add a %age offset ? That would sort it out I guess.

I believe the toolbar with left or right align depending on how close the element it is editing is to the right side of the page. It tries to avoid rendering in a way where part of it will be off the screen.

CKEditor inline toolbar position - Stack Overflow

ckeditor inline toolbar