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.