How to fix ckeditor toolbar on the screen? - ckeditor

Question

I have few ckeditor-s on my page, editors work in iframe mode, they are not inline. Each of them has autogrow option turned on. So sometimes content of the editor is higher than screen and toolbar is not visible. This obviously creates usability issues for people working with editor.
To solve this I would like to keep toolbar of currently active editor on the screen. The only problem I am not sure where should I start.
Few things I've figured out already:
1) It cannot be solved with CSS-only, as long as I need toolbar be fixed only for active editor and when its toolbar is not on the screen
2) I would rather create some CKeditor plugin than creating external code that controls scroll position and moves cke_toolbox basing on that.
What would you suggest?

Answer 1

I think I found solution that works for me.
JS code (updated):
$(function () {
if (typeof CKEDITOR === 'undefined') {
return;
}
var floatingClass = 'floatingToolbox';
var $editors;
CKEDITOR.on('instanceReady', function (e) {
$editors = $('.cke', e.element);
e.editor.on('focus',function() {
checkToolbars($editors, floatingClass);
$(window).on('scroll.ckeditor', function () {
checkToolbars($editors, floatingClass);
});
});
e.editor.on('blur', function () {
$(window).unbind('scroll.ckeditor');
$('.cke_toolbox', $editors).removeClass(floatingClass);
});
});
});
function checkToolbars($editors, floatingClass) {
if (!$editors)
return;
var editor = $editors.filter('.cke_focus');
if (editor.length == 0)
return;
var toolbox = $('.cke_toolbox', editor);
var offset = editor.offset();
var top = offset.top;
var bottom = offset.top + editor.height() - 55;
var scrollPosition = $(window).scrollTop();
if (top < scrollPosition && bottom > scrollPosition) {
toolbox.addClass(floatingClass).css(
{
left: (offset.left + 1) + 'px',
width: editor.width() + 'px'
});
} else if (toolbox.hasClass(floatingClass)) {
toolbox.removeClass(floatingClass);
}
}
CSS:
.floatingToolbox {
background-color: #cce4fb !important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fcfe), to(#cce4fb)) !important;
background-image: -moz-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -webkit-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -o-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: -ms-linear-gradient(top, #f9fcfe, #cce4fb) !important;
background-image: linear-gradient(top, #f9fcfe, #cce4fb) !important;
border-bottom: 1px solid #b7cde1 !important;
border-top: 1px solid #b7cde1 !important;
box-sizing: border-box;
display: block;
padding: 5px 5px 0 5px !important;
position: fixed;
top: 29px;
z-index: 10000;
}

Answer 2

Made a plugin for this purpose.
Create sticky/plugin.js in CKEditor plugins folder.
Enable the plugin adding the following code inside your config.js.
plugin.js
CKEDITOR.plugins.add( 'sticky', {
init: function( editor ) {
setToolbars();
['scroll', 'click'].forEach(function(e) {
window.addEventListener(e, function(){
setToolbars();
}, false);
});
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function () {
setToolbars();
});
});
function setToolbars() {
document.querySelectorAll(".cke").forEach(function(editor) {
let inner = editor.querySelector('.cke_inner'),
content = editor.querySelector('.cke_contents'),
toolbar = editor.querySelector('.cke_top');
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
function getCoords(elem) { // crossbrowser version
let box = elem.getBoundingClientRect(),
body = document.body,
docEl = document.documentElement,
scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop,
scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft,
clientTop = docEl.clientTop || body.clientTop || 0,
clientLeft = docEl.clientLeft || body.clientLeft || 0,
top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
inner.style.position = "relative";
toolbar.style.position = "absolute";
toolbar.style.width = "100%";
toolbar.style.left = "0";
toolbar.style.margin = "0";
toolbar.style.boxSizing = "border-box";
let editorTop = getCoords(editor).top;
let editorHeight = editor.offsetHeight;
let toolbarHeight = toolbar.offsetHeight;
content.style.paddingTop = toolbarHeight+"px";
let contentHeight = content.offsetHeight;
let editorBorderTopWidth = parseFloat(getComputedStyle(editor).borderTopWidth);
if((scrollTop > editorTop) && (scrollTop < (editorTop+contentHeight-toolbarHeight))) {
toolbar.style.top = (scrollTop-editorTop-editorBorderTopWidth) + "px";
} else if (scrollTop >= (editorTop+contentHeight-toolbarHeight)) {
toolbar.style.top = (contentHeight-toolbarHeight-editorBorderTopWidth) + "px";
} else {
toolbar.style.top = "0";
}
});
}
}
});
Also created plugin page on GitHub.

Answer 3

I faced the same issue,
if you have header then below css will also help
#media only screen and (max-width: 767px) {
.ck-sticky-panel__content {
top: 180px !important;
}
}
#media only screen and (min-width: 768px) {
.ck-sticky-panel__content {
top: 128px !important;
}
}
DcpCkEditor.create(document.querySelector(`#${editorId}`), {
...editorConfiguration,
initialData,
}).then((editor: any) => {
document.getElementById('main')?.addEventListener('scroll', () => {
setTimeout(() => {
// eslint-disable-next-line no-underscore-dangle
editor.ui.view.stickyPanel._checkIfShouldBeSticky()
}, 100)
})
})