¿Puedo agregar un formato personalizado a la opción de formato en el panel de texto?

En el editor de texto, donde puede establecer encabezados y otras configuraciones, ¿es posible agregar sus propios estilos para que los clientes los usen? e incluso eliminar los innecesarios?

El editor "clásico" de TinyMCE tiene dos menús desplegables: formatselectpara estilos de párrafo y styleselectpara estilos de caracteres , que también pueden contener estilos de párrafo, para hacerlo más confuso. La configuración en WordPress por defecto solo muestra el menú desplegable de formato . Si aplica una hoja de estilo personalizada al editor, TinyMCE puede usarla para recoger los nombres de clase y agregarlos al menú desplegable de estilos , pero esto no funcionó todo el tiempo para mí.

Desde 3.0 se puede llamar add_editor_style()en su functions.phpañadir una hoja de estilos para el editor. Por defecto está editor-style.cssen su directorio de temas. Antes de 3.0, debe conectar el mce_cssfiltro para agregar la URL a la hoja de estilo de su editor. Esto terminará en el content_cssvalor de configuración de TinyMCE .

Para agregar el menú desplegable de estilo , la styleselectopción debe aparecer en una de las matrices de configuración de la barra de botones ( theme_advanced_buttons[1-4]en TinyMCE, filtrada por mce_buttons_[1-4]en WordPress). La lista de formatos de bloque está controlada por la theme_advanced_blockformatsopción de TinyMCE , que puede agregar a la matriz de control en el tiny_mce_before_initfiltro. Si desea personalizar los nombres del menú desplegable de estilos (no solo sus nombres de clase CSS), mire la theme_advanced_stylesopción . También puede usar la style_formatsopción más avanzada que le brinda más flexibilidad para definir los estilos.

El código PHP relevante con todos los ganchos y la configuración predeterminada está wp-admin/includes/post.phpen funciónwp_tiny_mce() . En conjunto, su 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';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $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'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

Según aquí , el menú desplegable de formato TinyMCE ya no muestra vistas previas de estilo

Kara tenía razón, necesita desarmar los estilos predeterminados para ver los nuevos estilos ...

unset($init['preview_styles']);

return $settings;