it-swarm.com.de

Fügen Sie Administrationsseiten eine jQuery-Funktion hinzu

Ich muss ein bisschen document ready jQuery hinzufügen, um Editoren für Posts/Seiten in admin zu erstellen. Ich hacke ein altes Plugin, das der Editor-Seite ein Textfeld hinzufügt und den Text in eine Vorlagendatei einfügt, aber die Texteingabe ist nur HTML. Mit dieser Dokumentbereitschaftsfunktion wird die Klasse mceEditor zum Textfeld hinzugefügt. Diese Funktion funktioniert, wenn ich sie manuell in admin-header.php einbinde, aber das kann ich natürlich nicht.

Ich glaube nicht, dass ich es in die Warteschlange stellen muss, da es keine Bibliothek ist. Oder tue ich? Und falls zutreffend: Was sind die Vor-/Nachteile der verschiedenen Möglichkeiten, es hinzuzufügen?

Wie hänge ich das an oder lade es auf andere Weise in die Post-/Seiten-Editoren in admin? Es muss in die Plugin-Datei gehen, nicht in die Datei functions.php im Theme.

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>
3
markratledge

Ich wäre geneigt, einfach eine einmalige Warteschlange zu machen und damit fertig zu sein.

Das bedeutet, dass Sie eine zusätzliche Datei (die JS-Datei) verwalten müssen, aber wenn Sie Code schreiben, ist es normalerweise eine gute Idee, eine Art Organisation mit Ihren Dateien zu erstellen (oder sich zumindest daran zu gewöhnen), d. H . Javascript/jQuery in einem Ordner, CSS ist ein anderes, wobei PHP und HTML in den PHP Dateien Ihres Haupt-Plugins gespeichert bleiben.

Daher würde ich vorschlagen, die jQuery in eine js-Datei zu verschieben und dann eine Enqueue-Einstellung für jQuery als Abhängigkeit auszuführen, ohne sie für einen einmaligen Aufruf registrieren zu müssen.

Ziemlich viele Möglichkeiten in Bezug auf Haken, aber ich persönlich würde mich für ... entscheiden.

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Handle
        plugins_url( '/yourfilename.js', __FILE__ ),  // Path to file
        array( 'jquery' )                             // Dependancies
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Passen Sie einfach die Seiten an, auf denen die Warteschlange ausgeführt werden soll - im Aufruf in_array().

5
Mark Duncan

Vor einiger Zeit brauchte ich so etwas, das habe ich benutzt:

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

Zu dieser Zeit habe ich es einfach mit der Aktion admin_head verknüpft, jetzt weiß ich, dass es eine ganze Menge Aktionen gibt. Vielleicht ist es in diesem Fall besser, sich an die Aktion admin_print_scripts zu binden:

add_action('admin_print_scripts', 'admin_js');

Hinweis: Dadurch wird das Skript auf der Seite gedruckt. Wenn Sie es in einer externen Datei behalten möchten, müssen Sie es in die Warteschlange stellen:

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

Und in Ihrer admin-js.js Datei das Javascript:

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

Ich verwende beide Methoden auf Optionsseiten und beide funktionieren ohne Probleme.

5
Mario