¿Cómo agregar CSS personalizado (opción de tema) a TinyMCE?

Navega tus respuestas
12

Estoy tratando de agregar CSS personalizado (configurado a través de opciones de tema) al editor visual TinyMCE en WordPress. En la parte frontal, el tema genera este CSS y lo genera en el gancho wp_head . El problema que estoy encontrando es poder agregar esa salida CSS al editor.

Esto no se puede hacer con add_editor_style( 'editor-style.css' ) porque necesitamos usar PHP para acceder a la opción del tema.

Como ejemplo de cómo funciona en la parte frontal: 

add_action( 'wp_head', 'my_custom_colors' );

function my_custom_colors() {
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "<style type='text/css'>a { color: #{$color_1}; }";
}

Necesito un método para incluir ese estilo personalizado en el editor visual. Cualquier ayuda sería apreciada grandemente.

    
pregunta Justin Tadlock 31.10.2013 - 20:14

5 respuestas

7

Solución 1

Esto funciona como solución javascript:

Ejemplo: 

tinyMCE.activeEditor.dom.addStyle('p {color:red; font-size:28px;}');

simplemente abre tu consola js y pégala para una prueba rápida. Para apuntar a un editor específico se debe usar: 

tinyMCE.getInstanceById('##editorID##').dom.addStyle('p {color:red; font-size:28px;}');

Esto inyectará la cadena proporcionada en los editores iframe <head><style id="mceDefaultStyles"></style> ...

Solución 2

Use wp_ajax como controlador de devolución de llamada para agregar estilos dinámicos en el editor init usando un filtro 

add_filter('tiny_mce_before_init', 'dynamic_editor_styles', 10);

function dynamic_editor_styles($settings){
    // you could use a custom php file as well, I'm using wp_ajax as
    // callback handler for demonstration
    // content_css is a string with several files seperated by a comma
    // e.g. file1, file2, ... extend the string

    $settings['content_css'] .= ",".admin_url('admin-ajax.php') ."/?action=dynamic_styles";

    return $settings;
}

// add wp_ajax callback
add_action('wp_ajax_dynamic_styles', 'dynamic_styles_callback');
function dynamic_styles_callback(){
    echo "p {color:red} h1{font-size:48px;}";
}
    
respondido por el ungestaltbar 31.10.2013 - 20:21
9

WordPress proporciona un mce_css filter , que se puede usar para agregar hojas de estilo personalizadas al Editor Visual. Según el Codex:

  

El archivo puede ser un archivo .php, permitiendo la generación dinámica de reglas CSS   para el editor de contenido.

Ejemplo de devolución de llamada de filtro de Codex, modificada para un tema: 

function wpse120831_mce_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= get_template_directory_uri() . '/dynamic-css.php';

    return $mce_css;
}

add_filter( 'mce_css', 'wpse120831_mce_css' );
    
respondido por el Chip Bennett 31.10.2013 - 21:04
4

Acepté la solución anterior por @ungestaltbar. Sin embargo, quería ampliar un poco esta respuesta con la solución completa que estoy usando para que otros puedan ver cómo funciona. 

add_action( 'after_setup_theme', 'my_theme_setup' );

function my_theme_setup() {

    add_editor_style(
        array(
            'editor-style.css',
            add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) ),
        )
    );
}

add_action( 'wp_ajax_my_editor_styles', 'my_editor_styles_callback' );
add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );

function my_editor_styles_callback() {

    // @todo sanitize
    $color_1 = get_theme_mod( 'color_1', 'cc4a00' );

    echo "a { color: #{$color_1}; }";

    die();
}

Espero que esté bien publicar otra respuesta aquí de esta manera. No vi una manera de publicar esto en respuesta directa a mi solución aceptada. Todavía estoy aprendiendo a usar WPSE.

    
respondido por el Justin Tadlock 31.10.2013 - 22:02
4

Probablemente llego tarde a esta fiesta, pero después de usar la solución anterior, ¡pronto me di cuenta de que la velocidad de carga de la página del editor se había visto gravemente afectada! Echando un vistazo al código, me di cuenta de que el código sigue ejecutándose mucho después de que se haya inicializado tinyMCE.activeEditor. El código utiliza el método setInterval () que evalúa una expresión a intervalos específicos, creo que fue porque no se pudo determinar en qué punto durante la ejecución del código "activeEditor" estará disponible. Esto es lo que llevó a la velocidad de la página a caer de rodillas.

Una solución mucho mejor que estoy usando para crear un complemento es esta 

   /**
     * Extend TinyMCE config with a setup function.
     * See http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onInit

     */
    function custom_tinymce_css($init) {

      $css = get_option('some_css'); 

     ?>

        <script type="text/javascript">            

            function addTempCSS( ed ) {
                ed.onInit.add( function() {
                    tinyMCE.activeEditor.dom.addStyle(<?php echo json_encode($css) ?>);
                } );
            };
        </script>

        <?php
        if (wp_default_editor() == 'tinymce')
            $init['setup'] = 'addTempCSS';

        return $init;
    }
    add_filter('tiny_mce_before_init', 'custom_tinymce_css');

Aquí se utiliza un escucha nativo de TinyMCE para ejecutar el código después de que se inicializa el editor activo. Espero que esto ayude a alguien por ahí. Saludos cordiales.

    
respondido por el Ayebare M 02.10.2014 - 15:13
1

Esta es una solución modificada publicada en los foros de WordPress.org para esta pregunta: enlace

Esto definitivamente funciona. Sin embargo, no soy un gurú de JS, así que no estoy del todo seguro de si esta es la mejor solución. 

add_action( 'before_wp_tiny_mce', 'my_tinymce_callback' );

function my_tinymce_callback() {

    $color_1 = get_theme_mod( 'color_1', 'cc4a00' ); ?>

    <script type="text/javascript">
    jQuery( document ).ready(

        function() {
            var my_style = 'a { color: #<?php echo $color_1; ?>; }';

            var checkInterval = setInterval(
                function() {

                    if ( 'undefined' !== typeof( tinyMCE ) ) {
                        if ( tinyMCE.activeEditor && ! tinyMCE.activeEditor.isHidden() ) {

                            jQuery( '#content_ifr' ).contents().find( 'head' ).append( '<style type="text/css">' + my_style + '</style>' );

                            clearInterval( checkInterval );
                        }
                    }
                }, 
                500 
            );
        }
    );
    </script>
<?php }

Esto también podría agregarse a un archivo JS. Podrías pasar fácilmente las variables a través de wp_localize_script() con eso.

    
respondido por el Justin Tadlock 31.10.2013 - 21:19

Lea otras preguntas en las etiquetas

¿Las URL de biblioteca de medios no deseadas en las publicaciones? Configuración de la imagen destacada de una publicación desde un video incrustado de YouTube