admin 管理员组

文章数量: 1086019

When you are adding long content in CKEditor 5 classic, on scroll the toolbar bees fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

How can I make it stay under my fixed header/navigation?

When you are adding long content in CKEditor 5 classic, on scroll the toolbar bees fixed to the top in the browser window.
But I have a fixed positioned white logo area with a menu bar beneath and the toolbar appears above them:

How can I make it stay under my fixed header/navigation?

  • javascript
  • ckeditor
  • css-position
  • ckeditor5
Share Improve this question edited Oct 3, 2018 at 11:19 Reinmar 22k4 gold badges69 silver badges79 bronze badges asked Oct 3, 2018 at 7:52 BarneeBarnee 3,3998 gold badges45 silver badges56 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

I've managed to find the answer:

  1. You have to install npm install --save @ckeditor/ckeditor5-ui
  2. Add to the config: viewportTopOffset : Number

example:

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

I needed a way to dynamically determine the bottom of a fixed navbar, so I managed to work it out this way:

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

Then I created the following function:

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

Then, in the editor initialization, I did the following:

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 );
} );

本文标签： javascriptCKEditor 5 toolbar fixed positionStack Overflow

版权声明：本文标题：javascript - CKEditor 5 toolbar fixed position - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744031606a2521603.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。