滚动页面时如何在经典编辑器中禁用粘性工具栏？

Question

我想禁用滚动页面时出现在页面顶部的粘性工具栏。怎么做？

Answer 1

当编辑器位于溢出的容器中时，工具栏出现在错误的位置，这是我们知道的bug。但是在这种情况下，我建议您完全不要使用经典编辑器。如果您想进一步控制工具栏的位置，例如DecoupledEditor（demo）允许控制工具栏。这种编辑器类型对工具栏本身不起作用，它只是创建工具栏，它由您决定要插入的位置。

另一种选择是实现自己的自定义编辑器，但这仅在您要进行更多自定义的情况下才需要

Answer 2

我通过CSS解决了这个问题

using StrongInject;

[Registration(typeof(Foo), typeof(IFoo))]
[Registration(typeof(Bar), Scope.SingleInstance)]
public class Container : IContainer<IFoo> {}

public static class Program
{
    public static void Main()
    {
        new Container().Resolve(foo => //use foo here);
    }
}

Answer 3

我在经典编辑器中遇到了同样的问题，.sticky_panel的位置随着.editor_editable中焦点的改变而改变。

有时在显示屏中看不到它并单击内部时，它会一直指向第一个元素。

Answer 4

仅 CSS：

ck.ck-sticky-panel .ck-sticky-panel__content_sticky {​​​​​​​​​​​
    position: absolute !important;
}

Answer 5

在我的编辑器版本中，我做了一个这样的黑客：

const stickyUpdateInterval = setInterval(() => {
    editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
}, 100);
editor.on('destroy', () => {
  clearInterval(stickyUpdateInterval);
});

这只是一个粗略的hack，它会一直更新粘性气球。

如果您确切地知道您的编辑器将安装在哪个溢出容器中，您可以做一些更聪明的事情，例如监听滚动事件并仅在那时更新（这是 CKEditor 为窗口所做的，顺便说一句，这就是为什么它不是当你把它放在容器里时工作）。