Ability to disable some header types in WYSIWYG editor #2811

Closed
opened 2026-02-05 05:16:19 +03:00 by OVERLORD · 2 comments
Owner

Originally created by @frank-embleton on GitHub (May 22, 2022).

Describe the feature you'd like

Currently Bookstack has 4 header sizes in the editor from Large down to Tiny.

I would like to be able to disable 2 of them leaving only Large and Medium, because trying to enforce a style guide is hard enough without having to explain that certain styles should not be used.

Describe the benefits this would bring to existing BookStack users

More generally, the ability to restrict the options available in the WYSIWYG editor would help in enforcing a company style guide.

I know Markdown is ideal for this kind of thing, but I suspect that having to teach users a completely new concept will discourage contributing to the wiki.

Can the goal of this request already be achieved via other means?

I have tried with custom CSS to hide elements of the WYSIWYG editor but with no success.

Have you searched for an existing open/closed issue?

  • I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

1 to 5 years

Additional context

No response

Originally created by @frank-embleton on GitHub (May 22, 2022). ### Describe the feature you'd like Currently Bookstack has 4 header sizes in the editor from Large down to Tiny. I would like to be able to disable 2 of them leaving only Large and Medium, because trying to enforce a style guide is hard enough without having to explain that certain styles should not be used. ### Describe the benefits this would bring to existing BookStack users More generally, the ability to restrict the options available in the WYSIWYG editor would help in enforcing a company style guide. I know Markdown is ideal for this kind of thing, but I suspect that having to teach users a completely new concept will discourage contributing to the wiki. ### Can the goal of this request already be achieved via other means? I have tried with custom CSS to hide elements of the WYSIWYG editor but with no success. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundemental request ### How long have you been using BookStack? 1 to 5 years ### Additional context _No response_
OVERLORD added the 🔨 Feature Request label 2026-02-05 05:16:19 +03:00
Author
Owner

@ssddanbrown commented on GitHub (May 30, 2022):

Hi @frank-embleton,

We generally don't offer built-in control of supported formats.
We do however provide events for hacking if the edtiors where some advanced, although unsupported, customization is needed.

Using these editor events, you could remove the undesired header options like so (Added via custom head HTML content setting):

<script>
    window.addEventListener('editor-tinymce::pre-init', event => {

        // Get the prepared config we use for TinyMCE
        const mceConfig = event.detail.config;

        // Filter out undesired formats in the original config
        const toRemove = new Set(['h4', 'h5']);
        const filteredFormats = mceConfig.style_formats.filter(formatDef => {
            return !toRemove.has(formatDef.format);
        });

        // Update the config with our filtered formats
        mceConfig.style_formats = filteredFormats;
    });
</script>

Note, this could potentially break on upgrade so is something to test. Also, this does not stop usage of other header options via other means such as via shortcuts or via the markdown editor.

@ssddanbrown commented on GitHub (May 30, 2022): Hi @frank-embleton, We generally don't offer built-in control of supported formats. We do however provide [events for hacking if the edtiors](https://www.bookstackapp.com/docs/admin/hacking-bookstack/#bookstack-editor-events) where some advanced, although unsupported, customization is needed. Using these editor events, you could remove the undesired header options like so (Added via custom head HTML content setting): ```html <script> window.addEventListener('editor-tinymce::pre-init', event => { // Get the prepared config we use for TinyMCE const mceConfig = event.detail.config; // Filter out undesired formats in the original config const toRemove = new Set(['h4', 'h5']); const filteredFormats = mceConfig.style_formats.filter(formatDef => { return !toRemove.has(formatDef.format); }); // Update the config with our filtered formats mceConfig.style_formats = filteredFormats; }); </script> ``` Note, this could potentially break on upgrade so is something to test. Also, this does not stop usage of other header options via other means such as via shortcuts or via the markdown editor.
Author
Owner

@frank-embleton commented on GitHub (Jun 1, 2022):

Thanks @ssddanbrown this is perfect! I read the Hacking Bookstack page a long time a go but to be honest it's all Greek to me... I should have no trouble implementing using the snippet you wrote. 🙌

@frank-embleton commented on GitHub (Jun 1, 2022): Thanks @ssddanbrown this is perfect! I read the Hacking Bookstack page a long time a go but to be honest it's all Greek to me... I should have no trouble implementing using the snippet you wrote. 🙌
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2811