TinyMCE

Please read the documentation about WordPress TinyMCE custom buttons.

Creating a custom button

For this we need to create a TypeScript file ./src/tinymce/shortcode/gtap_player.ts. Also keep in mind that the file name needs to match the added plugin name for it to work. For this example we are using gtap_player as the file and plugin name.

import * as tinymce from 'tinymce';

export interface ISubmitEvent {
    preventDefault: () => void;
    data: {
        name: string;
    };
}

tinymce.PluginManager.add('gtap_player', (editor: tinymce.Editor): void => {
    editor.addButton('gtap_player', {
        onclick: (): void => {
            editor.windowManager.open({
                    body: [
                        {
                            label: 'Name',
                            name: 'name',
                            type: 'textbox',
                            value: editor.selection.getContent(),
                        },
                    ],
                    onsubmit: (e: ISubmitEvent): void => {
                        const name: string = e.data.name.trim();
                        if (name) {
                            editor.selection.setContent('[player name="' + name + '"]' + e.data.text + '[/player]');
                        } else {
                            e.preventDefault();
                        }
                    },
                    title: 'Insert a player',
                },
                {});
        },
        text: 'Player',
        title: 'Insert a player',
    });
});

Then we need to import the script in src/tinymce/index.ts.

import './shortcode/gtap_button.ts';

Also register it in gotoAndPlay/Plugins/TinyMCE.php inside the constructor using the plugin name.

$this->buttons = [
    'gtap_player',
];