Fügen Sie die Schaltfläche im TinyMCE-Editor hinzu, um Text einzufügen

Ich suche nach einer Möglichkeit, dem TinyMCE-Editor eine benutzerdefinierte Schaltfläche hinzuzufügen, wenn Sie einen Text in den visuellen Editor einfügen.

Zum Beispiel: Button “Hallo”, wenn angeklickt Einfügen in den Editor "Hello I'm Mark!"

Ist es möglich? Und wie?

Solutions Collecting From Web of "Fügen Sie die Schaltfläche im TinyMCE-Editor hinzu, um Text einzufügen"

Fügen Sie dies zu Ihrer Plugin-Datei oder in der Datei functions.php im Themenverzeichnis hinzu

 add_action( 'admin_enqueue_scripts', 'wpse_141344_admin_enqueue_scripts' ); add_action( 'admin_head', 'wpse_141344_add_mce_button' ); function wpse_141344_admin_enqueue_scripts() { wp_enqueue_script( 'wpse_141344-tinymce-scipt', 'url/to/your/custom-tinymce.js' ); } function wpse_141344_add_mce_button() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } add_filter( 'mce_external_plugins', 'wpse_141344_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'wpse_141344_register_mce_button' ); } function wpse_141344_add_tinymce_plugin( $plugin_array ) { $plugin_array['wpse_141344_tinymce_button'] = 'url/to/your/custom-tinymce.js'; return $plugin_array; } function wpse_141344_register_mce_button( $buttons ) { array_push( $buttons, 'wpse_141344_tinymce_button' ); return $buttons; } 

Und das ist Ihre custom-tinymce.js Datei

 (function() { tinymce.PluginManager.add('wpse_141344_tinymce_button', function( editor, url ) { editor.addButton( 'wpse_141344_tinymce_button', { // image : 'url/to/an/icon', // optional text : 'Hi', title : 'Hi', onclick: function() { editor.insertContent('Hello I\'m Mark!'); } }); }); })(); 

Wenn Sie einen Button von Grund auf neu erstellen möchten, verwenden Sie diesen Code:

   

Dieses Snippet-Plugin (electricg / tinymce-snippet-plugin) könnte nützlich sein, wenn Sie schnell benutzerdefinierte Schaltflächen mit Dropdown-Menüs hinzufügen möchten, ohne so viel zu programmieren.

Sie können auch in das Plugin schauen, um ein High-Level-System zu erstellen, wenn Sie interessiert sind.

Versuche dies :

Fügen Sie diesen Code der Datei functions.php .

 add_action( 'init', 'droid_buttons' ); function droid_buttons() { add_filter( "mce_external_plugins", "droid_add_buttons" ); add_filter( 'mce_buttons', 'droid_register_buttons' ); } function droid_add_buttons( $plugin_array ) { $plugin_array['droid'] = get_template_directory_uri() . '/text-button.js'; echo get_template_directory_uri(); return $plugin_array; } function droid_register_buttons( $buttons ) { array_push( $buttons, 'droid_title'); // droid_title return $buttons; } 

Erstellen Sie die .js Datei und ersetzen Sie den Pfad / Speicherort der js-Datei im folgenden Code:

  (function() { tinymce.create('tinymce.plugins.Droid', { init : function(ed, url) { ed.addButton('droid_title', { title : 'Droid Title', cmd : 'droid_title', image : '' }); ed.addCommand('droid_title', function() { var selected_text = ed.selection.getContent(); var return_text = ""; return_text = 'Hello I\'m Mark!'; ed.execCommand('mceInsertContent', 0, return_text); }); }, }); // Register plugin tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid ); })();