Modify TinyMCE in Laravel Voyager

Voyager offers the possibility to manipulate the TinyMCE after or before initialization using the callback hooks provided in the docs.

Since version 1.4 its possible to customize the init configuration with custom options inside the BREAD details

{
    "tinymceOptions" : {
        "name": "value"
    }
}

If you want to adjust the init configuration using Voyager below version 1.4, you would need to create a custom js file, for example create it in /public/js/voyager_custom_tinymce.js with this code:

document.addEventListener("DOMContentLoaded", function () {
    // Destroy any existing TinyMCE instances to avoid conflicts
    if (tinymce.editors.length > 0) {
        for (var i = tinymce.editors.length - 1 ; i > -1 ; i--) {
            var editor_id = tinymce.editors[i].id;
            tinymce.execCommand('mceRemoveEditor', true, editor_id);
        }
    }


    tinymce.init({
        menubar: false,
        selector:'textarea.richTextBox',
        skin_url: $('meta[name="assets-path"]').attr('content')+'?path=js/skins/voyager',
        min_height: 600,
        resize: 'vertical',
        plugins: 'link, image, code, table, textcolor, lists',
        extended_valid_elements : 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
        file_browser_callback: function(field_name, url, type, win) {
            if(type =='image'){
                $('#upload_file').trigger('click');
            }
        },
        toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table | code',
        convert_urls: false,
        image_caption: true,
        image_title: true,
        init_instance_callback: function (editor) {
            if (typeof tinymce_init_callback !== "undefined") {
                tinymce_init_callback(editor);
            }
        },
        setup: function (editor) {
            if (typeof tinymce_setup_callback !== "undefined") {
                tinymce_setup_callback(editor);
            }
        }
    });
});

The code will remove the existing initialized tinymce instance and create a new one.

In config/voyager.php you need to add this file as addiitional_js:

   'additional_js' => [
        'js/voyager/custom_voyager_tinymce.js'
    ],

Now you will get your new tinyMCE with your own customized config. Enjoy ;)