我的页面上有很少的ckeditor-s,编辑器在iframe模式下工作,它们不是内联的。他们每个人都打开了自动增长选项。因此,有时编辑器的内容高于屏幕,工具栏不可见。这显然会给使用编辑器的人带来可用性问题。
要解决此问题,我想在屏幕上保留当前活动编辑器的工具栏。唯一的问题我不知道我应该从哪里开始。
我已经弄清楚的事情很少: 1)仅使用CSS无法解决,只要我只需要为活动编辑器修改工具栏,并且当工具栏不在屏幕上时
2)我宁愿创建一些CKeditor插件,而不是创建控制滚动位置的外部代码,并根据它移动cke_toolbox。
你会建议什么?
答案 0 :(得分:2)
我认为我找到了对我有用的解决方案。
JS代码(已更新):
$(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;
}