Question

我正在尝试将此处描述的解决方案：Prevent body from scrolling on mouswheel, but not the texarea应用于可由CKEditor编辑的textareas。

我尝试将以下代码添加到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。

[编辑]

在包含已接受答案的代码之后，在我的Drupal网站上进一步试验CKEditor之后，这是最终有效的代码：

   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()
          }
        });
    });

它仍有一个问题，在将编辑模式更改为“Source”然后再返回到wysiwyg之后，绑定将丢失。它可能需要重新绑定另一个CKEditor事件。我在this post之后尝试了CKEDITOR.on('mode', function(ev) {...，但它没有开火。如果我找到了解决方案，我会更新。

顺便说一句，这是我的CKEditor摆弄这个问题：http://jsfiddle.net/67v3rwfo/

[编辑2]

我注意到小提琴仅适用于Chrome。在Firefox和IE中，无论如何它都会滚动窗口，即使不更改为“Source”。

Answer 1

您确定在文档就绪事件期间存在.cke_editable吗？我猜测即使CKE init非常快，它们也只会出现在.ready之后。试试这样的事情

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

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

使用警报确保代码确实被命中，即使调试器在某种程度上对你不利。如果你从未看过警报（1）;一些javascript很可能实际上已被破坏，因为该代码与CKEditor无关。在页面加载期间检查开发人员控制台中的消息。

修改10.9.2014

不确定这是否有助于解决根本问题，但要定位iframe中的.cke_editable元素，这似乎有效：

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

CKEditor - 防止鼠标滚轮在textarea之外滚动

1 个答案: