如何修复屏幕上的ckeditor工具栏？

Question

我的页面上很少有 ckeditor-s，编辑器在 iframe 模式下工作，它们不是内联的。他们每个人都打开了自动增长选项。所以有时编辑器的内容高于屏幕并且工具栏不可见。这显然会给使用编辑器的人带来可用性问题。

为了解决这个问题，我想在屏幕上保留当前活动编辑器的工具栏。唯一的问题我不知道应该从哪里开始。

我已经弄清楚了几件事： 1）它不能用纯 CSS 解决，只要我需要为活动编辑器修复工具栏并且它的工具栏不在屏幕上时

2) 我宁愿创建一些 CKeditor 插件，也不愿创建控制滚动位置并在此基础上移动 cke_toolbox 的外部代码。

你有什么建议？

Answer 1

为此制作了一个插件。

在 CKEditor plugins 文件夹中创建 sticky/plugin.js。 启用插件，在 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";
        }               
      });  
    }
      
  }
});

还创建了plugin page on GitHub。

Answer 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;
}