javascriptckeditorcss-positionckeditor5

CKEditor 5 toolbar fixed position

When you are adding long content in CKEditor 5 classic, on scroll the toolbar becomes fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

enter image description here

How can I make it stay under my fixed header/navigation?

Solution

  • I've managed to find the answer:

    1. You have to install npm install --save @ckeditor/ckeditor5-ui
    2. Add to the config: viewportTopOffset : Number

    example:

    ClassicEditor.defaultConfig = {
toolbar: {      
    viewportTopOffset : 50,    <-- height of fixed header
    items: [
        'heading',
        '|',
        'highlight',
        '|',
        'bold',
        'italic',
        ...