Resolve "Im fromSORM fehlt Eingabename des `templates/forms/wysiwyg_input.php`"

Closes #5627

Merge request studip/studip!4243

1 files changed, 54 insertions, 70 deletions

diff --git a/resources/vue/components/StudipWysiwyg.vue b/resources/vue/components/StudipWysiwyg.vue
index c7de9c7..13e567a 100644
--- a/resources/vue/components/StudipWysiwyg.vue
+++ b/resources/vue/components/StudipWysiwyg.vue
@@ -1,78 +1,62 @@
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
 import { ClassicEditor, BalloonEditor } from '../../assets/javascripts/chunks/wysiwyg.js';
-import {h, resolveComponent} from "vue";
 
-export default {
-    name: 'studip-wysiwyg',
-    emits: ['update:modelValue'],
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-        },
-        editorType: {
-            type: String,
-            validator(value) {
-                return ['classic', 'balloon'].includes(value);
-            },
-            default: 'classic',
-        },
-        autofocus: Boolean,
+const props = defineProps({
+    editorType: {
+        type: String,
+        validator: value => ['classic', 'balloon'].includes(value),
+        default: 'classic'
     },
-    data() {
-        return {
-            currentText: '',
-            editorConfig: {},
-
-            createdEditor: null,
-            shouldFocus: this.autofocus,
-        };
-    },
-    computed: {
-        editor() {
-            switch (this.editorType) {
-                case 'classic':
-                    return ClassicEditor;
-                case 'balloon':
-                    return BalloonEditor;
-            }
-            throw new Error('Unknown `editorType`');
-        },
+    name: {
+        type: String,
+        default: 'content'
     },
-    methods: {
-        onReady(editor) {
-            this.createdEditor = editor;
-            this.currentText = this.modelValue;
+    autofocus: Boolean
+});
 
-            if (this.shouldFocus) {
-                this.focus();
-            }
+const content = defineModel({ type: String, default: '' });
 
-            STUDIP.eventBus.emit('editor-loaded', this.createdEditor);
-        },
-        onInput(value) {
-            this.currentText = value;
-            this.$emit('update:modelValue', value);
-        },
-        focus() {
-            if (this.createdEditor) {
-                this.createdEditor.focus();
-            } else {
-                this.shouldFocus = true;
-            }
-        }
-    },
-    created() {
-        STUDIP.loadChunk('mathjax');
-    },
-    render() {
-        return h(resolveComponent('ckeditor'), {
-            editor: this.editor,
-            config: this.editorConfig,
-            modelValue: this.modelValue,
-            onInput: this.onInput,
-            onReady: this.onReady,
-        })
+const createdEditor = ref(null);
+const shouldFocus = ref(props.autofocus);
+
+const editor = computed(() => {
+    switch (props.editorType) {
+        case 'classic':
+            return ClassicEditor;
+        case 'balloon':
+            return BalloonEditor;
+    }
+
+    throw new Error('Unknown `editorType`');
+});
+
+const focus = () => {
+    if (createdEditor.value && typeof createdEditor.value.focus === 'function') {
+        createdEditor.value.focus();
+    } else {
+        shouldFocus.value = true;
+    }
+}
+
+const onReady = editorInstance => {
+    createdEditor.value = editorInstance;
+    if (shouldFocus.value) {
+        focus();
     }
-};
+    STUDIP.eventBus.emit('editor-loaded', createdEditor.value);
+}
+
+onMounted(() => STUDIP.loadChunk('mathjax'));
 </script>
+
+<template>
+    <Ckeditor
+        :editor="editor"
+        :key="editorType"
+        v-model="content"
+        :onReady="onReady"
+        v-bind="$attrs"
+    />
+    <textarea :name="name" :value="content" style="display:none;"></textarea>
+</template>