Como personalizar o TinyMCE4 no WP 3.9 - o jeito antigo de estilos e formatos não funciona mais

10

Antes do WP 3.9 eu tinha os seguintes dois filtros aplicados no 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');

para que o menu suspenso de formatos de parágrafo mostre apenas p, h3 e h4, enquanto o menu suspenso de estilos personalizados mostra "Header gross", "Header klein" e assim por diante. Mas infelizmente o wp e o tinymce não se importam mais desde o wp 3.9, eu só vejo o dropdown de formatos de parágrafo padrão agora

,bemcomoomenususpenso"Formato de estilos padrão":

Atéagoraeunãoencontreinenhumdocumentosobresealgumhooksmudoucomaatualizaçãodotinymce4.Alguémsabe?AtenciosamenteRalf

Atualização:Ok,combaseemumpoucomaisdepesquisaeoscomentáriosabaixoeuachoqueeudescobriascoisas:

//Creatingthestyleselectorstayedthesamefunctionmy_mce_buttons($buttons){array_unshift($buttons,'styleselect');return$buttons;}add_filter('mce_buttons','my_mce_buttons');functionmce_mod($init){//theme_advanced_blockformatsseemsdeprecated-insteadthehookfromHelgaspostdidthetrick$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');
    
por rpk 17.04.2014 / 11:14

1 resposta

19

Se você olhar em class-wp-editor.php , verá que o filtro que você está usando ainda está lá, mas as configurações são diferentes.

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 ),
                );

Eu estou supondo, mas acho que você precisa alterar a chave do array que você está direcionando para formats .

EDIT Deixando isto no lugar, mas o OP confirma que isso não faz o que ele está tentando.

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

Tenha em mente que isso é totalmente não testado, por isso sua milhagem pode variar. (E não use em um site de produção até que você tenha testado).

Continuando em diante

Indo mais fundo, os formatos parecem ser um botão tinyMCE personalizado. Você pode ver que o botão formatselect é adicionado a mce_buttons_2 no class-wp-editor.php . E então eu rastreei isso para 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'
        );

Com isso em mente, acho que o novo alvo seria 1. (idealmente) alterar o editor.settings.block_formats ou 2. remover esse botão, filtrando mce_buttons_2 e adicionando sua própria versão personalizada.

Testado e funcionando

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

Pequenas ressalvas : não sei onde adicionar os estilos dos próprios itens suspensos. No exemplo TinyMCE, a opção "Red Headline" é vermelha. Eu não consegui descobrir isso. Se você por favor me avise.

    
por helgatheviking 17.04.2014 / 11:35

Tags