I found the solution with help from Jacob Peattie and the article from https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/
Here's a quick walkthrough on what i did:
I made a new js file container the code of my original button, but modified it to the event listener of the widget tinymce
jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) { editor.settings.toolbar1 += ',bbh_custom_mce_button'; var pathname = window.location.hostname; var protocol = window.location.protocol editor.addButton( 'bbh_custom_mce_button', { title: 'Insert button', image: protocol + '//' + pathname + '/wp-content/themes/brandbyhand/include/tinymce-button/button-sharpen.png', onclick: function() { editor.windowManager.open( { title: 'Insert button', body: [ { type: 'textbox', name: 'text', label: 'Button text' }, { type: 'textbox', name: 'link', label: 'Button link', class: 'custom-link', onkeydown: function( event ){ var link = jQuery(event.target).val(); var windowID = event.currentTarget.id; jQuery(event.target).addClass('custom-link-' + windowID); /*if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){ link = (link.indexOf('://') === -1) ? 'http://' + link : link; } jQuery(event.target).val(link);*/ }, onfocusout: function( event ){ var link = jQuery(event.target).val(); var windowID = event.currentTarget.id; jQuery(event.target).addClass('custom-link-' + windowID); if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){ link = (link.indexOf('://') === -1) ? 'http://' + link : link; } jQuery(event.target).val(link); } }, { type : 'listbox', name : 'style', label : 'Button style', values : [ { text: 'Empty', value: 'ghost' }, { text: 'Filled', value: 'filled' }, ], value : 'style1' // Sets the default }, { type : 'checkbox', name : 'target', label : 'Open link in a new tab', checked : false } ], onsubmit: function( e ) { e.stopPropagation(); var windowID = e.target._eventsRoot._id; var link = jQuery('.custom-link-' + windowID).val(); if(link.indexOf('mailto:') === -1 && link.indexOf('tel:') === -1){ link = (link.indexOf('://') === -1) ? 'http://' + link : link; } jQuery('.custom-link-' + windowID).val(link); var target = '_self'; if(e.data.target === true){ target = '_blank'; } else if(e.data.target === false){ target = '_self' } editor.insertContent( '<span class="clearfix"><a class="btn btn-custom ' + e.data.style + '" target="' + target + '" href="' + link + '">' + e.data.text + '</a></span>' ); editor.windowManager.close(); } }); } }); });
I then enqueued that file using the admin_enqueue_scripts hook:
function my_enqueue($hook) { if ( 'widgets.php' != $hook ) { return; } wp_enqueue_script( 'tinymce_custom_button_widget', get_stylesheet_directory_uri() . '/js/tinymce_widget.js', array( 'jquery' ), '1.0', true ); wp_enqueue_style( 'tinymce_custom_button_widget_css', get_stylesheet_directory_uri() . '/include/tinymce-button/custom-editor-style.css', '1.0', 'all'); } add_action( 'admin_enqueue_scripts', 'my_enqueue' );
And thats basically it.
