it-swarm.com.de

Registrieren von benutzerdefinierten TinyMCE-Schaltflächen für den Administratorbereich, um mit benutzerdefinierten Instanzen von wp_editor zu arbeiten

Dank dieser Antwort hier kann ich verschiedene Instanzen von wp_editor verwenden, um zu bestimmen, welche Schaltflächen jede meiner unterschiedlichen TinyMCE-Instanzen verwendet.

Ich bemühe mich jedoch, meine Schaltflächen tatsächlich zu registrieren - sie werden auf der TinyMCE-Oberfläche einfach nicht so angezeigt, wie ich es mir vorgestellt habe!

Ich habe zwei verschiedene Ansätze ausprobiert: das Einfügen des Codes in mein species-profiles-Plugin (ein benutzerdefinierter Beitragstyp namens species, in dem die TinyMCE-Instanzen enthalten sein sollen) und das Einfügen des Codes in den functions.php meines Themas.

Der Code, den ich benutze, ist:

function add_SF_buttons() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'add_SF_buttons_plugins');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    $plugin_array['pH_min'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_min/editor_plugin.js';
    $plugin_array['pH_max'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_max/editor_plugin.js';
    return $plugin_array;
}

add_action( 'init', 'add_SF_buttons' );

Der Code, mit dem ich die wp_editor -Instanz gemäß der oben genannten Antwort initialisiere, lautet wie folgt:

<?php
    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );
?>

Die Plugins, die ich verwende, sehen alle so aus:

(function() {
    tinymce.create('tinymce.plugins.pH', {
        init : function(ed, url) {
            ed.addButton('pH', {
                title : 'pH',
                image : url+'/pH.png',
                onclick : function() {
                    var caret = "caret_pos_holder";
                    var insert = '[pH]';
                    ed.execCommand('mceInsertContent', false, insert);
                    ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                    ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            /*
             * I intentionally left the information of
             * Brett Terpstra, as his code was the
             * foundation for this.
            */
            return {
                longname : "Brett's YouTube Shortcode",
                author : 'Brett Terpstra',
                authorurl : 'http://brettterpstra.com/',
                infourl : 'http://brettterpstra.com/',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('pH', tinymce.plugins.pH);
})();

Soweit ich weiß, stimmt alles, was ich dort getan habe? Die benutzerdefinierten Schaltflächen werden jedoch nicht angezeigt. Ich denke, ich mache etwas falsch - ich initialisiere sie falsch oder so.

How the TinyMCE interface appears

Danke im Voraus,

2
dunc

Ich habe deinen Code in meine functions.php kopiert und ein einfaches Admin-Panel ('Foo') hinzugefügt, um den Editor anzuzeigen. Dann habe ich ein neues Verzeichnis in meinem aktuellen Thema für den Editor-Button erstellt und den Editor-Button JS in die entsprechende Datei eingefügt: /wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.js.

Ergebnis: Als ich zu Dashboard> Foo (das Panel, das ich erstellt hatte) ging, funktionierte es wie erwartet. Bildschirmfoto:

Screenshot

Code:

/**
 * This function conditionally hooks the function that adds custom buttons to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'wpse_48782_add_SF_buttons_plugins');
    }
}
add_action( 'init', 'wpse_48782_add_SF_buttons' );

/**
 * Adds the pH button to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    return $plugin_array;
}

/**
 * Load a dummy admin panel to display editor
 */
function wpse_48782_add_panel() {
    add_menu_page( 'Foo', 'foo', 'manage_options', 'foo', 'wpse_48782_render_panel' );
}
add_action( 'admin_menu', 'wpse_48782_add_panel' );

/**
 * Callback to render the 'Foo' admin panel'
 */
function wpse_48782_render_panel() {
    ?>

    <div class="wrap">

    <?php

    $distribution = 'abc';

    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );

    ?>
    </div>
    <?php
}

Sie haben also im Grunde alles richtig gemacht und müssen etwas anderes tun als das, was ich in den Sachen tue, über die Sienichtin Ihrer Erklärung gesprochen haben. Ein paar Möglichkeiten:

  1. Sie haben die Datei editor_plugin.js nicht an der richtigen Stelle abgelegt. Wie oben erwähnt, führt Ihr Pfad zu: [your-theme-dir]/tinymce_buttons/pH/editor_plugin.js (und den Versionen -max und -min). Stellen Sie sicher, dass diese Dateien existieren und die von Ihnen oben geposteten editor_plugin js enthalten. Wenn Sie die JS-Konsole Ihres Browsers öffnen, sollten Sie auf einen Blick feststellen können, ob Sie die richtigen Pfade verwenden - Sie erhalten einen "NetworkError" oder etwas Ähnliches, wenn dies nicht der Fall ist.

  2. Plugin Konflikt. Ein sehr unhöfliches Plugin/themefiltert möglicherweise'mce_external_plugins' und löscht Änderungen, die von anderen Plugins vorgenommen wurden (indem es ein Init-Array zurückgibt, das nichts mit dem an den Filter übergebenen $pluginsArray zu tun hat). Durchsuchen Sie Ihr WP-Inhaltsverzeichnis nach "mce_external_plugins" und überprüfen Sie, was Sie finden. Sie können auch versuchen, alle anderen Plugins zu deaktivieren und zu Twenty Eleven zu wechseln. Beachten Sie, dass ein Plugin Ihre Einstellungen auch löschen kann, indem Sie etwas Dummes am 'tiny_mce_before_init'-Filter tun, der als letzter ausgelöst wird, bevor der Editor gerendert wird - suchen Sie danach auch in Ihrem Inhaltsverzeichnis.

  3. Sie platzieren Ihren Code an der falschen Stelle, damit er nicht von WP geladen wird. Ich weiß, dass du sagst, dass du es in den functions.php deines Themas geschrieben hast - aber bist du dir sicher? Vielleicht hast du es in das falsche Thema gestellt oder so? Wir haben alle solche Tage;)

  4. Zu Beginn Ihrer ersten Funktion gibt es eine Bedingung, die besagt: Wenn der aktuelle Benutzer keine Beiträge und auch keine Seiten bearbeiten kann, zeigen Sie ihnen die Schaltflächen nicht an. Stellen Sie sicher, dass Sie Ihre Tests mit einem Benutzer durchführen, der über mindestens eine dieser Kappen verfügt. (Oder versuchen Sie, diese Prüfung nur als Test auskommentieren.)

3
Boone Gorges

Dank Boones hervorragender Antwort habe ich das genaue Problem gefunden.

Aus irgendeinem Grund können benutzerdefinierte Schaltflächen auf keiner Instanz von wp_editor verwendet werden, wenn auf der mit teeny=true festgelegten Seite wp_editor-Instanzen vorhanden sind.

Wenn Sie das Argument teeny=true entfernen, verschwindet das Problem.

1
dunc