Come aggiungere CSS personalizzati (opzione tema) a TinyMCE?

14

Sto cercando di aggiungere CSS personalizzati (impostati tramite opzioni di temi) all'editor visivo di TinyMCE in WordPress. Sul front-end, il tema genera questo CSS e lo genera sulwp_head gancio. Il problema in cui mi imbatto è la possibilità di aggiungere quell'output CSS all'editor.

Questo non può essere fatto add_editor_style( 'editor-style.css' )perché dobbiamo usare PHP per accedere all'opzione del tema.

Come esempio di come funziona sul 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}; }";
}

Ho bisogno di un metodo per ottenere quello stile personalizzato nell'editor visivo. Qualsiasi aiuto sarebbe molto apprezzato.

tinymce

— Justin Tadlock
fonte

1

Nota: i CSS personalizzati post-content sono Plugin Territory e non devono essere inseriti in un tema. Altrimenti, gli utenti perderanno il proprio CSS personalizzato quando passano a un tema diverso.

— Chip Bennett,

@ChipBennett Sono solo parzialmente d'accordo. Questo dipende molto da quello che stai disegnando. A parte questo, non importa dove sia (per quella domanda).

— Kaiser

@ChipBennett Ha a che fare con gli stili dei temi, non con i contenuti personalizzati dei post CSS. Queste sono cose piuttosto standard che puoi fare con il personalizzatore del tema. È solo l'applicazione di questi stili che mi ha lasciato perplesso. È pensato per complimentarmi editor-style.css, che è il territorio tematico.

— Justin Tadlock,

Aspetta: stai parlando di uno stile di editor personalizzato dinamico ? Come in: rendere l'editor visivo (TinyMCE) consapevole degli stili definiti dalle opzioni del tema? In tal caso, ignora il mio commento originale e +1 per la domanda.

— Chip Bennett,

Potresti presentare una modifica e mostrare un esempio di un set completo per lo stile del tema? Quindi sarebbe più facile testarlo.

— Kaiser

7

Soluzione 1

Funziona come soluzione javascript:

Esempio:

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

basta aprire la console js e incollarlo per un rapido test. Per scegliere come target un editor specifico, utilizzare:

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

Questo inietterà la stringa fornita negli editor iframe <head><style id="mceDefaultStyles"></style> ...

Soluzione 2

Usa wp_ajax come gestore di callback per aggiungere stili dinamici all'iniz editor 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;}";
}

— ungestaltbar
fonte

2

Non sono del tutto sicuro di cosa farne.

— Justin Tadlock,

La soluzione n. 2 in realtà ha molto senso per me. Ti darò una prova.

— Justin Tadlock,

Sono andato con la soluzione n. 2. La differenza è che ho lasciato cadere la prima funzione e ho usato add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )poiché questo è il modo standard per i temi di aggiungere stili di editor.

— Justin Tadlock,

Solo per la mia edificazione, sarei curioso di sapere se ha mce_cssfunzionato per te (se l'hai provato).

— Chip Bennett,

In realtà non l'ho provato perché sapevo che potresti passare un file non CSS add_editor_style(), ma dovrebbe funzionare bene guardando il codice. L'uso mce_cssè in realtà una soluzione migliore nel caso in cui sia necessario collegarsi dopo gli stili aggiunti tramite add_editor_style(). Uno di questi motivi in un tema è perché gli URL completi aggiunti tramite add_editor_style()vengono visualizzati per primi, nonostante l'ordine in cui sono stati aggiunti.

— Justin Tadlock,

10

WordPress fornisce un mce_cssfiltro che può essere utilizzato per aggiungere fogli di stile personalizzati al Visual Editor. Secondo il Codice:

Il file può essere un file .php, che consente la generazione dinamica di regole CSS per l'editor dei contenuti.

Callback del filtro del codice di esempio, modificato per 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' );

— Chip Bennett
fonte

Mr.Bennett è stato più veloce, l'ho appena aggiunto anche alla mia risposta di seguito :), ma leggermente diverso.

— ungestaltbar,

@ungestaltbar stiamo attualmente utilizzando due filtri completamente diversi. :)

— Chip Bennett,

con lo stesso risultato :)

— ungestaltbar

4

Ho accettato la soluzione sopra di @ungestaltbar. Tuttavia, volevo ampliare un po 'questa risposta con la soluzione completa che sto usando in modo che gli altri possano vedere come funziona.

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

Spero sia giusto pubblicare qui un'altra risposta come questa. Non ho visto un modo per pubblicare questo in risposta diretta alla mia soluzione accettata. Sto ancora imparando come usare WPSE.

— Justin Tadlock
fonte

Forse dovresti aggiungere add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );se l'editor è usato sul frontend (per utenti non connessi).

— OriginalEXE,

Sì, la risposta con modifiche / modifiche significative va perfettamente bene. :) Cordiali saluti, se fosse stato risolto un problema nella risposta originale, inviare la modifica ad esso sarebbe la strada da percorrere.

— Rarst

@OriginalEXE - Yep. Lo aggiornerò.

— Justin Tadlock,

Solo un suggerimento per chiunque lo trovi in seguito, non sono riuscito a farlo funzionare correttamente, poiché è stato presentato. Alla fine ho capito che dovevo includere le informazioni di intestazione nel callback, quindi sarebbe stato visto come css. header ("Tipo di contenuto: text / css; charset: UTF-8"); Non sono sicuro se questo è qualcosa di diverso nel mio .htaccess o cosa.

— SkyShab,

4

Probabilmente sono in ritardo a questa festa, ma dopo aver utilizzato la soluzione di cui sopra, ho presto capito che la velocità di caricamento della pagina dell'editor era stata gravemente compromessa! Dando uno sguardo attento al codice, mi sono reso conto che il codice continua a essere eseguito anche dopo l'inizializzazione di tinyMCE.activeEditor. Il codice utilizza il metodo setInterval () che valuta un'espressione a intervalli specificati, credo che ciò sia dovuto al fatto che non è possibile determinare in quale momento durante l'esecuzione del codice "activeEditor" sarà disponibile. Questo è ciò che ha portato la velocità della pagina in ginocchio.

Una soluzione molto migliore che sto usando per creare un plugin è questa

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

Qui un listener TinyMCE nativo viene utilizzato per eseguire il codice dopo l'inizializzazione dell'editor attivo. Spero che questo possa aiutare qualcuno là fuori. Cordiali saluti.

— Ayebare M
fonte

1

Funzionando per me, ha solo una chiamata API deprecata in tinymce 4.0 che devi modificare ed.onInit.add (function () {... in ed.on ('init', function () {...

— Mohammed

1

Questa è una soluzione modificata pubblicata sui forum di WordPress.org per questa domanda: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

Questo sicuramente funziona. Non sono un guru di JS, quindi non sono del tutto sicuro se questa sia la soluzione migliore.

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 }

Questo potrebbe anche essere aggiunto a un file JS. Puoi facilmente passare le variabili wp_localize_script()con quello.

— Justin Tadlock
fonte