DOCX Dateien per Drag&Drop importieren

Das geht mit folgendem Script: 

 <script src="https://cdn.jsdelivr.net/npm/mammoth@1.5.1/mammoth.browser.min.js" defer></script>

<script type="module">

 // Convert the given "file" instance to HTML and insert the results

 // into the given TinyMCE "editor" instance.

 function convertAndInsertDocx(editor, file) {

 // Use a FileReader to handle conversion via an ArrayBuffer

 const reader = new FileReader();

 reader.onload = async function(loadEvent) {

 // Get and convert the ArrayBuffer version of the file

 const arrayBuffer = loadEvent.target.result;

 const {value: html, messages} = await window.mammoth.convertToHtml({arrayBuffer});

 // If warnings exists from conversion, log them to the browser console then

 // show a warning alert via BookStack's event system.

 if (messages.length > 0) {

 console.error(messages);

 window.$events.emit('warning', `${messages.length} warnings logged to browser console during conversion`);

 }

 // Insert the resulting HTML content insert the editor

 editor.insertContent(html);

 }

 reader.readAsArrayBuffer(file);

 }

 // Listen to BookStack emmitted WYSWIYG editor setup event

 window.addEventListener('editor-tinymce::setup', event => {

 // Get a reference to the editor and listen to file "drop" events

 const editor = event.detail.editor;

 editor.on('drop', event => {

 // For each of the files in the drop event, pass them, alonside the editor instance

 // to our "convertAndInsertDocx" function above if they're docx files.

 const files = event?.dataTransfer?.files || [];

 for (const file of files) {

 if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && window.mammoth) {

 convertAndInsertDocx(editor, file);

 }

 }

 });

 });

</script> 

 Quelle: DOCX Import - Bookstack Hacks