Reply To: WYSIWYG shortcode button not visible within flexible content

• WBRND

• March 10, 2021 at 6:57 pm

Hi John, I added the following code within functions.php and shortcodes.js:

functions.php

add_action('admin_head', 'add_shortcodes_button');

function add_shortcodes_button() {
    global $typenow;

    if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
		return;
    }

    if ( get_user_option('rich_editing') == 'true') {
        add_filter("mce_external_plugins", "add_tinymce_plugin");
        add_filter('mce_buttons', 'register_shortcodes_button');
    }
}

function add_tinymce_plugin($plugin_array) {
    $plugin_array['shortcodes_button'] = esc_url( get_template_directory_uri() ) . '/includes/shortcodes/js/shortcodes.js';
    return $plugin_array;
}

function register_shortcodes_button($buttons) {
	array_push($buttons, "shortcodes_button");
	return $buttons;
}

shortcodes.js

(function() {
    tinymce.PluginManager.add('shortcodes_button', function( editor, url ) {
        editor.addButton( 'shortcodes_button', {
            title: 'Element toevoegen',
            type: 'menubutton',
            icon: 'plus',
            menu: [
                {
                    text: 'Button',
                    onclick: function() {
                        editor.windowManager.open( {
				        title: 'Button',
				        icon: 'plus',
				        body: [{
				            type: 'listbox',
				            name: 'size',
				            label: 'Formaat',
				            'values': [
				                {text: 'Klein', value: 'small'},
				                {text: 'Middel', value: 'medium'},
				                {text: 'Groot', value: 'large'},
				            ]
                        },
                        {
				            type: 'listbox',
				            name: 'color',
				            label: 'Kleur',
				            'values': [
				                {text: 'Blauw', value: 'default'},
				                {text: 'Oranje', value: 'orange'},
				                {text: 'Groen', value: 'green'},
				            ]
				        },
				        {
				            type: 'textbox',
				            name: 'text',
				            label: 'Tekst'
				        },
				        {
				            type: 'textbox',
				            name: 'link',
				            label: 'Link (URL)'
				        },
				        {
				            type: 'listbox',
				            name: 'target',
				            label: 'Link openen in',
				            'values': [
				                {text: 'Hetzelfde scherm', value: '_self'},
				                {text: 'Nieuw tabblad', value: '_blank'},
				            ]
				        },
				        {
				            type: 'textbox',
				            name: 'cssclass',
				            label: 'CSS class'
						},
						{
				            type: 'listbox',
				            name: 'ga_event',
				            label: 'GA gebeurtenis volgen?',
				            'values': [
				                {text: 'Nee', value: 'no'},
				                {text: 'Ja', value: 'yes'},
				            ]
				        },
						{
				            type: 'textbox',
				            name: 'ga_category',
				            label: 'GA gebeurteniscategorie'
						},
						{
				            type: 'textbox',
				            name: 'ga_action',
				            label: 'GA gebeurtenisactie'
						},
						{
				            type: 'textbox',
				            name: 'ga_label',
				            label: 'GA gebeurtenislabel'
				        }],
				        onsubmit: function( e ) {
				            editor.insertContent( '[button size="' + e.data.size + '" color="' + e.data.color + '" link="' + e.data.link + '" target="' + e.data.target + '" class="' + e.data.cssclass + '" ga_event="' + e.data.ga_event + '" ga_category="' + e.data.ga_category + '" ga_action="' + e.data.ga_action + '" ga_label="' + e.data.ga_label + '"]' + e.data.text + '[/button]');
				        }
				    });
                    }
                }
        	]
        });
    });
})();