TinyMCE: Biçim açılır menüsüne CSS ekleme

TinyMCE düzenleyicisinin gövdesinde stilleri önizleyebilmem için add_editor_style () kullanarak başarıyla bir TinyMCE stil sayfası ekledim.

Ancak, add_editor_style () işlevinin yalnızca düzenleyicinin gövdesi için stile erişebileceğini varsayar mıyım?

Öyleyse, TinyMCE Format açılır menüsünün stiline erişmek için kullanabileceğim başka bir yöntem veya işlev var mı?

resim açıklamasını buraya girin

css tinymce

— Marc P
kaynak

Açılır listeyi geliştiremezsiniz formatselect. Ama kanca ile artırabilirsiniztiny_mce_before_init ile ikinci açılırstyleselect varsayılan bir WordPress kurulumunda gizleme vardır. Dokümantasyon tüm varsayılan ve olanaklarını sıralar.

inline - Örneğin “span” üretmek için satır içi öğenin adı. Geçerli metin seçimi bu satır içi öğeye sarılır.
block - Üretilecek blok elemanının adı, örneğin “h1 ″. Seçimdeki mevcut blok elemanları yeni blok elemanıyla değiştirilir.
seçici - CSS 3 seçim kalıbı ile seçim içindeki öğeleri bulmak için. Bu, sınıfları belirli öğelere veya tablodaki tek satırlar gibi karmaşık şeylere uygulamak için kullanılabilir.
sınıflar - Seçilen öğeleri veya yeni satır içi / blok öğesini uygulamak için boşlukla ayrılmış sınıf listesi.
styles - Renk vb. gibi uygulanacak CSS tyle öğelerine sahip ad / değer nesnesi.
attributes - Seçili öğelere veya yeni satır içi / blok öğesine uygulanacak niteliklere sahip ad / değer nesnesi.
exact - Kullanıldığında benzer stilleri birleştirme özelliğini devre dışı bırakır. Bu, altı çizili / üstü çizili metin dekorasyon gibi bazı CSS miras sorunları için gereklidir.
wrapper - Geçerli biçimin, blok öğeleri için bir kapsayıcı biçimi olduğunu bildiren durum. Örneğin bir div sarıcı veya blok alıntı.

Stil Düğmesi

Varsayılan olarak Stil açılır listesinin WordPress'te gizlendiğini unutmayın. İlk önce özel biçimler için düğmeyi TinyMCE menü çubuğuna, örneğin kanca ile 2. satıra ekleyin mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Özel Stiller

Ardından, bu düğmenin açılır menüsünü geliştirin. Dizideki ek değer aracılığıyla genişleme yararlı olduğu gibi, bu örnek için kodeksine bakın .

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Sonuç

resim açıklamasını buraya girin

Gelişmiş Açılır menü

Açılır menüyü, bir ağaç menüsü ile de geliştirebilirsiniz. Aşağıdaki örnek kaynaktan, var olan diziyi takip kaynağı gibi daha fazla yapı ile oluşturun.

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

resim açıklamasını buraya girin

Daha fazla olasılık ve parametre için Stil Formatı Açılır alanının varsayılan değerlerine bakın (javascript ile yazma).

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

Editöre Özel Stil Sayfası ekle

Şimdi bu biçimler için özel css'yi hook ile eklediğiniz son nokta mce_css.

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

Bu stil sayfası kurallarını da kullanıcı arabirimi stil sayfasına eklemeyi unutmayın.

Biçim Düğmesini Kaldırma

Donanım formatselectolarak, düğme dizisindeki değeri kontrol ederek açılır düğmeyi kaldırabilirsiniz . Takip kaynağını fb_mce_editor_buttonsçağanozdaki işleve ekleyin mce_buttons_2.

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

— bueltge
kaynak

Bunu kavramsal olarak anladığımı düşünüyorum: esasen WP'nin standart Biçimlendirme kutusunu kaldırıyorsunuz ve ardından stili kontrol etmek için kendi Stil açılır kutucuğunuzu ekliyorsunuz. Anlayışım doğru mu?

— Marc P

Sağ. Şu anda formatselectAçılır Menüyü değiştirmek için bir kanca bulamıyorum . Bu Açılır Menünün bir menü oluşturma işlevi yoktur, WP'nin tinymce.js içindeki statik değerlerdir.

— Ocak'ta

Ayrıca bu cevabın ipucu , şimdi buldum.

— bueltge

Ah tamam! Teşekkürler, bu şimdilik iyi bir çözüm. Ben bunu deneyeceğim!

— Marc P

Not: Varsayılan stiller $settings['style_formats_merge'] = true;»fb_mce_before_init ()« içine eklenerek biçim açılır menüsüne eklenebilir.

— Nicolai

Bu cevap başına , stilleri açılır menüde görüntülemenin anahtarıunset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

— helgatheviking
kaynak

Çok yararlı ve defaultstylesişaretçiler için teşekkürler . Birleştirme dizilerinin bu varsayılan seçenekleri geçerli JSON'a (geçerli JavaScript değil) dönüştürene kadar çalışmadığını gördüm. Aşağıda verir ekleme WordPress TinyMCE en açılır yerine yerine

Varsayılan seçenekler (JSON):

$defaults = '[{ "title": "Headers", "items": [
        { "title": "Header 1", "format": "h1" },
        { "title": "Header 2", "format": "h2" },
        { "title": "Header 3", "format": "h3" },
        { "title": "Header 4", "format": "h4" },
        { "title": "Header 5", "format": "h5" },
        { "title": "Header 6", "format": "h6" }
    ] },

    { "title": "Inline", "items": [
        { "title": "Bold", "icon": "bold", "format": "bold" },
        { "title": "Italic", "icon": "italic", "format": "italic" },
        { "title": "Underline", "icon": "underline", "format": "underline" },
        { "title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough" },
        { "title": "Superscript", "icon": "superscript", "format": "superscript" },
        { "title": "Subscript", "icon": "subscript", "format": "subscript" },
        { "title": "Code", "icon": "code", "format": "code" }
    ] },

    { "title": "Blocks", "items": [
        { "title": "Paragraph", "format": "p" },
        { "title": "Blockquote", "format": "blockquote" },
        { "title": "Div", "format": "div" },
        { "title": "Pre", "format": "pre" }
    ] },

    { "title": "Alignment", "items": [
        { "title": "Left", "icon": "alignleft", "format": "alignleft" },
        { "title": "Center", "icon": "aligncenter", "format": "aligncenter" },
        { "title": "Right", "icon": "alignright", "format": "alignright" },
        { "title": "Justify", "icon": "alignjustify", "format": "alignjustify" }
        ] }
 ]';

Function.php dosyasında daha büyük seçenekler karmasını döndürür:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}

— s6712
kaynak

Not: Varsayılan stiller $settings['style_formats_merge'] = true;»fb_mce_before_init ()« içine eklenerek biçim açılır menüsüne eklenebilir.

— Nicolai