¿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
Mild Fuzz
Sigo sin conseguir averiguar cómo añadir clases al menú desplegable de formato aparte de las predeterminadas.
Mild Fuzz
@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
¡Eres una leyenda!! No estoy seguro de qué hace 'style_formats', ¡pero 'theme_advanced_styles' hace exactamente lo que necesito!!
Mild Fuzz
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: Los parámetros de los diferentes elementos style_formats se explican en la página wiki relacionada formats.
Jan Fabry
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: 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
¿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
json_encode genera " y no ' por lo que el javascript falla. Necesitas hacer str_replace('"', "'", json_encode($style_formats))
cherouvim
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;