Ckeditor在线编辑器保持在屏幕上，当滚动“可滚动” div [英] Ckeditor inline editor stays on screen when scrolling a "scrollable" div

问题描述

我有一个可滚动 div。在这个div中，我有一些文本和另一个div与contenteditable = true。

HTML源代码如下

 < div id ='scrollable'style =overflow：scroll; height：500px; width：90％; position：absolute> 
一些文字
< div id ='editable'style =color：redcontenteditable = true>可编辑div< / div& 
一些文本
< / div> 
  

可编辑div的内联ckeditor编辑器应显示在网页加载。这是通过集中div。

  $（document）.ready（function（）{
 $（ #editable）。focus（）; 
}）;问题是，当我滚动可滚动div时，内联编辑器保留在屏幕上。我想让它保持屏幕外，当我滚动。我的意思是，我想让它像一个可滚动的div中的常规元素。
 
 
 
我准备了 jsfiddle 但是为了测试我建议查看结果页面 。在FF和Chrome中测试
解决方案
您可以执行
  $（document）.ready（function（）{
 //调用.ready（）的处理程序
 $（＃editable）。 
 setInterval（function（）{$（＃cke_editable）。css（top，（$（＃editable）。offset（）。top  -  $（＃cke_editable）。height ）+px）}）
}）; 
  
查看工作此处 
 
I have a "scrollable" div. Inside this div i have some text and another div with contenteditable=true.

The HTML source looks like this 
<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>
An inline ckeditor editor for the "editable" div should appear on page load. This is done by focusing the div.
 $( document ).ready(function() {
  $("#editable").focus();
});
The problem is that when i scroll the "scrollable" div the inline editor stays on screen. I want it to stay "out of screen" when i scroll. I mean, i want it to behave like a regular element inside a scrollable div.

I prepared a jsfiddle but for testing i recommend to view the result page separately. Tested in FF and Chrome
解决方案
You can do something like
$( document ).ready(function() {
  // Handler for .ready() called.
  $("#editable").focus();
     setInterval(function(){$("#cke_editable").css("top",($("#editable").offset().top - $("#cke_editable").height())+"px")})
});
See it work here

                        
这篇关于Ckeditor在线编辑器保持在屏幕上，当滚动“可滚动” div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！