TinyMCE: agregar CSS al menú desplegable de formato

Agregué con éxito una hoja de estilo TinyMCE usando add_editor_style () para poder obtener una vista previa de los estilos en el cuerpo del editor TinyMCE.

Sin embargo, ¿estoy en lo cierto al suponer que la función add_editor_style () solo puede acceder al estilo para el cuerpo del editor?

Si es así, ¿hay otro método o función que pueda usar para acceder al estilo del menú desplegable Formato TinyMCE?

No puede mejorar la lista desplegable formatselect. Pero puede mejorar con el gancho tiny_mce_before_initel segundo menú desplegable styleselect, hay ocultar en una instalación predeterminada de WordPress. La documentación enumera todos los valores predeterminados y posibilidades.

• inline: nombre del elemento en línea para producir, por ejemplo, "span". La selección de texto actual se envolverá en este elemento en línea.
• block: nombre del elemento de bloque que se producirá, por ejemplo, "h1". Los elementos de bloque existentes dentro de la selección se reemplazan con el nuevo elemento de bloque.
• selector - Patrón selector CSS 3 para buscar elementos dentro de la selección por. Esto se puede usar para aplicar clases a elementos específicos o cosas complejas como filas impares en una tabla.
• clases: lista de clases separadas por espacios para aplicar los elementos seleccionados o el nuevo elemento en línea / bloque.
• estilos: objeto de nombre / valor con elementos de tyle CSS para aplicar, como color, etc.
• atributos: objeto de nombre / valor con atributos para aplicar a los elementos seleccionados o al nuevo elemento en línea / bloque.
• exacto: deshabilita la función de combinación de estilos similares cuando se usa. Esto es necesario para algunos problemas de herencia CSS, como la decoración de texto para subrayar / tachar.
• wrapper: estado que indica que el formato actual es un formato contenedor para elementos de bloque. Por ejemplo, un contenedor div o blockquote.

El botón de estilo

Tenga en cuenta que, de forma predeterminada, el menú desplegable Estilo está oculto en WordPress. Al principio agregue el botón para formatos personalizados a una barra de menú de TinyMCE, por ejemplo, la línea 2 con gancho mce_buttons_2.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Los estilos personalizados

Luego, mejore el menú desplegable de este botón. También útil el aumento mediante valor adicional en la matriz, consulte el códice para este ejemplo.

/**
 * Add styles/classes to the "Styles" drop-down
 */ 
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
        ),
        array(
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Resultado

Menú desplegable mejorado

También puede mejorar el menú desplegable con un menú de árbol. Cree la var a partir de la fuente de ejemplo anterior con más estructura en la matriz, como la fuente siguiente.

    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

Para obtener más posibilidades y parámetros, consulte los valores predeterminados del campo desplegable Formato de estilo (escribir en javascript).

var defaultStyleFormats = [
    {title: 'Headers', items: [
        {title: 'Header 1', format: 'h1'},
        {title: 'Header 2', format: 'h2'},
        {title: 'Header 3', format: 'h3'},
        {title: 'Header 4', format: 'h4'},
        {title: 'Header 5', format: 'h5'},
        {title: 'Header 6', format: 'h6'}
    ]},

    {title: 'Inline', items: [
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
    ]},

    {title: 'Blocks', items: [
        {title: 'Paragraph', format: 'p'},
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
    ]},

    {title: 'Alignment', items: [
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
];

Agregar hoja de estilo personalizada al editor

Ahora es el último punto, que incluye el CSS personalizado para estos formatos, a través de gancho mce_css.

/**
 * Apply styles to the visual editor
 */  
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_mcekit_editor_style($url) {

    if ( ! empty( $url ) )
        $url .= ',';

    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

    return $url;
}

No olvide agregar estas reglas de hoja de estilo también a la hoja de estilo frontal.

Eliminar el botón de formato

Como mejora, puede eliminar el formatselectbotón desplegable mediante la verificación del valor en la matriz de botones. Agregue la fuente de seguimiento a la función fb_mce_editor_buttonsen el gancho mce_buttons_2.

$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
    foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
    }
}

Según esta respuesta , la clave para que los estilos aparezcan en el menú desplegable esunset($settings['preview_styles']);

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    // customize as desired

    // unset the preview styles
    unset($settings['preview_styles']);`

    return $settings;
}

Muy útil y gracias por los defaultstylesconsejos. Descubrí que fusionar matrices no funcionaba hasta convertir esas opciones predeterminadas en JSON válido (JavaScript no válido). A continuación permite anexar desplegable del tinymce WordPress en lugar de reemplazar

Opciones predeterminadas (JSON):

$defaults = '[{ "title": "Headers", "items": [
        { "title": "Header 1", "format": "h1" },
        { "title": "Header 2", "format": "h2" },
        { "title": "Header 3", "format": "h3" },
        { "title": "Header 4", "format": "h4" },
        { "title": "Header 5", "format": "h5" },
        { "title": "Header 6", "format": "h6" }
    ] },

    { "title": "Inline", "items": [
        { "title": "Bold", "icon": "bold", "format": "bold" },
        { "title": "Italic", "icon": "italic", "format": "italic" },
        { "title": "Underline", "icon": "underline", "format": "underline" },
        { "title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough" },
        { "title": "Superscript", "icon": "superscript", "format": "superscript" },
        { "title": "Subscript", "icon": "subscript", "format": "subscript" },
        { "title": "Code", "icon": "code", "format": "code" }
    ] },

    { "title": "Blocks", "items": [
        { "title": "Paragraph", "format": "p" },
        { "title": "Blockquote", "format": "blockquote" },
        { "title": "Div", "format": "div" },
        { "title": "Pre", "format": "pre" }
    ] },

    { "title": "Alignment", "items": [
        { "title": "Left", "icon": "alignleft", "format": "alignleft" },
        { "title": "Center", "icon": "aligncenter", "format": "aligncenter" },
        { "title": "Right", "icon": "alignright", "format": "alignright" },
        { "title": "Justify", "icon": "alignjustify", "format": "alignjustify" }
        ] }
 ]'; 

En functions.php devuelve el hash de opciones más grandes:

add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {

    $style_formats = array(
    //....

    $settings['style_formats'] = json_encode( array_merge( json_decode($defaults), $style_formats ) );
    return $settings;
}