¿Puedo agregar un formato personalizado a la opción 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 caracteres , que también pueden contener estilos de párrafo, para hacer Es más confuso. La configuración en WordPress por defecto solo muestra el menú desplegable format . Si aplica una hoja de estilo personalizada al editor, TinyMCE puede usarla para seleccionar los nombres de clase y agregarlos al menú desplegable style , pero esto no me funcionó siempre.

Desde la versión 3.0 puede llamar a add_editor_style() en su functions.php para agregar una hoja de estilo al editor. Por defecto está editor-style.css en su directorio de temas. Antes de la versión 3.0, debe conectarse al filtro mce_css para agregar la URL a la hoja de estilo de su editor. Esto terminará en el valor de configuración content_css TinyMCE .

Para agregar el menú desplegable style , la opción styleselect debe aparecer en uno de los arreglos 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 está controlada por la opción theme_advanced_blockformats de TinyMCE , que puede agregar a la matriz de control en el filtro tiny_mce_before_init . Si desea personalizar los nombres del menú desplegable style (no solo los nombres de clase de CSS), consulte la opción theme_advanced_styles . También puede usar la opción más avanzada style_formats que le da más flexibilidad para definir los estilos. .

El código PHP relevante con todos los ganchos y la configuración predeterminada está en wp-admin/includes/post.php , en la función wp_tiny_mce() . Todos juntos, 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í menú desplegable del formato TinyMCE no mostrar más vistas previas de estilo

Kara lo entendió bien, necesitas borrar los estilos predeterminados para ver los nuevos estilos ...

unset($init['preview_styles']);

return $settings;