2

当您将 CKEditor 添加到 div 内的 div 时：“溢出：滚动”滚动父 div 时工具栏不会移动...

<div id="wrapper" style="overflow: scroll;">
    <div contenteditable="true">This is the ckedito</div>     
</div>

一个例子可以在这里找到：<a href="http://jsfiddle.net/W8Dt4/" rel="nofollow">http://jsfiddle.net/W8Dt4/

有谁知道解决这个问题的方法？

我认为理想的行为是：

  • 当有足够的空间时，将工具栏保持在编辑器 div 的顶部。
  • 当顶部没有足够的空间而底部有足够的空间时，将工具栏移动到编辑器 div 的底部。
4

2 回答 2

5

使用 4.4.3 版，我能够通过触发窗口滚动事件来解决这个问题，方法与在 CKEditor 的其他区域中完成的方式类似。将滚动事件附加到具有溢出的父容器：滚动；设置它并触发其中的窗口滚动。定位有点笨拙，但仍然有效。

$("#parent-with-scroll").on('scroll', function (evt) {
    CKEDITOR.document.getWindow().fire('scroll');
});
于 2014-07-17T14:07:12.437 回答
1

是的。CKEditor 从未考虑过这种情况，并且很可能编辑器永远不会处理这种极端情况。

不过，您需要的是这些插件行中的editor.element.getParent()滚动侦听器。floatingspace不幸的是，您必须等待故障单#9816得到解决，因为它改变了重新定位工具栏的方式，并使您的情况有可能修复。一旦发布了修复程序（在 4.2.1 中），您必须基本上将这些行更改为如下所示：

var elementParent = editor.element.getParent();

editor.on( 'focus', function( evt ) {
    ...
    elementParent.on( 'scroll', uiBuffer.input );
} );

editor.on( 'blur', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

editor.on( 'destroy', function() {
    ...
    elementParent.removeListener( 'scroll', uiBuffer.input );
} );

如果你愿意，你可以试试这个票分店。否则，您必须等待即将发布的版本来修补您的代码。

您还需要知道一件事：每个浮动工具栏都附加到<body>，因此它永远不会属于包含您的编辑器的同一个（溢出）容器。即使工具栏会随着容器一起滚动，它也会一直浮动在它上面，除非你也破解这条线，否则你无能为力。请注意，我没有测试过它。

我希望这对你有所帮助。

于 2013-08-14T21:35:21.880 回答