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

   1 +++
   2 title = "Custom WYSIWYG Editor Buttons"
   3 author = "@ssddanbrown"
   4 date = 2023-03-24T00:00:00Z
   5 updated = 2023-03-24T00:00:00Z
   6 tested = "v23.02"
   7 +++
   8
   9 This hack provides an example of adding custom actions to the WYSIWYG page editor (TinyMCE).
  10 By default, this adds an additional "..." overflow menu to the end of the WYSWIYG toolbar, which contains a single new
  11 "Insert Cat" button that has a custom icon. When clicked, this adds a placeholder kitten image into the page.
  12
  13 This is only meant to be an example, to be tweaked and modified to your use-case.
  14 The code is heavily commented for this reason.
  15
  16 For significant alterations, you'll likely want to review the [TinyMCE documentation](https://www.tiny.cloud/docs/tinymce/6/custom-toolbarbuttons/)
  17 to understand the full set of available capabilities and actions within the TinyMCE editor API.
  18
  19 #### Considerations
  20
  21 - This heavily relies on internal methods of TinyMCE, which may change upon any BookStack release as we update the editor libraries.
  22
  23 #### Code
  24
  25 {{<hack file="head.html" type="head">}}