CKEditor - 防止在textarea外滾動鼠標滾輪

我正在嘗試將這裏描述的解決方案應用於：Prevent body from scrolling on mouswheel, but not the texarea到可由CKEditor編輯的textareas。CKEditor - 防止在textarea外滾動鼠標滾輪

我想下面的代碼添加到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事件。我嘗試CKEDITOR.on('mode', function(ev) {...後面this post，但它沒有開火。如果我找到解決方案，我會更新。

順便說一句，這是我的CKEditor撥弄着這樣的問題：http://jsfiddle.net/67v3rwfo/

[編輯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無關。在頁面加載期間檢查您的開發者控制檯的消息

編輯2014年10月9日

不知道這是否有助於潛在的問題，而是要在iframe的.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）中，有一個「cke」類的div。 CKE初始化後，這個div包含另一個＃文檔，包含html和body標籤。內部體有'.cke_editable'類，可以直接編輯（裏面沒有textarea）。我認爲這是不可見的外部JavaScript。 – camcam 2014-09-09 16:06:32

我編輯了一個示例以引用iframe中的可編輯內容，但我不確定這是否有助於滾動問題。至少你可以瞄準它。請注意，這隻適用於iframe不違反跨域策略，但我認爲它很可能與CKE一起使用。 – Nenotlep 2014-09-10 05:32:44

這個作品，謝謝！在我的情況下，還有必要更改鼠標滾輪綁定目標。它不應該是cke_editable，因爲它與當前內容一樣高，無論iframe的大小如何。綁定目標應該是iframe本身..我會用它更新我的原始代碼。一個問題仍然存在，在將模式更改爲「Source」並返回後，綁定會丟失，這可能是要找到另一個CKEditor事件。 – camcam 2014-09-10 07:43:51

CKEditor - 防止在textarea外滾動鼠標滾輪

回答

相關問題