¿Puedo agregar un formato personalizado a las opciones de formato en el panel de texto?

10 nov 2010, 16:42:59
Vistas: 20.6K
Votos: 18

En el editor de texto, donde puedes establecer encabezados y otras configuraciones, ¿es posible agregar tus propios estilos para que los clientes los usen? ¿y también eliminar los innecesarios?

2
Comentarios

WP3 y TinyMCE están tan desordenados en este aspecto. No puedo creer que no sea posible agregar o personalizar fácilmente los malditos formatos como se hace en CKEditor.

cherouvim cherouvim
10 dic 2010 22:43:09

Estoy de acuerdo, es un verdadero dolor de cabeza.

Mild Fuzz Mild Fuzz
11 dic 2010 20:36:36
Todas las respuestas a la pregunta 3
13
20

El editor "clásico" de TinyMCE tiene dos menús desplegables: formatselect para estilos de párrafo y styleselect para estilos de carácter - que también pueden contener estilos de párrafo, lo que puede resultar confuso. Por defecto, WordPress solo muestra el menú desplegable de formato. Si aplicas una hoja de estilos personalizada al editor, TinyMCE puede usarla para recoger los nombres de clase y añadirlos al menú desplegable de estilo - pero esto no siempre ha funcionado para mí.

Desde la versión 3.0 puedes llamar a add_editor_style() en tu functions.php para añadir una hoja de estilos al editor. Por defecto busca editor-style.css en el directorio de tu tema. Antes de la versión 3.0 debías usar el filtro mce_css para añadir la URL de tu hoja de estilos del editor. Esto terminará en el valor de configuración content_css de TinyMCE.

Para añadir el menú desplegable de estilo, la opción styleselect debe aparecer en uno de los arrays de configuración de la barra de botones (theme_advanced_buttons[1-4] en TinyMCE, filtrado por mce_buttons_[1-4] en WordPress). La lista de formatos de bloque se controla mediante la opción theme_advanced_blockformats de TinyMCE, que puedes añadir al array de control en el filtro tiny_mce_before_init. Si quieres personalizar los nombres del menú desplegable de estilo (no solo los nombres de tus clases CSS), mira la opción theme_advanced_styles. También puedes usar la opción más avanzada style_formats que te da más flexibilidad para definir los estilos.

El código PHP relevante con todos los hooks y la configuración por defecto está en wp-admin/includes/post.php, en la función wp_tiny_mce(). En conjunto, tu configuración podría verse así:

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

    // Desde http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Texto en negrita', 'inline' => 'b'),
        array('title' => 'Texto rojo', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Encabezado rojo', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Ejemplo 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Ejemplo 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Estilos de tabla'),
        array('title' => 'Fila de tabla 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Antes de la versión 3.1 necesitabas un truco especial para enviar este array a la configuración.
    // Consulta el historial de este post para versiones anteriores.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}
10 nov 2010 16:59:18
Comentarios

¿Existe un formato especial que deba tener el archivo .css al usar add_editor_style? Parece que no ocurre nada

Mild Fuzz Mild Fuzz
10 nov 2010 17:25:31

Sigo sin conseguir averiguar cómo añadir clases al menú desplegable de formato aparte de las predeterminadas.

Mild Fuzz Mild Fuzz
11 nov 2010 14:52:07

@Mild Fuzz: Mi respuesta anterior era engañosa porque WordPress solo muestra uno de los dos menús desplegables necesarios. Actualicé mi respuesta con una forma de añadir el segundo menú y cómo controlarlo.

Jan Fabry Jan Fabry
11 nov 2010 15:39:58

¡Eres una leyenda!! No estoy seguro de qué hace 'style_formats', ¡pero 'theme_advanced_styles' hace exactamente lo que necesito!!

Mild Fuzz Mild Fuzz
11 nov 2010 15:47:15

Realmente estoy intentando que ese segundo bloque tenga efecto, ya que parece que sería tremendamente útil. El problema es que $settings['style_formats'] es nulo antes de configurarlo, así que no puedo comparar formatos con nada.

Mild Fuzz Mild Fuzz
11 nov 2010 16:35:46

@Mild Fuzz: Los parámetros de los diferentes elementos style_formats se explican en la página wiki relacionada formats.

Jan Fabry Jan Fabry
11 nov 2010 16:46:02

que muestra todo en JS, un poco confundido sobre cómo convertir eso a PHP que funcione. Intenté '$settings['style_formats'] .= "custom_format : {block : 'h1', attributes : {title : \"Header\"}, styles : {color : red}}";' pero mata tinyMCE completamente

Mild Fuzz Mild Fuzz
11 nov 2010 16:55:01

@Mild Fuzz: Pensé que WordPress aplicaría json_encode() a la configuración, pero simplemente la imprime. Modifiqué mi respuesta para incluir algo de "inyección JS" para pasar una configuración de array a TinyMCE. No garantizado que funcione.

Jan Fabry Jan Fabry
11 nov 2010 17:32:31

ya no produce errores, ¡pero no tiene ningún efecto!

Mild Fuzz Mild Fuzz
12 nov 2010 12:23:11

¿Funciona el código de ejemplo y resolvió tu pregunta? Ten en cuenta que tienes un error tipográfico al final de la línea "Table styles", necesita un ) y no un }

cherouvim cherouvim
10 dic 2010 22:41:57

json_encode genera " y no ' por lo que el javascript falla. Necesitas hacer str_replace('"', "'", json_encode($style_formats))

cherouvim cherouvim
10 dic 2010 23:00:01

¿Cómo renombras el botón desplegable de Formats?

ejntaylor ejntaylor
17 ago 2016 16:18:03

@raison: Es mejor preguntar eso en una pregunta aparte.

Jan Fabry Jan Fabry
17 ago 2016 16:25:57
Mostrar los 8 comentarios restantes
0

Puedes agregar formatos personalizados o eliminar existentes de esta manera:

add_filter('tiny_mce_before_init', function($init_array) {
    $init_array['formats'] = json_encode([
        // agregar nuevo formato a formatos
        'h3marked' => [
            'selector' => 'h3',
            'block'    => 'h3',
            'classes'  => 'article-paragraph',
        ],
    ], JSON_THROW_ON_ERROR);

    // eliminar de este array los formatos no necesarios
    $block_formats = [
        'Párrafo=p',
        'Encabezado 1=h1',
        'Encabezado 2=h2', 
        'Encabezado 3=h3',
        'Encabezado 3 marcado=h3marked',    // usar el nuevo formato en el selector
        'Encabezado 4=h4',
        'Encabezado 5=h5',
        'Encabezado 6=h6',
        'Preformateado=pre',
    ];
    $init_array['block_formats'] = implode(';', $block_formats);

    return $init_array;
});

Ver más en este artículo y en la documentación de tinymce

1 abr 2021 13:35:18
1

Como se menciona aquí El menú desplegable de formatos de TinyMCE ya no muestra las vistas previas de estilos

Kara tenía razón, necesitas eliminar los estilos predeterminados para ver los nuevos estilos...

unset($init['preview_styles']);

return $settings;
25 feb 2016 23:36:54
Comentarios

Por favor, añade más detalles, por ejemplo, no está claro qué es $settings aquí. Gracias

birgire birgire
25 feb 2016 23:50:43