CKEditor inline toolbar position

Question

Simple question : how can I make the inline CKEditor toolbar float top right (or bottom right) of my editable element instead of the default top left position ?

Have been googling it but no luck so far :(

Thank you

Greensickness

Answer 1

It does not have a 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 Floating Space, or modifying the current implementation.

And as the last resort, you can use the Shared Space plugin to place the toolbar in a container chosen by you and then position it as you wish. Check the second demo (Inline Editor with Shared Toolbar and Bottom Bar) on the SDK sample page for an example.

Georginageorgine

ckeditor.com/demo#inline 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. – Greensickness

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. – Amphetamine

Answer 2

we can do it with floatSpacePreferRight config

only we need to set

config.floatSpacePreferRight = true;

default value of floatSpacePreferRight is false;

so with this configuration, we can align inline toolbar position to right

Pantry