Fügen Sie eine benutzerdefinierte TinyMCE 4-Schaltfläche hinzu, die seit WordPress 3.9-beta1 verwendet werden kann

20

Wie ist es möglich, dem visuellen Editor TinyMCE, Version 4 , eine benutzerdefinierte Schaltfläche hinzuzufügen ?

Derzeit habe ich diese Fragen und Antworten mit ein paar Hinweisen zum Thema gefunden, aber keine Lösung oder Anleitung. Ich kann jedoch kein Tutorial, keine Dokumentation und keine Fragen zum Thema finden, um der TinyMCE-Version 4, die in WordPress seit Version 3.9-beta1 enthalten ist, eine benutzerdefinierte Schaltfläche hinzuzufügen.

Tor

Bildbeschreibung hier eingeben

bueltge
quelle

Antworten:

24

Das folgende kleine Plugin erstellt eine benutzerdefinierte Schaltfläche in Zeile 1 von WordPress TinyMCE Version 4, die in WP Version 3.9-beta2 getestet wurde.

Das Plugin hat var_dumpenthalten, um die Werte zu verstehen. Es ist auch möglich, die Schaltfläche in andere Zeilen des visuellen Editors einzufügen, nur einen anderen Haken, wie für Zeile 2:mce_buttons_2 .

Ergebnis

Bildbeschreibung hier eingeben

Plugin, PHP Seite - tinymce4-test.php

<?php
/**
 * Plugin Name: TinyMCE 4 @ WP Test
 * Description: 
 * Plugin URI:  
 * Version:     0.0.1
 * Author:      Frank Bültge
 * Author URI:  http://bueltge.de
 * License:     GPLv2
 * License URI: ./assets/license.txt
 * Text Domain: 
 * Domain Path: /languages
 * Network:     false
 */

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
    global $typenow;

    // Only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return ;

    add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// Inlcude the JS for TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {

    $plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
    // Print all plugin JS path
    var_dump( $plugin_array );
    return $plugin_array;
}

// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {

    array_push( $buttons, 'fb_test_button_key' );
    // Print all buttons
    var_dump( $buttons );
    return $buttons;
}

Skript, JavaScript Seite - plugin.js

( function() {
    tinymce.PluginManager.add( 'fb_test', function( editor, url ) {

        // Add a button that opens a window
        editor.addButton( 'fb_test_button_key', {

            text: 'FB Test Button',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Example plugin',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        label: 'Title'
                    }],
                    onsubmit: function( e ) {
                        // Insert content when the window form is submitted
                        editor.insertContent( 'Title: ' + e.data.title );
                    }

                } );
            }

        } );

    } );

} )();

Kern

Verwenden Sie das Gist Bueltge / 9758082 als Referenz oder laden Sie es herunter. The Gist enthält außerdem weitere Beispiele für verschiedene Schaltflächen in TinyMCE.

Links

bueltge
quelle
2
Die TinyMCE-Dokumentation zum Erstellen von Dialogen ist eigentlich nicht sehr hilfreich. Also schrieb ich einen Artikel, in dem die verschiedenen verfügbaren Widgets und Container-Layouts aufgelistet sind
Gagaro,
3

Und wenn Sie eine tatsächliche Symbolschaltfläche haben möchten, können Sie Dashicons oder Ihre eigene Symbolschrift verwenden.

Erstellen Sie eine CSS-Datei und stellen Sie sie auf der Administratorseite in die Warteschlange.

i.mce-i-pluginname:before {
    content: "\f164";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font: 400 20px/1 dashicons!important;
    speak: none;
    vertical-align: top;
}

Im Grunde genommen direkt vom Kern.

Dale Sattler
quelle
Richtig, war in meinen Links oben in der Links-Liste.
Bueltge
Ich wünschte, ich hätte diese Antwort gefunden, bevor ich eine halbe Stunde lang versucht hätte, sie über eine CSS-Datei hinzuzufügen. Dies scheint der beste Weg zu sein; Alle Tutorials, die ich online gefunden habe, sind unnötig ausführlich.
Aendrew
0

Die einfache Methode zum Hinzufügen von Schaltflächen

1) FÜGEN SIE DIESEN CODE IN FUNCTIONS.PHP ODER IN PLUGIN EIN

//add_protect_shortcode_button
add_action('admin_init', 'add_cb_button');function add_cb_button() {
   if (current_user_can('edit_posts')  &&  get_user_option('rich_editing') == 'true') {
        add_filter('mce_buttons_2', 'register_buttonfirst');
        add_filter('mce_external_plugins', 'add_pluginfirst');
   }
}
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array['MyPuginButtonTag'] =  plugin_dir_url( __FILE__ ).'My_js_folder/1_button.php';return $plugin_array;}
add_filter( 'tiny_mce_version', 'my_refresh_mceeee1');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Erstelle 1_button.php im Zielordner und füge diesen Code ein (beachte, ändere die URLs "wp-load" und "ButtonImage.png" !!!)

<?php 
header("Content-type: application/x-javascript");
require('../../../../wp-load.php');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create('tinymce.plugins.shortcodebuton_plugin2', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton('shortcode_button1', {  
                        title : 'Show Level1 count',  
                        image : this_folder_url + '/ButtonImage.png',
                        onclick : function() {  
                            ed.selection.setContent('[statistics_sp]');  
                                //var vidId = prompt("YouTube Video", "");
                                //ed.execCommand('mceInsertContent', false, '[youtube id="'+vidId+'"]');
                        }  
                    });


        }, 

        createControl   : function(n, cm) {     return null;  }, 
    });  
    tinymce.PluginManager.add('MyPuginButtonTag', tinymce.plugins.shortcodebuton_plugin2);  
})();
T.Todua
quelle
Ich denke das ist nicht der beste Weg. Das Include der wp-load.php ist nicht stabil. Das Tempo, in dem diese Datei belassen wird, ist unterschiedlich. Die Installation von WordPress bietet standardmäßig die Möglichkeit, das Theme und den Plugin-Ordner zu verschieben.
Bueltge