Question

当您将div中的CKEditor添加到div中的div时：“overflow：scroll”滚动父div时工具栏将不会移动...

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

可在此处找到一个示例：http://jsfiddle.net/W8Dt4/

有没有人知道解决此问题的方法？

我认为理想的行为是：

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

Answer 1

使用版本4.4.3，我能够通过触发窗口滚动事件来解决此问题，其方式与在CKEditor中的其他区域中完成的方式类似。将滚动事件附加到父容器上，该容器上设置了 overflow：scroll; 并触发窗口滚动。定位有点笨重但仍然有效。

$("#parent-with-scroll").on('scroll', function (evt) {
    CKEDITOR.document.getWindow().fire('scroll');
});

Answer 2

烨。 CKEditor从未考虑过这种情况，而且很可能，编辑器永远不会处理这种边缘情况。

但是，您需要的是editor.element.getParent() floatingspace插件中的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 ); } );滚动侦听器。不幸的是，您必须等待those lines被解决，因为它改变了重新定位工具栏的方式，并使您的案例可以修复。一旦修复发布（在4.2.1中），您基本上必须将行更改为如下所示：

<body>

如果您愿意，可以尝试使用此ticket #9816。否则，您需要等待即将发布的版本修补代码。

还有一件事你需要知道：每个浮动工具栏都附加到{{1}}，因此它永远不会属于封闭编辑器的相同（溢出）容器。即使工具栏会随着容器一起滚动，它总是会在上面上面浮动，除非你也攻击ticket branch，否则你无法做到这一点。请注意，我还没有测试过它。

我希望这对你有所帮助。

父级的CKEditor“溢出：滚动”导致工具栏在初始位置冻结

2 个答案: