CKEditor - предотвращает прокрутку колесика мыши вне текстового поля

Я пытаюсь применить описанное здесь решение: Prevent body from scrolling on mouswheel, but not the texarea к текстовым областям, которые редактируются CKEditor.CKEditor - предотвращает прокрутку колесика мыши вне текстового поля

Я пытался добавить следующий код в нижней части config.js и styles.js

$(document).ready(function() { 
    debugger; 
    $('.cke_editable') 
    .bind('mousewheel', function(event, delta) { 
     if (this.scrollHeight && this.scrollHeight <= $(this).height() + $(this).scrollTop() && delta < 0){ 
     event.preventDefault() 
     } else if($(this).scrollTop()===0 && delta > 0){ 
     event.preventDefault() 
     } 
    }); 
});

Но скроллинг не изменится, и я думаю, что код не работает вообще (например, это не прерывает отладчик).

У меня нет никакой информации о другом решении (обертывание содержимого внутри тега <body>), похоже, что для применения к CKEditor потребуется какое-то взлома.

[Редактировать]

После включения кода из принятого ответа и после дальнейшего экспериментирования с CKEditor на моем сайте Drupal, это код, который, наконец, работает:

CKEDITOR.on('instanceReady', function(ev) { 
     var $iframe = jQuery('.cke').find('iframe'); 
     $iframe 
     .bind('mousewheel', function(event, delta) { 
      if (this.scrollHeight && this.scrollHeight <= jQuery(this).height() + jQuery(this).scrollTop() && delta < 0){ 
      event.preventDefault() 
      } else if(jQuery(this).scrollTop()===0 && delta > 0){ 
      event.preventDefault() 
      } 
     }); 
    });

Это все еще имеет одну проблему, после изменения режима редактирования на «Источник», а затем обратно на wysiwyg, привязка будет потеряна. Вероятно, он нуждается в повторной привязке к еще одному событию CKEditor. Я пробовал CKEDITOR.on('mode', function(ev) {... после this post, но он не срабатывал. Если я найду решение, я обновлю.

Кстати, вот мой CKEditor скрипка с этой проблемой: http://jsfiddle.net/67v3rwfo/

[Edit 2]

я заметил, что скрипка работает только в Chrome. В Firefox и IE он все равно прокручивает окно, даже не меняя «Источник».

источник

2014-09-06 camcam

Вы уверены, что .cke_editable существует во время события документа? Я предполагаю, что, хотя CKE init довольно быстро, они появляются только после .ready. Попробуйте что-то вроде этого

CKEDITOR.on('instanceReady', function(ev) { 
    alert("InstanceReady"); 
    // $('.cke_editable')... here 
}); 

$(document).ready(function() { 
    alert(1); 
});

Использование предупреждение убеждается, что код действительно получить удар, даже если отладчик каким-то образом derping на вас. Если вы никогда не видите предупреждение (1); очень вероятно, что какой-то javascript действительно сломан, потому что этот код не связан с CKEditor. Во время загрузки страницы проверьте консоль разработчика.

Редактировать 10.9.2014

Не уверен, если это помогает с основным вопросом, но для целевого .cke_editable элемента (ы) в качестве фрейма, это похоже на работу:

var iframeDocument = $('.cke').find('iframe').contents(); 
var editable = $(iframeDocument).find('.cke_editable'); 
// editable is like [<body contenteditable="true" …>…</body>]

источник

2014-09-08 05:32:20 Nenotlep

С вашим улучшением появляется предупреждение на "instanceReady". Однако сразу после предупреждения селектор jQuery ('. Cke_editable') пуст, и поэтому привязка не выполняется. Я подозреваю, что это потому, что CKEditor создает документ внутри документа. Таким образом, в основном документе HTML (где загружается CKE config.js), существует div класса «cke». После инициализации CKE этот div содержит другой #document с тегами html и body. Внутреннее тело имеет класс «.cke_editable» и непосредственно редактируется (нет текстовой области внутри). Я думаю, что это не видно для внешнего javascript. – camcam

Я отредактировал пример для ссылки на редактируемый внутри iframe, но я не уверен, что это поможет с проблемой прокрутки. По крайней мере, вы можете настроить таргетинг.Обратите внимание, что это работает только в том случае, если iframe не нарушает междоменную политику, но я думаю, что это очень вероятно для работы с CKE. – Nenotlep

Это работает, спасибо! В моем случае также необходимо было изменить цель привязки колесика мыши. Он не должен быть cke_editable, потому что он достигает своего текущего содержимого независимо от размера iframe. Цель привязки должна быть самой iframe. Я обновлю его оригинальный код. Одна проблема по-прежнему остается, привязка теряется после смены режима на «Источник», а затем обратно, вероятно, об обнаружении еще одного события CKEditor. – camcam

CKEditor - предотвращает прокрутку колесика мыши вне текстового поля

ответ

Смежные вопросы