How to make the inline ckeditor toolbar fixed at the top and not float

Question

I am using inline CKEditor in my page. I want to make it fixed on the top of the contenteditable div. Currently it is floating whenever i scroll the page. How to make the toolbar position fixed at the top?

Answer 1

Use the combination of inline editor and the Shared Space plugin. Check the Inline Editor with Shared Toolbar and Bottom Bar demo on the CKEditor SDK page for an example. Note that you can view and download the source code of each SDK example - just scroll down to "Get Sample Source Code" and grab what you need.

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

<script>

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

</script>