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

   1 +++
   2 title = "WYSIWYG Editor Autocomplete Suggestions"
   3 author = "@razem-io"
   4 date = 2023-05-04T16:00:00Z
   5 updated = 2023-05-04T16:00:00Z
   6 tested = "v23.05"
   7 +++
   8
   9 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.
  10
  11 By default, two autocomplete options are configured: `Cat 1` and `Cat 2`.
  12 Entering `:c` within the editor will show the autocomplete containing these two options.
  13 These options can be configured from line 21 in the code.
  14
  15 This hack serves as a good example of registering autocomplete options with TinyMCE (The library used for the WYSIWYG).
  16 The code is heavily commented to assist as a helpful example.
  17 You may want to review the [TinyMCE Autocompleter documentation](https://www.tiny.cloud/docs/tinymce/6/autocompleter/)
  18 to understand the full set of capabilities and options available.
  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 other editors.
  24
  25 #### Code
  26
  27 {{<hack file="head.html" type="head">}}