Como adicionar CSS personalizado (opção de tema) ao TinyMCE?

12

Estou tentando adicionar CSS personalizado (definido por meio de opções de tema) ao editor visual TinyMCE no WordPress. No front-end, o tema gera este CSS e o gera no gancho wp_head . O problema que estou correndo é poder adicionar essa saída CSS ao editor.

Isso não pode ser feito com add_editor_style( 'editor-style.css' ) porque precisamos usar o PHP para acessar a opção do tema.

Como exemplo de como funciona no front end:

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}; }";
}

Eu preciso de um método para colocar esse estilo personalizado no editor visual. Qualquer ajuda seria muito apreciada.

    
por Justin Tadlock 31.10.2013 / 20:14

5 respostas

7

Solução 1

Isso funciona como uma solução de javascript:

Exemplo:

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

basta abrir o seu console js e colá-lo para um teste rápido. Para segmentar um editor específico, deve-se usar:

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

Isso injetará a string fornecida nos editores iframe <head><style id="mceDefaultStyles"></style> ...

Solução 2

Use wp_ajax como manipulador de retorno de chamada para adicionar estilos dinâmicos no init do editor usando um 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;}";
}
    
por ungestaltbar 31.10.2013 / 20:21
9

O WordPress fornece um filtro mce_css , que pode ser usado para adicionar folhas de estilo personalizadas ao Editor Visual. De acordo com o Codex:

  

O arquivo pode ser um arquivo .php, permitindo a geração dinâmica de regras CSS   para o editor de conteúdo.

Exemplo de retorno de chamada do filtro do Codex, modificado para um 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' );
    
por Chip Bennett 31.10.2013 / 21:04
4

Aceitei a solução acima por @ungestaltbar. No entanto, quis expandir um pouco essa resposta com a solução completa que estou usando para que outras pessoas possam ver como 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 não haja problema em postar outra resposta aqui assim. Eu não vi uma maneira de postar isso em resposta direta à minha solução aceita. Eu ainda estou aprendendo a usar o WPSE.

    
por Justin Tadlock 31.10.2013 / 22:02
4

Estou provavelmente atrasado para essa festa, mas depois de usar a solução acima, logo percebi que a velocidade de carregamento da página do editor havia sido severamente prejudicada! Observando atentamente o código, percebi que o código continua sendo executado muito depois que tinyMCE.activeEditor foi inicializado. O código usa o método setInterval () que avalia uma expressão em intervalos especificados, acredito que foi porque você não pôde determinar em que ponto durante a execução do código "activeEditor" estará disponível. Foi isso que fez a velocidade da página cair de joelhos.

Uma solução muito melhor que estou usando para criar um plugin é 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');

Aqui, um listener nativo do TinyMCE é usado para executar o código depois que o editor ativo é inicializado. Espero que isso ajude alguém lá fora. Atenciosamente.

    
por Ayebare M 02.10.2014 / 15:13
1

Esta é uma solução modificada publicada nos fóruns do WordPress.org para esta questão: enlace

Isso definitivamente funciona. Eu não sou guru da JS, então não tenho certeza se essa é a melhor solução.

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 }

Isso também pode ser adicionado a um arquivo JS. Você poderia facilmente passar variáveis via wp_localize_script() com isso.

    
por Justin Tadlock 31.10.2013 / 21:19

Tags