Custom TinyMCE Buttons Not Showing in Publii Editor

I’m developing a custom Publii theme and trying to add three custom buttons (Margin Note, Sidenote, and Epigraph) to the TinyMCE editor toolbar. However, while the script logs indicate the buttons are added successfully, they do not appear in the editor UI.

What I’ve Done So Far:

1. Created a custom TinyMCE script (tinymce.script.js) in the theme root directory:

   (function () { console.log("Custom TinyMCE script loaded.");

    function addCustomButtons(editor) {
        console.log("Adding custom TinyMCE buttons.");
   
        // Margin Note Button
        editor.ui.registry.addButton('margin_note', {
            text: 'Margin Note',
            icon: 'comment',
            tooltip: 'Insert a margin note',
            onAction: function () {
                let note = prompt("Enter margin note text:");
                if (note) {
                    editor.insertContent(`<span class="marginnote">${note}</span>`);
                }
            }
        });
   
        // Sidenote Button
        editor.ui.registry.addButton('sidenote', {
            text: 'Sidenote',
            icon: 'comment',
            tooltip: 'Insert a sidenote with automatic numbering',
            onAction: function () {
                let note = prompt("Enter sidenote text:");
                if (note) {
                    editor.insertContent(`<label for="sn-1" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-1" class="margin-toggle"/><span class="sidenote">${note}</span>`);
                }
            }
        });
   
        // Epigraph Button
        editor.ui.registry.addButton('epigraph', {
            text: 'Epigraph',
            icon: 'quote',
            tooltip: 'Format as an epigraph',
            onAction: function () {
                let selectedText = editor.selection.getContent();
                if (selectedText) {
                    editor.insertContent(`<blockquote class="epigraph">${selectedText}</blockquote>`);
                } else {
                    alert("Please select text for the epigraph.");
                }
            }
        });
   
        console.log("Buttons added: Margin Note, Sidenote, Epigraph.");
    }
   
    tinymce.init({
        selector: 'textarea',
        toolbar: 'undo redo | bold italic | margin_note sidenote epigraph', // Add custom buttons
        setup: function (editor) {
            editor.on('init', function () {
                console.log("TinyMCE editor initialized.");
                addCustomButtons(editor);
            });
        }
    });
   
    console.log("TinyMCE initialization script executed.");
   

   })();

2. Updated config.json to enable custom TinyMCE configuration:

   "extensions": { "postEditorConfigOverride": true, "postEditorCustomScript": true }

3. Updated tinymce.override.json to define the toolbar layout:

   { "toolbar": "undo redo | bold italic | margin_note sidenote epigraph", "plugins": "lists link image table code" }

4. Checked the Console Logs: The script executes correctly. Logs confirm buttons are added:

Custom TinyMCE script loaded. TinyMCE initialization script executed. TinyMCE editor initialized. Adding custom TinyMCE buttons. Buttons added: Margin Note, Sidenote, Epigraph.

Even though the logs indicate the buttons are added, they do not appear in the TinyMCE editor UI in Publii.

What I’ve Tried: Restarted Publii and cleared cache. Verified the script is loading using console logs. Checked if editor.ui.registry.getAll().buttons contains margin_note, sidenote, and epigraph. Manually called addCustomButtons(editor); inside setup().

uestion: Why are my custom TinyMCE buttons not appearing in the Publii editor? Am I missing any additional TinyMCE or Publii configuration settings? Any help or insights would be appreciated!

I have a suspicion that since Publii already uses TinyMCE with some basic settings, its reinitialization may be overridden or blocked. Therefore, I propose an alternative approach that works.

Try adding buttons using a plugin. Create one plugin in the tinymce.script.js file and add your button code there. In the tinymce.override.json file, add your plugin and button. Everything should work.

I have several publications on this subject:

Check out my post on this subject.

Another tip: When an alert window is triggered, the TinyMCE editor in Publii can become completely unmanageable, making it impossible to edit text.

alert() blocks interaction with the TinyMCE editor in Publii

Information on the sites is in Ukrainian, please use a translator.