I’ve created custom shortcode for CTA button:
function cta_shortcode_function( $ atts ) { $ a = shortcode_atts( array( 'url' => '#', 'text' => 'cta button', 'icon' => '<i class="far fa-caret-square-right"></i>', 'target' => '_blank', 'align' => 'center', ), $ atts ); echo '<div class="l-cta '.$ a['align'].'"> <a class="c-cta " href="'.$ a['url'].'" target="'.$ a['target'].'">'; if ( 'before' == get_theme_mod('cta_general_icon_position', true)) { echo '<span class="e-cta__icon e-cta__icon--before"> '.$ a['icon'].' </span>'; } echo '<div class="e-cta__text">'.$ a['text'].'</div>'; if ( 'after' == get_theme_mod('cta_general_icon_position')) { echo '<span class="e-cta__icon e-cta__icon--after"> '.$ a['icon'].' </span>'; } echo '</a> </div>'; } add_shortcode('cta_shortcode', 'cta_shortcode_function');
Now I would like to create this shortcode via button in TinyMCE Editor, so what I did is:
/* Custom button in TinyMCE editor */ function mce_cta_button() { if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) { add_filter( 'mce_external_plugins', 'custom_tinymce_plugin' ); add_filter( 'mce_buttons', 'register_mce_buttons' ); } } add_action('admin_head', 'mce_cta_button'); // Path to the js file with the custom button function function custom_tinymce_plugin( $ plugin_array ) { $ plugin_array['mce_cta_button'] = get_template_directory_uri() .'/js/tinymce_buttons_cta.js'; return $ plugin_array; } // New button in the editor function register_mce_buttons( $ buttons ) { array_push( $ buttons, 'mce_cta_button' ); return $ buttons; }
and ofc the JS file:
(function () { tinymce.PluginManager.add('mce_cta_button', function(editor, url) { editor.addButton('mce_cta_button', { icon: false, text: 'CTA button', onclick: function (e) { editor.windowManager.open( { title: "CTA button's things", body: [{ type: 'textbox', name: 'Icon from FontAwesome', placeholder: 'Copy and paste <i> object from FontAwesome site', multiline: true, minWidth: 420, }, { type: 'listbox', name: 'align', label: 'CTA align', maxWidth: 420, values: [ { text: 'Start', value: 'start' }, { text: 'Cenetr', value: 'center' }, { text: 'End', value: 'end' } ]}, { type: 'button', name: 'link', text: 'Insert/Edit link', onclick: function( e ) { //get the Wordpess' "Insert/edit link" popup window. var textareaId = jQuery('.mce-custom-textarea').attr('id'); wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance wpLink.open( textareaId ); //open the link popup return false; }, }], onsubmit: function( e ) { editor.insertContent( 'MY SHORTCODE'); } }); } }); }); })();
What I don’t know is how to connect my shortcode to this button and why link window doesn’t work correctly (buttons "ok" or "cancel" aren’t working, I can’t close this window and can’t search pages).
Any help?
Thanks