4

私のページには ckeditor-s がほとんどありません。エディターは iframe モードで動作し、インラインではありません。それらのそれぞれには、自動拡張オプションがオンになっています。そのため、エディターのコンテンツが画面よりも高くなり、ツールバーが表示されないことがあります。これは明らかに、エディターで作業する人々にとって使いやすさの問題を引き起こします。

これを解決するには、現在アクティブなエディターのツールバーを画面に表示したままにします。唯一の問題は、どこから始めればよいかわかりません。

私がすでに理解していることはほとんどありません：1）アクティブなエディターに対してのみツールバーを固定する必要があり、そのツールバーが画面上にない場合、CSSのみでは解決できません

2）スクロール位置を制御し、それに基づいてcke_toolboxを移動する外部コードを作成するよりも、CKeditorプラグインを作成したいと思います。

何を提案しますか？

4

2 に答える 2

3

自分に合った解決策を見つけたと思います。

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;
}
于 2013-10-24T10:10:53.217 に答える