Agregar una función jQuery a las páginas de administración

3

Necesito agregar un poco de documento listo para jQuery para publicar / editar editores en admin. Estoy pirateando un antiguo complemento que agrega un cuadro de texto a la página del editor y se encarga de insertar ese texto en un archivo de plantilla, pero la entrada de texto es solo html; esta función de documento listo agrega la clase de mceEditor al cuadro de texto. Esta función funciona cuando lo incluyo manualmente en admin-header.php, pero no puedo hacer eso, por supuesto.

No creo que deba ponerlo en cola, ya que no es una biblioteca. O yo? Y, si corresponde: ¿cuáles son las ventajas y desventajas de las diferentes formas de agregarlo?

Entonces, ¿cómo puedo conectar esto o cargarlo en los editores de publicación / página en admin? Debe ir al archivo de plugin, no functions.php en el tema.

<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>
    
pregunta markratledge 27.07.2011 - 19:17

2 respuestas

5

Me sentiría inclinado a hacer una salida única y terminar con ella ...

Significa que tiene que administrar un archivo adicional (el archivo JS), pero cuando escribe un código, por lo general es una buena idea crear algún tipo de organización con sus archivos (o al menos adquiera el hábito de hacerlo). ), es decir. javascript / jquery en una carpeta, css es otra, manteniendo PHP y HTML en los archivos PHP de su complemento principal.

Entonces, mi sugerencia sería mover el jQuery a un archivo js, luego ejecutar un jQuery de configuración en cola como una dependencia, pero no es necesario registrarlo para una única llamada.

Unas pocas opciones con respecto a los ganchos, pero yo personalmente iría por ...

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

Simplemente ajuste las páginas en las que necesita la cola para ejecutarse en la llamada in_array() .

    
respondido por el Mark Duncan 27.07.2011 - 20:09
5

Hace un tiempo que necesitaba algo como esto, esto es lo que usé:

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

En ese momento, simplemente lo conecté a la acción admin_head , ahora sé que hay todo un montón de acciones . Quizás en este caso sería mejor conectarlo a la acción admin_print_scripts :

add_action('admin_print_scripts', 'admin_js');

Nota: Esto imprimirá el script en la página, si quieres mantenerlo en un archivo externo, tendrás que ponerlo en cola:

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

Y en su archivo admin-js.js , el 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");
         }
    });

Estoy usando estos dos métodos en las páginas de opciones y ambos funcionan sin problemas.

    
respondido por el Mario 27.07.2011 - 19:31

Lea otras preguntas en las etiquetas