CKEditor плагин автостраницы проблема мерцания вертикальной полосы прокрутки

У меня проблема с плагином CKEditor autogrow:

При нажатии клавиши возврата (после автоматического увеличения выше минимальной высоты) текстовое содержимое встряхивается (перепрыгивает на одну строку и обратно вниз), а вертикальная полоса прокрутки мигает время от времени. Автострада работает, но пользовательский опыт является рывком.

Я могу скрыть вертикальную полосу прокрутки, указав scrolling="no" и overflow="hidden", но текстовое содержимое все еще дрожит.

Я отключаю прокрутку в ckeditor.js:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe>

Код инициализации CKEditor:

       CKEDITOR.replace('Description',
        {
            sharedSpaces:
            {
                top: 'topSpace',
                bottom: 'bottomSpace'

            },
            extraPlugins: 'autogrow,tableresize',
            removePlugins: 'maximize,resize,elementspath',
            skin: 'kama',
            toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'],
             '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']],
            toolbarCanCollapse: false,
            pasteFromWordRemoveFontStyles: false,
            enterMode: CKEDITOR.ENTER_BR,
            shiftEnterMode: CKEDITOR.ENTER_P,
            autoGrow_minHeight: 300

        })

Есть ли способ избежать скачка / смещения текстового содержимого при нажатии клавиши ввода (после автоматического роста выше минимальной высоты)?

Источник

3 ответа

Сегодня я тестировал исправление и думаю, что у меня есть работающее решение для всех основных браузеров. Кроме того, я также исправил проблему с размером горизонтальной полосы прокрутки (горизонтальная полоса прокрутки не увеличивает размер редактора). Хотя это оказалось чем-то вроде клуджа (для простоты высота полосы прокрутки жестко задана в 17 пикселей), поэтому я предоставлю вам обе версии, с исправлением горизонтальной полосы прокрутки и без нее.

Я знаю, что правильным способом было бы создать патч и предложить его внедрить в следующем выпуске CKEditor, но это займет некоторое время, а между тем вот что вы можете сделать. Вы можете скачать измененный сжатый файл plugin.js по ссылке ниже и поместить его в свой CKEditor по пути /plugins/autogrow/plugin.js

Так что изменилось?

Я объясню эти изменения с помощью несжатых файлов (папка _source), которые доступны для чтения, тогда как сжатые файлы довольно трудно читать и понимать.

Я сделал небольшие модификации для автоматического увеличения временного маркера, который используется для вычисления новой высоты редактора. Вот новая версия кода маркера в строке _source (несжатый) autogrow/plugin.js 19.

var marker = CKEDITOR.dom.element.createFromHtml( '<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc );

Таким образом, высота изменяется от 1 до нуля пикселей, внутри элемента маркера всегда печатается неразрывный пробел, а размер шрифта обнуляется. После этих модификаций это фактически решило проблему - вместо этого сразу же удалив маркер из DOM, я изменил его, удалив через 1 миллисекунду (строка 24 в несжатом файле plugin.js).

setTimeout(function() {
    marker.remove();
},1);

Исправление горизонтальной полосы прокрутки

Это немного скучно. Я просто добавил проверку, является ли редактор scrollWidth больше, чем clientWidth, и если это так, то добавьте 17 пикселей в переменные newHeight и currentHeight, прежде чем проверять минимальные и максимальные допустимые значения newHeight.

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels
if ( scrollable.$.scrollWidth > scrollable.$.clientWidth ) {
    newHeight += 17;
    currentHeight += 17;
}

newHeight = Math.max( newHeight, min );
newHeight = Math.min( newHeight, max );

Вместо использования жестко закодированного значения 17 пикселей, метод описан в разделе Как получить размеры полосы прокрутки браузера? (или что-то подобное) может быть использовано для расчета размера полосы прокрутки, чтобы сделать это исправление более правильным.

Источник

  1. content.css добавить:

    тело {переполнение: скрыто; /Скрыть мерцание автогравы/}

    (Нужно очистить кеш для проверки)

  2. plugin.js (resizeEditor) Установить "Дополнительное пространство, указанное пользователем" = 20:

newHeight + = 20; // Исправляем мерцание автостраницы //(editor.config.autoGrow_bottomSpace || 0);

  1. plugin.js (resizeEditor) заменить:

if (scrollable. $. scrollHeight> scrollable.clientHeight...

С:

    //Fix Autogrow flicker:
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/}
    var editorBody = $(editor.editable().$);
    if (newHeight >= max)
        editorBody.css('overflow-y', 'visible');
    else
        editorBody.css('overflow-y', 'hidden');
Источник

AFAIK единственный способ решить эту проблему - изменить код CKEDitor. (Я бы посоветовал обрабатывать событие "ключ входа" так, как оно происходит, а не во время ожидания, как это происходит).

Источник
Другие вопросы по тегам