JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<div id='container' style="overflow: scroll;height:450px;width:90%;position:absolute">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.

<br>
<div id='editor1' style="color:red" contenteditable=true>editable div</div>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus, urna nec condimentum pellentesque, quam lacus vulputate neque, in efficitur nunc nibh at odio. Mauris elementum sed dui et gravida. Donec a facilisis augue. Donec pellentesque dolor a dui varius dapibus. Nunc posuere sem non quam tristique, vitae placerat risus eleifend. Mauris sed ligula a odio imperdiet accumsan quis pellentesque lorem. Aliquam sed tincidunt mi, a tristique ex....

JavaScript

function absolutePositionFromTop(el) {
    fromTop = 0;
    while ($(el)[0] != $('body')[0]) {
        fromTop = fromTop + $(el).position().top
        el = $(el).parent()
    }
    return fromTop;
}

function repositionCKEditorToolbar() {
    // If we don't have any active instance of CKEDITOR - return
    if (!CKEDITOR.currentInstance) {
        return;
    }
    // Save the elements we need to work with
    currentActiveEditor = $(CKEDITOR.currentInstance.element.$)
    currentToolbar = $('#cke_' + currentActiveEditor.attr('id'))
    
    // Save the heights we will need
    toolbar_height = currentToolbar.height()
    parent_height = currentActiveEditor.parent().outerHeight(true)
    
    if (currentActiveEditor.position().top > parent_height) {
        // In case the toolbar is "out" of the container we should hide it.
        // It can happen because the toolbar is placed (in the DOM) outside the container.
        currentToolbar.css({top: '-1000px'})
    } else if (currentActiveEditor.position().top > toolbar_height) {
        // In case we have enough space to position the toolbar above the editor
        newTop = absolutePositionFromTop(currentActiveEditor) - currentToolbar.height()
        currentToolbar.css({top : newTop + 'px'});
    } else {
        if (parent_height - currentActiveEditor.height() - currentActiveEditor.position().top > toolbar_height) {
            // Only if have enough space under the editor and that area is visible - put the toolbar there.
            newTop = absolutePositionFromTop(currentActiveEditor) + currentActiveEditor.height()
            currentToolbar.css({top : newTop + 'px'});
        }
    }
}
$('#container').on('scroll', function(ev) {
    // Call the repositioning function on each scroll of the container
    repositionCKEditorToolbar();
});