¿Puedo agregar un formato personalizado a las opciones de formato en el panel de texto?
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;
}

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

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

@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.

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

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: Los parámetros de los diferentes elementos style_formats
se explican en la página wiki relacionada formats
.

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: 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.

¿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 }

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

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

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;
