Wie man das benutzerdefinierte tinymce-Plugin zu einem neuen Text-Widget hinzufügt

So habe ich ein benutzerdefiniertes TinyMCE-Plugin, das dem Editor eine Schaltfläche hinzufügt.

Ich verwende den Filter mce_external_plugins und mce_buttons , um mein TinyMCE-Plugin hinzuzufügen.

Nachdem WP 4.8 das einfache TinyMCE für das neue Text-Widget eingeführt hat, möchte ich auch meinen Button in diesen Editor einfügen. Aus irgendeinem Grund kann ich den Widget-Editor in Bezug auf Änderungen und zusätzliche functionen nicht finden.

Hat irgendjemand von euch Glück gehabt, den Widget Editor zu modifizieren? Oder haben Sie irgendwelche Dokumentation für benutzerdefinierte Plugins dafür gesehen?

Solutions Collecting From Web of "Wie man das benutzerdefinierte tinymce-Plugin zu einem neuen Text-Widget hinzufügt"

Ich fand die Lösung mit Hilfe von Jacob Peattie und dem Artikel von https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/

Hier ist eine kurze Anleitung, was ich getan habe:

Ich habe einen neuen js-Dateicontainer erstellt, den Code meiner ursprünglichen Schaltfläche, aber ich habe ihn zum Ereignis-Listener des Widgets tinymce geändert

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( '' + e.data.text + '' ); editor.windowManager.close(); } }); } }); }); 

Ich habe dann diese Datei mithilfe des Hooks admin_enqueue_scripts eingereiht:

 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' ); 

Und das ist es im Grunde genommen.