BookStack Code Mirror - hacks/blob - content/wysiwyg-docx-import/index.md

   1 +++
   2 title = "WYSIWYG Docx Import"
   3 author = "@ssddanbrown"
   4 date = 2023-06-07T09:00:00Z
   5 updated = 2023-06-07T09:00:00Z
   6 tested = "v24.05.2"
   7 +++
   8
   9 This hack adds the ability to import ".docx" files into the WYSIWYG editor,
  10 by dragging and dropping a "docx" file into the editor area.
  11 The file contents are converted to HTML then inserted into the editor at the current cursor position.
  12
  13 Conversion is performed browser-side using the [mammoth.js](https://github.com/mwilliamson/mammoth.js) library.
  14 Warning messages from the conversion will be logged to the browser console, and a popup warning notification will advise of this.
  15
  16 #### Considerations
  17
  18 - This hack uses an externally hosted library, hosted on `jsdelivr.net`. You could host this locally instead if desired.
  19 - The conversion is relatively simplistic, to result in clean HTML for use in BookStack. Not all formatting is supported by the conversion and you'll likely loose layout or formatting. Don't expect a replica result in BookStack, this is more for easy importing of existing content.
  20 - Images will be within content, base64 included, until save when BookStack will attempt to extract them out. This may cause editor performance to be particular slow until first save after import.
  21 - You will likely see a "Dropped file type is not supported" warning message pop-up in the editor.
  22
  23 #### Code
  24
  25 {{<hack file="head.html" type="head">}}