dapatkah saya menambahkan format khusus ke opsi format pada panel teks?

16

Di editor teks, di mana Anda dapat mengatur judul dan pengaturan lainnya, apakah mungkin untuk menambahkan gaya Anda sendiri untuk digunakan klien? dan bahkan menghapus yang tidak perlu?

Fuzz ringan
sumber
2
WP3 dan TinyMCE sangat kacau dalam aspek ini. Saya tidak percaya bahwa tidak mungkin untuk dengan mudah menambahkan atau menyesuaikan format sialan seperti di CKEditor.
cherouvim
1
Saya setuju, itu sangat menyakitkan.
Mild Fuzz

Jawaban:

17

Editor TinyMCE "klasik" memiliki dua dropdown: formatselectuntuk gaya paragraf dan styleselectuntuk gaya karakter - yang juga dapat berisi gaya paragraf, untuk membuatnya lebih membingungkan. Konfigurasi di WordPress secara default hanya menunjukkan dropdown format . Jika Anda menerapkan lembar gaya khusus ke editor, TinyMCE dapat menggunakannya untuk mengambil nama kelas dan menambahkannya ke dropdown gaya - tetapi ini tidak berhasil setiap saat untuk saya.

Sejak 3.0 Anda dapat memanggil add_editor_style()Anda functions.phpuntuk menambahkan stylesheet ke editor. Secara default ada editor-style.cssdi direktori tema Anda. Sebelum 3.0 Anda harus menghubungkan ke mce_cssfilter untuk menambahkan URL ke stylesheet editor Anda. Ini akan berakhir pada nilai content_csskonfigurasi TinyMCE .

Untuk menambahkan dropdown gaya , styleselectopsi harus muncul di salah satu larik konfigurasi bilah tombol ( theme_advanced_buttons[1-4]di TinyMCE, difilter oleh mce_buttons_[1-4]di WordPress). Daftar format blok dikendalikan oleh para theme_advanced_blockformatspilihan TinyMCE , yang dapat Anda tambahkan ke array kontrol dalam tiny_mce_before_initfilter. Jika Anda ingin menyesuaikan nama-nama gaya dropdown (bukan hanya Anda nama kelas CSS), melihat itu theme_advanced_stylespilihan . Anda juga dapat menggunakan style_formatsopsi yang lebih canggih yang memberi Anda lebih banyak fleksibilitas untuk menentukan gaya.

Kode PHP yang relevan dengan semua pengait dan konfigurasi default wp-admin/includes/post.phpdalam fungsiwp_tiny_mce() . Secara keseluruhan, pengaturan Anda dapat terlihat seperti ini:

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}
Jan Fabry
sumber
apakah ada format khusus .css yang harus diambil menggunakan add_editor_style? sepertinya tidak ada yang terjadi
Mild Fuzz
1
@ Fuzz Fuzz: Jawaban saya sebelumnya menyesatkan karena WordPress hanya menunjukkan satu dari dua dropdown yang diperlukan. Saya memperbarui jawaban saya dengan cara menambahkan dropdown kedua dan bagaimana cara mengendalikannya.
Jan Fabry
1
@Mild Fuzz: Parameter ke style_formatsitem yang berbeda dijelaskan di formatshalaman wiki terkait .
Jan Fabry
1
tidak lagi menghasilkan kesalahan, tetapi tidak berpengaruh!
Mild Fuzz
1
json_encode menghasilkan "dan tidak 'sehingga istirahat javascript Anda perlu melakukan str_replace ('" ' "'", json_encode ($ style_formats))
cherouvim
0

Sesuai di sini dropdown format TinyMCE tidak lagi menampilkan pratinjau gaya

Kara sudah melakukannya dengan benar, Anda harus membatalkan pengaturan gaya default untuk melihat gaya baru ...

unset($init['preview_styles']);

return $settings;
pengguna2136473
sumber
Silakan tambahkan beberapa detail, mis. Tidak jelas apa yang $settingsada di sini. Terima kasih
birgire