They can cause instability, introduce issues and may conflict with future updates. Apply at your own risk!
WYSIWYG Docx Import
This hack adds the ability to import “.docx” files into the WYSIWYG editor, by dragging and dropping a “docx” file into the editor area. The file contents are converted to HTML then inserted into the editor at the current cursor position.
Conversion is performed browser-side using the mammoth.js library. Warning messages from the conversion will be logged to the browser console, and a popup warning notification will advise of this.
Considerations
- This hack uses an externally hosted library, hosted on
jsdelivr.net
. You could host this locally instead if desired. - 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.
- 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.
- You will likely see a “Dropped file type is not supported” warning message pop-up in the editor.
Code
head.html
|
|
Latest Hacks
WYSIWYG Docx Import
This hack adds the ability to import “.docx” files into the WYSIWYG editor, by dragging and dropping a “docx” file into the editor area. »
WYSIWYG Editor Autocomplete Suggestions
This hack adds custom autocomplete suggestions to the WYSIWYG page editor (TinyMCE). An autocomplete popup box will show after a “trigger character” (: as configured by default in this hack) is entered after a space, or at the start of a line. »
WYSIWYG Editor Footnotes
This hack adds some level of “footnote” support to the WYSIWYG editor. A new “Footnote” button is added to the toolbar, next to the “Italic” button, that allows you to insert a new footnote reference. »
Custom WYSIWYG Editor Buttons
This hack provides an example of adding custom actions to the WYSIWYG page editor (TinyMCE). By default, this adds an additional “…” overflow menu to the end of the WYSWIYG toolbar, which contains a single new “Insert Cat” button that has a custom icon. »