滚动 "scrollable" div 时，Ckeditor 内联编辑器停留在屏幕上

Question

我有一个"scrollable"div。在这个 div 里面我有一些文本和另一个 div with contenteditable=true.

HTML 来源看起来像这样

<div id='scrollable' style="overflow:scroll;height:500px;width:90%;position:absolute">
some text
   <div id='editable' style="color:red" contenteditable=true>editable div</div>
some text
</div>

"editable" div 的内联 ckeditor 编辑器应该出现在页面加载时。这是通过聚焦 div.

来完成的

 $( document ).ready(function() {
  $("#editable").focus();
});

问题是当我滚动 "scrollable" div 时，内联编辑器停留在屏幕上。我希望它在滚动时保持 "out of screen"。我的意思是，我希望它表现得像可滚动 div.

中的常规元素

我准备了一个jsfiddle but for testing i recommend to view the result page separately。在 FF 和 Chrome

中测试

Answer 1

你可以这样做

$( document ).ready(function() {
  // Handler for .ready() called.
  $("#editable").focus();
     setInterval(function(){$("#cke_editable").css("top",($("#editable").offset().top - $("#cke_editable").height())+"px")})
});

看到效果了here

滚动 "scrollable" div 时，Ckeditor 内联编辑器停留在屏幕上

Ckeditor inline editor stays on screen when scrolling a "scrollable" div

javascript

jquery

scroll

ckeditor