fix #2499

Closes #2499

Merge request studip/studip!1710

1 files changed, 19 insertions, 3 deletions

diff --git a/resources/vue/components/courseware/CoursewareTextBlock.vue b/resources/vue/components/courseware/CoursewareTextBlock.vue
index e3ad69d..5a6f871 100644
--- a/resources/vue/components/courseware/CoursewareTextBlock.vue
+++ b/resources/vue/components/courseware/CoursewareTextBlock.vue
@@ -14,7 +14,7 @@
                 <section class="formatted-content" v-html="currentText" ref="content"></section>
             </template>
             <template v-if="canEdit" #edit>
-                <ckeditor :editor="editor" v-model="currentText" :config="editorConfig"></ckeditor>
+                <ckeditor :editor="editor" v-model="currentText" :config="editorConfig" @ready="onReady"></ckeditor>
             </template>
             <template #info><translate>Informationen zum Text-Block</translate></template>
         </courseware-default-block>
@@ -51,6 +51,18 @@ export default {
         text() {    
             return this.block?.attributes?.payload?.text;
         },
+        ckeToolbarTop() {
+            const topBar = document.getElementById('top-bar');
+            const responsiveContentbar = document.getElementById('responsive-contentbar');
+            let top = topBar.clientHeight + topBar.clientTop;
+            if (responsiveContentbar) {
+                top += responsiveContentbar?.clientHeight + responsiveContentbar?.clientTop;
+            } else {
+                top += 85;
+            }
+            
+            return top;
+        },
     },
     mounted() {
         this.initCurrent();
@@ -63,6 +75,10 @@ export default {
             this.currentText = this.text;
             this.loadMathjax();
         },
+        onReady( editor )  {
+            editor.ui.viewportOffset = { top: this.ckeToolbarTop };
+            editor.ui.update();
+        },
         async storeText() {
             let attributes = this.block.attributes;
             attributes.payload.text = this.currentText;
@@ -91,7 +107,7 @@ export default {
             .catch(() => {
                 console.log('Warning: Could not load MathJax.');
             });
-        }
-    },
+        },
+    }
 };
 </script>