WYSIWYG Toolbar create or edit toolbar_groups

[Divinii]

Attempted Debugging

• [x] I have read the debugging page

Searched GitHub Issues

• [X] I have searched GitHub for the issue.

Describe the Scenario

I would like to be able to edit or add toolbar_groups in WYSIWYG editor, as reference I screenshot the part I mean:

I would like to edit or create a toolbar_groups entry. For example I would like to remove the Inline Code entry from formatoverflow.items (resources/js/wysiwyg/toolbars.js line 26)

I am currently setting tinyMceConfig.toolbar using following HTML Head Content:

window.addEventListener('editor-tinymce::pre-init', event => {
    const tinyMceConfig = event.detail.config;
    tinyMceConfig.toolbar = 'undo redo | styles | bold italic underline inlinecode forecolor backcolor formatoverflow | bullist numlist tasklist outdent indent | textDirPlugins | codeeditor drawio table media imagemanager-insert link details customhr | code about fullscreen';
});

I tried editing tinyMceConfig.toolbar_groups or executing the function editor.ui.registry.addGroupToolbarButton but I was unable to get that working. Is there a way to set this without editing the js source?

Exact BookStack Version

v23.02.1

Log Content

No response

PHP Version

8.1

Hosting Environment

Docker Image linuxserver/bookstack behind Traefik Reverseproxy

[ssddanbrown]

Hi @Divinii,

For example I would like to remove the Inline Code entry from formatoverflow.items

You could do this to achieve that:

<script>
window.addEventListener('editor-tinymce::setup', event => {
    const editor = event.detail.editor;
    editor.ui.registry.addGroupToolbarButton('formatoverflow', {
        icon: 'more-drawer',
        tooltip: 'More',
        items: 'strikethrough superscript subscript removeformat'
    });
});
</script>

This would effectively overwrite the BookStack-defined toolbar group. Note the different editor event used. This is after the config is used and is during the latter setup-phase of the editor. For more complex changes, you could do something similar to define a new group via a custom name (Instead of formatoverflow in the above) then use that name as part of your tinyMceConfig.toolbar config code.

[Divinii]

Hey @ssddanbrown

Thanks! That works perfectly!

Yes I understand that I can basically just create "all the" Toolbar Groups. :) I think this snipped with the one in my Issue would be good candidates for https://www.bookstackapp.com/hacks/

Could this maybe be added to this Page? Thanks again!

[ssddanbrown]

@Divinii Good to hear that works for you!

I've now formalised a more extensive example within our hacks page as suggested: https://www.bookstackapp.com/hacks/wysiwyg-custom-buttons/

I'll therefore close this off.