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

   1 +++
   2 title = "WYSIWYG Editor Footnotes"
   3 author = "@ssddanbrown"
   4 date = 2023-05-03T23:00:00Z
   5 updated = 2023-05-03T23:00:00Z
   6 tested = "v23.05"
   7 +++
   8
   9 This hack adds some level of "footnote" support to the WYSIWYG editor.
  10 A new "Footnote" button is added to the toolbar, next to the "Italic" button, that allows you to
  11 insert a new footnote reference. Footnotes will automatically be listed at the bottom of the page content.
  12 The reference numbering is automatic, chronologically from page top to bottom.
  13 New references will change existing numbering if inserted before.
  14
  15 This hack provides significant examples of TinyMCE (The library used for the WYSIWYG) content manipulation and extension.
  16 The code is heavily commented to assist as a helpful example.
  17 For significant alterations, you'll likely want to review the [TinyMCE documentation](https://www.tiny.cloud/docs/tinymce/6/custom-toolbarbuttons/)
  18 to understand the full set of available capabilities and actions within the TinyMCE editor API.
  19
  20 #### Considerations
  21
  22 - This heavily relies on internal methods of TinyMCE, which may change upon any BookStack release as we update the editor libraries.
  23 - All logic is within the WYSIWYG editor, and therefore you won't get the same functionality via the API or other editors.
  24 - The syntax & code used likely won't be cross-compatible with the markdown editor.
  25 - The footnotes list will be generated when content is saved from the editor, so is not updated live but should always be auto-updated before save.
  26 - This has been tested to some degree but there's a reasonable chance of bugs or side affects, since there's quite a lot going on here.
  27 - There's a lot of custom code here. You could instead put this code (without the HTML `<script>` tags) in an external JavaScript file and then just use a single `<script src="/path/to/file.js"></script>` within the custom head setting.
  28
  29 #### Code
  30
  31 {{<hack file="head.html" type="head">}}