CKEditor-防止鼠标滚轮在文本区域外滚动_Ckeditor

CKEditor-防止鼠标滚轮在文本区域外滚动

ckeditor

CKEditor-防止鼠标滚轮在文本区域外滚动,ckeditor,Ckeditor,我正在尝试应用这里描述的解决方案：应用到可由CKEditor编辑的文本区域我尝试将以下代码添加到config.js和styles.js的底部 $( document ).ready(function() { debugger; $('.cke_editable') .bind('mousewheel', function(event, delta) { if (this.scrollHeight && this.scrollHeight <=

我正在尝试应用这里描述的解决方案：应用到可由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()
      }
    });
});

$（文档）.ready（函数（）{
调试器；
$（'.cke_可编辑'）
.bind（'mousewheel'，函数（事件，增量）{
if（this.scrollHeight&&this.scrollHeight 0）{
event.preventDefault（）
}
});
});

但是滚动没有改变，我认为代码根本不会运行（例如，它不会在调试器上中断）

我对另一种解决方案（将内容包装在

标记中）一无所知，似乎有必要对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()
          }
        });
    });

CKEDITOR.on（'instancerady'，函数（ev）{
var$iframe=jQuery（'.cke'）.find（'iframe'）；
$iframe
.bind（'mousewheel'，函数（事件，增量）{
if（this.scrollHeight&&this.scrollHeight 0）{
event.preventDefault（）
}
});
});

它仍然存在一个问题，将编辑模式更改为“源”，然后返回到所见即所得，绑定丢失。它可能需要在另一个CKEditor事件上重新绑定。我尝试了

CKEDITOR.on（'mode'，function（ev）{…

following，但它没有启动。如果我找到解决方案，我会更新

顺便说一下，这是我的编辑处理这个问题的方法：

[编辑2]

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

您确定在document ready事件期间存在.cke_editable吗？我猜即使cke init非常快，它们也只会在.ready之后出现。请尝试类似的方法

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

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

使用alert可确保代码不会被命中，即使调试器以某种方式对您发出警告。如果您从未看到该警报（1），则很可能某些javascript实际上已被破坏，因为该代码与CKEditor无关。请在页面加载期间查看开发人员控制台中的消息

编辑10.9.2014

不确定这是否有助于解决根本问题，但要针对iframe中的

.cke\u editable

元素，这似乎是可行的：

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

var iframeDocument=$（'.cke'）.find（'iframe'）.contents（）；
var editable=$（iframeDocument）.find（'.cke_editable'）；
//就像[…]

经过改进后，“InstanceRady”上的警报会弹出。但是，警报发出后，选择器jQuery（'.cke_editable'）为空，因此绑定不会发生。我怀疑这是因为CKEditor在文档中创建了一个文档。因此在主HTML文档（加载了cke config.js）中，有一个类“cke”的div.CKE初始化后，此div包含另一个#文档，带有html和正文标记。内部正文具有类“.CKE_editable”，可直接编辑（内部无文本区域）。我认为外部javascript不可见。我编辑了一个示例以引用iframe内部的可编辑内容，但我不确定这是否有助于解决滚动问题。至少您可以将其作为目标。请注意，这仅在iframe不违反跨域策略的情况下才有效，但我认为它很可能与CKE一起工作。这很有效，谢谢！在我的例子中，还需要更改鼠标滚轮绑定目标。它不应该是cke_可编辑的，因为它与当前内容一样高，无论iframe的大小。绑定目标应该是iframe本身。我将用它更新我的原始代码。还有一个问题，将模式更改为后绑定丢失“来源”，然后回来，这可能是关于找到另一个CKEditor事件。是的，我认为这可能是解决这个问题的方法：）很高兴听到它工作！