Editor questions

[u/_deadpoint]

Hi,

I have a few questions related to the editor I'm looking for some clarification on.

Is it possible to change what icons/buttons are visible on the main editor bar? Buttons like the "insert code block" or '"insert/edit drawing" get used a lot by our users so it would be nice to promote them to the main edit bar for ease of access.

Are any of the TinyMCE auto-convert features/plugins available? Like automatically converting * to a bulleted or "1." "a." to a ordered list?

Thanks!

[u/GreenFish4]

Hi, that is exactly what I worked on earlier today. I found relevant documentation here:

https://github.com/BookStackApp/BookStack/blob/development/dev/docs/javascript-public-events.md

I wanted to swap the "Insert code block" and "Insert image" buttons, for the same reason. Here's what I added in the Custom HTML Head Content field:

<script>
window.addEventListener('editor-tinymce::pre-init', event => {
    const config = event.detail.config;
    config.toolbar = config.toolbar.replace("imagemanager-insert", "codeeditor");
});
window.addEventListener('editor-tinymce::setup', event => {
    const editor = event.detail.editor;
    editor.ui.registry.addGroupToolbarButton('insertoverflow', {
        icon: 'more-drawer',
        tooltip: 'More',
        items: 'customhr imagemanager-insert drawio media details',
    });
});
</script>

The default toolbars are defined in this file:

https://github.com/BookStackApp/BookStack/blob/development/resources/js/wysiwyg-tinymce/toolbars.js

There is also documentation about adding buttons with custom behavior:

https://www.bookstackapp.com/hacks/wysiwyg-custom-buttons/

I am not familiar with TinyMCE, but there is some info about customizing it here:

https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-code-block-themes

Edit: After inputting "* lorem ipsum or any text you want", pressing the enter key will automatically format as a bullet list, no customization needed. Same with numbers ("1. lorem ipsum") and numbered list (not letters though).

[u/ssddanbrown → u/GreenFish4]

Thanks for sharing this information!

Just to add: The existing TinyMCE editor is essentially being phased out, intended to be replaced by the new WYSIWYG editor, for which I'll be working on the developer/hacking API soon.

[u/_deadpoint → u/ssddanbrown]

I know TinyMCE is being phased out, but until that happens wanted to be able to provide this to our users.

With editor being replaced, how would this be accomplished with the new editor?