Need help configuring TinyMCE in Laravel Voyager

Question

I'd like to tweak the default configuration of TinyMCE in Laravel Voyager. In particular, I want to remove the option for creating H1 tags in body content, since semantically there should only be one H1 on the page and it's stored in a different field.

The Voyager instructions are pretty straightforward:

https://voyager-docs.devdojo.com/customization/tinymce

So, I: 1. created a new file in resources/js called voyager_additional.js, 2. added it to my Mix configuration (.js('resources/js/voyager_additional.js', 'public/js'), 3. added the two functions specified in the Voyager docs,

function tinymce_init_callback(editor)
{
    console.log('Init!');
}

function tinymce_setup_callback(editor)
{
    console.log('Setup!');
}

4. put console.log messages in the functions to demonstrate that they are being called, and
5. added 'js/voyager_additional.js' to the additional_js array in config/voyager.php.

The additional JavaScript file is being created in the right place, and my Voyager admin pages can find it, but something's not right because the console.log messages never appear (none of the TinyMCE code I've put in the functions seems to have an effect, either). There's clearly a little more to it than the documentation indicates. What am I missing?

Answer 1

Aaaaaahhh...don't process the extra JavaScript code as with .js in your Mix file. Just copy it:

.copy('resources/js/voyager_additional.js', 'public/js')

Now my console.log messages show up and the changes I make to the TinyMCE configuration work.

(Quick note: the format of the setting changes should be, for example:

editor.settings.style_formats = [
        { title: 'Heading 2', format: 'h2' },
        { title: 'Heading 3', format: 'h3' },
        { title: 'Paragraph', format: 'p' },
    ];
    editor.settings.toolbar = 'removeformat | styleselect bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image table | code';

and changes seem to want to be in the setup, rather than the init, function.)

I'm glad this turned out to be something small and simple!