diff --git a/public/js/components/Notiz/Notiz.js b/public/js/components/Notiz/Notiz.js index 14e34ee58..d965ce3ac 100644 --- a/public/js/components/Notiz/Notiz.js +++ b/public/js/components/Notiz/Notiz.js @@ -31,7 +31,10 @@ export default { return { multiupload: true, mitarbeiter: [], - filteredMitarbeiter: [] + filteredMitarbeiter: [], + zwischenvar: '', + editorInitialized: false, + editor: null } }, computed: { @@ -132,77 +135,45 @@ export default { }); }, initTinyMCE() { - //const vm = this.intText; + + const vm = this; tinymce.init({ - selector: '#editor', -/* selector: `#${this.$refs.editor.id}`,*/ + target: this.$refs.editor, //Important: not selector: to enable multiple import of component //height: 800, plugins: ['lists'], -/* toolbar: "undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent",*/ - toolbar: "undo redo", - + toolbar: "undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | outdent indent", autoresize_bottom_margin: 16, - setup: (editor) => { - // workaround for avoiding conflict id of frame: same Id as textarea - // working just for new notes - //solution for update notes: now working - //todo(manu) but now: cursor position!! + setup: (editor) => { + vm.editor = editor; editor.on('input', () => { - const newContent = editor.getContent(); -/* const contentLength = newContent.length; - console.log(contentLength); - - editor.selection.setCursorLocation(editor.getBody(), contentLength);*/ - this.intText = newContent; - + vm.intText = newContent; }); - -/* editor.on('change', () => { - const newContent = editor.getContent(); - const contentLength = newContent.length; - - //editor.selection.setCursorLocation(editor.getBody(), contentLength); - - // Vue-Instanz-Referenz (vm), um auf die Daten zuzugreifen - this.intText = newContent; - });*/ }, }); }, - updateContent(event) { - // Manually update the content when the textarea is edited - tinymce.get('editor').setContent(event.target.value); - //console.log(event.target.value); - }, }, mounted() { this.initTinyMCE(); }, watch: { - intText: function(newVal, oldVal) { - // Überprüfen, ob sich der Wert von intText geändert hat - if (newVal !== oldVal) { - - const editor = tinymce.get('editor'); - - // Aktualisieren Inhalt des Editors - editor.setContent(newVal); - //tinymce.get(this.$refs.editor.id).setContent(newVal); + intText: function(newVal) { + const tinymcsVal = this.editor.getContent(); + if (tinymcsVal != newVal) { + //Inhalt des Editors aktualisieren + this.editor.setContent(newVal); } }, }, beforeDestroy() { - tinymce.get('editor').destroy(); -/* tinymce.get(this.$refs.editor.id).destroy();*/ + this.editor.destroy(); }, template: `