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

Question

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

Answer 1

当编辑器位于溢出的容器中时，工具栏出现在错误位置的事实是 bug that we are aware of. But in this case, I'd recommend you to not use the classic editor at all. If you want to have more control over where the toolbar goes, e.g. the DecoupledEditor (demo) 允许控制工具栏。这种编辑器类型不会对工具栏本身做任何事情——它只是创建它，然后由您决定将其插入何处。

另一种选择是实现您自己的自定义编辑器，但只有当您想要进行更多自定义时才需要这样做

Answer 2

我在使用经典编辑器时遇到了同样的问题，.sticky_panel 的位置在 .editor_editable.

中发生焦点事件时发生变化

在某些时候，当它在显示中不可见并在内部单击时，它会一直到第一个元素。

Answer 3

我通过 CSS

解决了这个问题

.ck.ck-editor__top.ck-reset_all {
  z-index: var(--ck-z-modal);
  position: sticky;
  top: 0;
}

.ck.ck-sticky-panel__placeholder {
  display : none !important;
}

.ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
  position: unset;
}

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 为 window 所做的，顺便说一句，这就是为什么当你把它放在容器里时它不起作用的原因。

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

How to disable sticky toolbar in classic editor when page is scrolled?

ckeditor5