TinyMCE: menambahkan CSS ke format dropdown

Saya berhasil menambahkan stylesheet TinyMCE menggunakan add_editor_style () sehingga saya dapat melihat pratinjau gaya dalam tubuh editor TinyMCE.

Namun, apakah saya benar dengan asumsi bahwa fungsi add_editor_style () hanya dapat mengakses gaya untuk badan editor?

Jika demikian, apakah ada metode atau fungsi lain yang dapat saya gunakan untuk mengakses styling dari dropdown Format TinyMCE juga?

masukkan deskripsi gambar di sini

css tinymce

— Marc P
sumber

Anda tidak dapat meningkatkan daftar drop-down formatselect. Tetapi Anda dapat meningkatkan dengan kait tiny_mce_before_initdrop down kedua styleselect, ada menyembunyikan di instalasi WordPress default. The dokumentasi daftar semua default dan kemungkinan.

inline - Nama elemen inline yang akan diproduksi misalnya "span". Pilihan teks saat ini akan dibungkus dalam elemen inline ini.
block - Nama elemen blok yang akan diproduksi misalnya “h1 ″. Elemen blok yang ada dalam seleksi akan diganti dengan elemen blok baru.
pemilih - pola pemilih CSS 3 untuk menemukan elemen dalam pemilihan oleh. Ini dapat digunakan untuk menerapkan kelas ke elemen tertentu atau hal-hal kompleks seperti baris ganjil dalam tabel.
class - Daftar kelas yang dipisahkan spasi untuk menerapkan elemen yang dipilih atau elemen inline / blok yang baru.
styles - Nama / objek nilai dengan item tyle CSS untuk diterapkan seperti warna dll.
atribut - Nama / objek nilai dengan atribut untuk diterapkan ke elemen yang dipilih atau elemen inline / blok baru.
exact - Menonaktifkan fitur gabung serupa gaya saat digunakan. Ini diperlukan untuk beberapa masalah pewarisan CSS seperti dekorasi teks untuk garis bawah / coret.
wrapper - Menyatakan bahwa format saat ini adalah format wadah untuk elemen blok. Misalnya pembungkus div atau blockquote.

Tombol Gaya

Perhatikan bahwa, secara default, dropdown Style disembunyikan di WordPress. Mula-mula tambahkan tombol untuk format khusus ke bilah menu TinyMCE, misalnya baris 2 dengan kait mce_buttons_2.

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

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

Gaya Kustom

Kemudian tingkatkan drop down tombol ini. Selain bermanfaat peningkatan melalui nilai tambahan dalam array, lihat kodeks untuk contoh ini.

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

}

Hasil

masukkan deskripsi gambar di sini

Menu Drop down yang disempurnakan

Anda juga dapat meningkatkan drop down dengan menu pohon. Buat var dari contoh sumber di atas dengan lebih banyak struktur dalam array, seperti ikuti sumber.

    $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'
        )
    );

masukkan deskripsi gambar di sini

Untuk lebih banyak kemungkinan dan parameter, lihat nilai default bidang Format Format turun bawah (tulis dalam javascript).

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'}
    ]}
];

Tambahkan Custom Stylesheet ke editor

Sekarang adalah poin terakhir, bahwa Anda memasukkan custom css untuk format ini, melalui hook 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;
}

Jangan lupa untuk menambahkan aturan stylesheet ini juga ke stylesheet ujung depan.

Hapus Tombol Format

Sebagai perangkat tambahan, Anda dapat menghapus tombol formatselectdrop down melalui cek untuk nilai dalam array tombol. Tambahkan sumber ikuti ke fungsi fb_mce_editor_buttonsdi hook mce_buttons_2.

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

— bueltge
sumber

Saya rasa saya memahami ini secara konseptual: pada dasarnya Anda menghapus kotak Format standar WP, dan kemudian menambahkan dropdown Style Anda sendiri untuk mengontrol styling. Apakah pemahaman saya benar?

— Marc P

Kanan. Saat ini saya tidak dapat menemukan kait untuk mengubah formatselectDropdown. Dropdown ini tidak memiliki fungsi untuk membangun menu, adalah nilai statis di tinymce.js dari WP.

— bueltge

Juga petunjuk untuk jawaban ini , ada yang saya temukan sekarang.

— bueltge

Ah baiklah! Terima kasih, ini solusi yang bagus untuk saat ini. Saya akan mencobanya!

— Marc P

Catatan: Gaya default dapat ditambahkan ke dropdown format dengan menambahkan $settings['style_formats_merge'] = true;ke »fb_mce_before_init ()«.

— Nicolai

Per jawaban ini , kunci untuk mendapatkan gaya muncul di dropdown adalah untukunset($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
sumber

Sangat membantu dan terima kasih atas defaultstylespetunjuk. Saya menemukan bahwa menggabungkan array tidak berfungsi sampai mengubah opsi-opsi default itu menjadi JSON yang valid (bukan JavaScript yang valid). Di bawah ini memungkinkan menambahkan drop-down WordPress tinymce alih-alih diganti

Opsi default (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" }
        ] }
 ]';

Dalam functions.php mengembalikan hash opsi yang lebih besar:

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
sumber

Catatan: Gaya default dapat ditambahkan ke dropdown format dengan menambahkan $settings['style_formats_merge'] = true;ke »fb_mce_before_init ()«.

— Nicolai