They can cause instability, introduce issues and may conflict with future updates. Apply at your own risk!
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. Pressing the Escape key will close the autocompleter.
By default, two autocomplete options are configured: Cat 1
and Cat 2
.
Entering :c
within the editor will show the autocomplete containing these two options.
These options can be configured from line 21 in the code.
This hack serves as a good example of registering autocomplete options with TinyMCE (The library used for the WYSIWYG). The code is heavily commented to assist as a helpful example. You may want to review the TinyMCE Autocompleter documentation to understand the full set of capabilities and options available.
Considerations
- This heavily relies on internal methods of TinyMCE, which may change upon any BookStack release as we update the editor libraries.
- All logic is within the WYSIWYG editor, and therefore you won’t get the same functionality via other editors.
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. »