CKEditor 5工具栏固定位置

Question

当您在 CKEditor 5 classic 中添加长内容时，滚动时工具栏将固定在浏览器窗口的顶部。
但我有一个固定位置的白色徽标区域，下面有一个菜单栏，工具栏出现在它们上面：

我怎样才能让它留在我的固定标题/导航下？

Answer 1

我已经找到答案：

1. 你必须安装

   npm install --save @ckeditor/ckeditor5-ui

2. 添加到配置：

   viewportTopOffset : Number

示例：

ClassicEditor.defaultConfig = {
toolbar: {      
    viewportTopOffset : 50,    <-- height of fixed header
    items: [
        'heading',
        '|',
        'highlight',
        '|',
        'bold',
        'italic',
        ...

Answer 2

我需要一种方法来动态确定固定导航栏的底部，所以我设法以这种方式解决：

</nav> <!-- bottom of navbar -->
<div id="ccms---header---end"></div> <!-- add a div to mark the bottom -->

然后我创建了以下函数：

function getDistanceFromTop() {
    let element = document.getElementById('ccms---header---end');
    let distance = 0;
    while (element) {
        distance += element.offsetTop;
        element = element.offsetParent;
    }
    return distance;
 }

然后，在编辑器初始化中，我做了以下操作：

ClassicEditor
.create( document.querySelector( '#editor' ), {
    licenseKey: LICENSE_KEY, // Or 'GPL'.
    plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
    toolbar: [
        'undo', 'redo', '|', 'bold', 'italic', '|',
        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
    ],
    ui: {
        viewportOffset: {
            top: getDistanceFromTop(),
        }
    }
})
.then( editor => {
    window.editor = editor;
} )
.catch( error => {
    console.error( error );
} );