TinyMCE'ye nasıl özel CSS (tema seçeneği) ekleyebilirim?

14

WordPress'teki TinyMCE görsel düzenleyicisine özel CSS (tema seçenekleri ile ayarlanmış) eklemeye çalışıyorum. Ön uçta, tema bu CSS'yi oluşturur ve wp_headkancaya çıkarır. Karşılaştığım sorun, bu CSS çıktısını düzenleyiciye ekleyebiliyor olmak.

add_editor_style( 'editor-style.css' )Tema seçeneğine erişmek için PHP kullanmamız gerektiğinden bu yapılamaz .

Ön uçta nasıl çalıştığına bir örnek olarak:

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

Bu özel stili görsel düzenleyiciye almak için bir yönteme ihtiyacım var. Herhangi bir yardım büyük mutluluk duyacağız.

tinymce

— Justin Tadlock
kaynak

1

Not: özel içerik sonrası CSS Eklenti Bölgesi'dir ve bir Temaya konulmamalıdır. Aksi takdirde, kullanıcılar farklı bir Temaya geçerken özel CSS'lerini kaybeder.

— Chip Bennett

@ChipBennett Kısmen katılıyorum. Bu son derece bağlıdır neler Eğer stil ediyoruz. Bunun dışında, nerede olduğu önemli değil (bu soru için).

— kaiser

@ChipBennett Bu, özel gönderi içeriği CSS'siyle değil tema stilleriyle ilgilidir. Bu, tema özelleştirici ile yapabileceğiniz oldukça standart şeyler. Sadece bu stilleri uyguluyorum. editor-style.cssTema bölgesi olan iltifat içindir .

— Justin Tadlock

Bekleyin: Dinamik özel editör stilinden mi bahsediyorsunuz ? İçinde olduğu gibi: görsel düzenleyiciyi (TinyMCE) Tema seçeneği tanımlı stillerden haberdar etmek ister misiniz? Öyleyse, orijinal yorumumu dikkate almayın ve soru için +1 .

— Chip Bennett

Bir düzenleme dosyalayabilir ve tema stili için tam bir set örneği gösterebilir misiniz ? O zaman test etmek daha kolay olurdu.

— kaiser

7

Çözüm 1

Javascript çözümü olarak çalışır:

Misal:

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

js konsolunuzu açın ve hızlı bir test için yapıştırın. Belirli bir düzenleyiciyi hedeflemek için aşağıdakileri kullanmalısınız:

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

Bu, sağlanan dizeyi editörlerin iframe'ine enjekte eder <head><style id="mceDefaultStyles"></style> ...

Çözüm 2

Filtre kullanarak düzenleyici başlangıcına dinamik stiller eklemek için wp_ajax'ı geri arama işleyicisi olarak kullanma

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
kaynak

2

Bununla ne yapacağımdan tam olarak emin değilim.

— Justin Tadlock

Çözüm # 2 aslında benim için çok anlamlı. Bunu bir deneme turu yapacağım.

— Justin Tadlock

Çözüm # 2 ile gittim. Aradaki fark, ilk işlevi bıraktığım ve add_editor_style( add_query_arg( 'action', 'my_editor_styles', admin_url( 'admin-ajax.php' ) )temaların editör stilleri eklemenin standart yolu olduğu için kullanıyorum.

— Justin Tadlock

Sadece kendi edisyonum için, senin için çalışıp mce_cssçalışmadığını bilmek isterdim (denediysen).

— Chip Bennett

Aslında denemedim çünkü CSS olmayan bir dosyayı aktarabileceğinizi biliyordum add_editor_style(), ancak koda bakarak gayet iyi çalışmalı. Kullanmak mce_css, stilleri ekledikten sonra takmanız gerektiğinde daha iyi bir çözümdür add_editor_style(). Bir temanın bu nedenlerinden biri, üzerinden eklenen tam URL'lerin, eklendikleri add_editor_style()sıraya rağmen önce çıktısıdır.

— Justin Tadlock

10

