Bagaimana menyesuaikan TinyMCE4 di WP 3.9 - cara lama untuk gaya dan format tidak berfungsi lagi

10

Sebelum WP 3.9 saya menerapkan dua filter berikut di functions.php:

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

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

sehingga dropdown format paragraf hanya menunjukkan p, h3 dan h4 sedangkan dropdown gaya kustom menunjukkan "Header gross", "Header klein" dan seterusnya. Tapi sayangnya wp dan tinymce tidak mengganggu lagi sejak wp 3.9, saya hanya melihat dropdown format paragraf standar sekarang

gugus kalimat

serta dropdown format gaya standar:

gaya

Sejauh ini saya belum menemukan dokumen tentang apakah ada kait yang berubah dengan pembaruan ke tinymce 4. Ada yang tahu? Salam Hormat Ralf

Pembaruan: Oke berdasarkan penelitian yang lebih sedikit dan komentar di bawah saya kira saya sudah menemukan jawabannya:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
ermarus
sumber
1
Pernahkah Anda melihat wordpress.stackexchange.com/questions/139163/… ?
fuxia
Tidak, saya belum melihat. Terima kasih! Namun sayangnya dengan kode yang dijelaskan di sana, hanya dimungkinkan untuk membuat tombol alih-alih membentuk kembali style dan drop down paragraf. Harus terus membaca dan meneliti.
ermarus
Berikut ini cara menyimpan item menu asli style_selectdan menambahkan menu "Kelas". wordpress.stackexchange.com/questions/143689/…
Howdy_McGee

Jawaban:

19

Jika Anda melihat di dalam class-wp-editor.phpAnda akan menemukan bahwa filter yang Anda gunakan masih ada, namun pengaturannya berbeda.

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

Saya menduga, tapi saya pikir Anda perlu mengubah kunci array yang Anda targetkan formats.

EDIT Meninggalkan ini di tempatnya, tetapi OP mengonfirmasi bahwa ini tidak melakukan apa yang dia coba.

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Ingatlah bahwa ini sama sekali belum diuji, sehingga jarak tempuh Anda mungkin berbeda-beda. (Dan jangan gunakan di situs produksi sampai Anda mengujinya).

Melanjutkan dan seterusnya

Menggali lebih dalam format tampaknya menjadi tombol tinyMCE kustom. Anda dapat melihat bahwa formatselecttombol ditambahkan ke mce_buttons_2dalam class-wp-editor.php. Dan kemudian saya melacaknya ke tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

Dengan mengingat hal itu, saya pikir target baru adalah 1. (idealnya) mengubah editor.settings.block_formatsatau 2. menghapus tombol itu dengan memfilter mce_buttons_2dan menambahkan versi kustom Anda sendiri.

Diuji dan bekerja

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

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

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

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Peringatan kecil : Saya tidak yakin di mana menambahkan gaya untuk item tarik-turun itu sendiri. Dalam sampel TinyMCE, opsi "Judul Merah" berwarna merah. Saya tidak tahu ini. Jika Anda mau, beri tahu saya.

helgatheviking
sumber
terima kasih helga! Saya telah melihat ke dalam kelas-wp-editor sebelumnya juga. Tetapi tidak yakin apa yang harus sintaks (tidak ada banyak dokumentasi terkait wp untuk tinymceapi yang diperbarui). coba saran Anda sekarang. hasil yang sama seperti dengan cuplikan awal saya. TinyMCE tidak masalah seperti apa init itu. di situs tinymce saya telah menemukan contoh untuk format khusus, hanya js, dan saya gagal mengadaptasinya ke wp dan php: tinymce.com/tryit/custom_formats.php
ermarus
1
Sangat membantu, terima kasih! Hanya ingin menambahkan bahwa block_formatsopsi tidak dapat memiliki trailing; . Saya sedang membangun nilai dari opsi yang dapat dikonfigurasi disimpan dan memiliki trailing; yang merusak daftar itu. Berharap itu menyelamatkan seseorang beberapa menit.
Adam Pope
1
@indextwo yup, saya menyelesaikannya di sini (sebaik mungkin) dan memutuskan ... hei ... posting blog! Anda tidak mendapatkan kelas pada rentang bahkan jika Anda mendefinisikannya sebagai sebaris? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?
Helgatheviking
2
Item dalam menu format mewarisi gaya dari editor-styles.css Anda, kecuali untuk gaya warna. Jika Anda menginginkan gaya warna juga, menambahkan kode ini ke fungsi mce_mod () bekerja untuk saya:unset($init['preview_styles']);
Dalton
1
@helgatheviking tentang peringatan kecil Anda: Anda dapat mengaktifkan semua gaya jika Anda mengatur $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';. Saya kira ini pada dasarnya sama dengan yang disarankan @ Dalton, meskipun dengan cara yang lebih eksplisit. Ini cukup menetapkan nilai default, sesuai dokumentasi
tmce