They can cause instability, introduce issues and may conflict with future updates. Apply at your own risk!
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. When clicked, this adds a placeholder kitten image into the page.
This is only meant to be an example, to be tweaked and modified to your use-case. The code is heavily commented for this reason.
For significant alterations, you’ll likely want to review the TinyMCE documentation to understand the full set of available capabilities and actions within the TinyMCE editor API.
Considerations
- This heavily relies on internal methods of TinyMCE, which may change upon any BookStack release as we update the editor libraries.
Code
head.html
|
|
Latest Hacks
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. »
IFrame Specific Tweaks
This hack will add custom styles & scripts, hiding many parts of the interface while adding additional light/dark mode control, intended to provide a cleaner view that’s suitable for use within iframes embedded on external pages. »