WordPress , Visual Editor'a özel stil sayfaları eklemek için kullanılabilecek bir mce_cssfiltre sağlar . Kodeks'e göre:

Dosya, içerik düzenleyicisi için dinamik CSS kurallarının oluşturulmasına izin veren bir .php dosyası olabilir.

Tema için değiştirilmiş kodeks filtresi geri çağırma örneği:

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
kaynak

Mr.Bennett daha hızlıydı, bunu aşağıdaki yanıma da ekledim :), ama biraz farklı.

— ungestaltbar

@ungestaltbar aslında tamamen farklı iki filtre kullanıyoruz. :)

— Chip Bennett

aynı sonuçla :)

— ungestaltbar

4

Yukarıdaki çözümü @ ungestaltbar tarafından kabul ettim. Ancak, başkalarının nasıl çalıştığını görebilmeleri için kullandığım tam çözümle bu cevabı biraz genişletmek istedim.

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

Bu şekilde başka bir cevap göndermenin iyi olacağını umuyorum. Bunu kabul edilen çözümüme doğrudan yanıt olarak göndermenin bir yolunu görmedim. Hala WPSE kullanmayı öğreniyorum.

— Justin Tadlock
kaynak

add_action( 'wp_ajax_nopriv_my_editor_styles', 'my_editor_styles_callback' );Düzenleyicinin ön uçta kullanılıp kullanılmadığını (oturum açmamış kullanıcılar için) eklemeniz gerekebilir.

— OriginalEXE

Evet, önemli değişiklikler / ince ayarlarla cevap vermek gayet iyi. :) Orijinal cevapta düzeltilmesi gereken bazı sorunların üzerindeyse FYI, o zaman düzenleme göndermek gitmek için yol olacaktır.

— Rarst

@OriginalEXE - Evet. Ben güncelleyeceğim.

— Justin Tadlock

Daha sonra bulan herkes için sadece bir ipucu, sunulduğu gibi, düzgün çalışması için alamadım. Sonunda, geri çağrıda başlık bilgisini eklemem gerektiğini anladım, bu yüzden css olarak görülecektir. header ("İçerik türü: metin / css; karakter kümesi: UTF-8"); Bunun .htaccess dosyamda veya başka bir şeyde farklı olup olmadığından emin değilim.

— SkyShab

4

Muhtemelen bu partiye geç kaldım, ancak yukarıdaki çözümü kullandıktan sonra, editörün sayfa yükleme hızının ciddi şekilde sakat bırakıldığını fark ettim! Koda keskin bir bakışla, tinyMCE.activeEditor başlatıldıktan çok sonra kodun yürütülmeye devam ettiğini fark ettim. Kod, belirtilen aralıklarda bir ifadeyi değerlendiren setInterval () yöntemini kullanır, bunun nedeni, kod yürütme sırasında "activeEditor" kullanılabilir durumdayken hangi noktayı belirleyemeyeceğinize inanıyorum. Sayfa hızını dizlerine indiren budur.

Bir eklenti oluşturmak için kullandığım çok daha iyi bir çözüm bu

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

Burada, aktif düzenleyici başlatıldıktan sonra kodu yürütmek için yerel bir TinyMCE dinleyicisi kullanılır. Umarım bu birisine yardım eder. Saygılarımla.

— Ayebare M
kaynak

1

Benim için çalışan bu sadece küçücük bir API çağrısı var tinymce 4.0 ed.onInit.add (function () {... için ed.on ('init', function () {...

— Mohammed

1

Bu, bu soru için WordPress.org forumlarında yayınlanan değiştirilmiş bir çözümdür: http://wordpress.org/support/topic/customdynamic-css-in-tinymce?replies=14#post-4827573

Bu kesinlikle işe yarıyor. Ben JS guru değilim, bu yüzden bu en iyi çözüm olup olmadığından tamamen emin değilim.

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 }

Bu bir JS dosyasına da eklenebilir. wp_localize_script()Bununla değişkenleri kolayca iletebilirsiniz .

— Justin Tadlock
kaynak