Cómo personalizar TinyMCE4 en WP 3.9: la forma antigua de estilos y formatos ya no funciona

10

Antes de WP 3.9 tenía los siguientes dos filtros aplicados en 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 el menú desplegable de formatos de párrafo solo muestre p, h3 y h4, mientras que el menú desplegable de estilos personalizados muestra "Encabezado bruto", "Encabezado klein", etc. Pero desafortunadamente wp y tinymce ya no molestan desde wp 3.9, solo veo el menú desplegable de formatos de párrafo estándar ahora

párrafo

así como el menú desplegable de formato de estilos estándar:

estilos

Hasta ahora no he encontrado ningún documento sobre si algún gancho ha cambiado con la actualización a tinymce 4. ¿Alguien sabe? Saludos cordiales Ralf

Actualización: Ok, basado en un poco más de investigación y los comentarios a continuación, supongo que he resuelto las cosas:

//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
fuente
No, no lo he visto. ¡Gracias! Pero desafortunadamente con el código descrito allí, solo es posible crear un botón en lugar de cambiar el estilo y los menús desplegables. Hay que seguir leyendo e investigando.
ermarus
Aquí le mostramos cómo puede mantener los elementos del menú original style_selecty agregarle un menú de "Clases". wordpress.stackexchange.com/questions/143689/…
Howdy_McGee

Respuestas:

19

Si observa class-wp-editor.php, encontrará que el filtro que está utilizando todavía está allí, sin embargo, la configuración es diferente.

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

Supongo, pero creo que debe cambiar la clave de matriz a la que apunta formats.

EDITAR Dejando esto en su lugar, pero el OP confirma que esto no hace lo que está intentando.

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

Tenga en cuenta que esto no se ha probado por completo, por lo que su kilometraje puede variar. (Y no lo use en un sitio de producción hasta que lo haya probado).

Continuando hacia adelante

Profundizar en los formatos parece ser un botón personalizado de tinyMCE. Puede ver que formatselectse agrega el botón mce_buttons_2en class-wp-editor.php. Y luego lo rastreé hasta 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'
        );

Con eso en mente, creo que el nuevo objetivo sería 1. (idealmente) cambiar editor.settings.block_formatso 2. eliminar ese botón filtrando mce_buttons_2y agregando su propia versión personalizada.

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

Pequeña advertencia : no estoy seguro de dónde agregar los estilos para los elementos desplegables. En la muestra TinyMCE, la opción "Titular rojo" es roja. No pude resolver esto. Si lo haces, por favor, házmelo saber.

helgatheviking
fuente
gracias helga! También he examinado el editor de clase wp antes. Pero no estaba seguro de cuál debía ser la sintaxis (no hay mucha documentación relacionada con wp para el tinymceapi actualizado). Probé tu sugerencia ahora. Los mismos resultados que con mis fragmentos iniciales. A TinyMCE no le importa cómo se ve el init. En el sitio de tinymce he encontrado un ejemplo para formatos personalizados, solo js, ​​y no pude
ermarus
1
Gran ayuda, gracias! Solo quería agregar que la block_formatsopción no puede tener un final; . Estaba construyendo el valor de las opciones configurables guardadas y tenía un seguimiento; eso borró la lista. Espero que ahorre a alguien unos minutos.
Adam Pope,
1
@indextwo sí, lo resolví aquí (lo mejor que pude) y decidí ... hey ... ¡publicación de blog! ¿No obtiene la clase en un lapso incluso si la define como en línea? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?
helgatheviking
2
Los elementos en el menú de formato heredan los estilos de su editor-styles.css, excepto los estilos de color. Si desea los estilos de color también, agregar este código a la función mce_mod () funcionó para mí:unset($init['preview_styles']);
Dalton
1
@helgatheviking con respecto a su pequeña advertencia : puede habilitar todos los estilos si configura $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';. Supongo que esto es esencialmente lo mismo que @Dalton sugirió, aunque de una manera más explícita. Esto simplemente establece los valores predeterminados, según la documentación de
tmce