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

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

8 голосов
/ 13 декабря 2011

У меня проблема с плагином 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 ]

2 голосов
/ 17 июля 2012

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

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

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

    (необходимо очистить кеш для проверки)

  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');
0 голосов
/ 15 декабря 2011

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

...