TinyMCE: ajout de CSS à la liste déroulante des formats

J'ai ajouté avec succès une feuille de style TinyMCE en utilisant add_editor_style () afin de pouvoir prévisualiser les styles dans le corps de l'éditeur TinyMCE.

Cependant, ai-je raison de supposer que la fonction add_editor_style () ne peut accéder au style que pour le corps de l'éditeur?

Si oui, existe-t-il une autre méthode ou fonction que je peux utiliser pour accéder au style de la liste déroulante Format TinyMCE également?

Vous ne pouvez pas améliorer la liste déroulante formatselect. Mais vous pouvez améliorer avec le crochet tiny_mce_before_initle deuxième menu déroulant styleselect, il y a cacher dans une installation WordPress par défaut. La documentation répertorie tous les paramètres par défaut et toutes les possibilités.

• inline - Nom de l'élément inline à produire par exemple «span». La sélection de texte actuelle sera encapsulée dans cet élément en ligne.
• block - Nom de l'élément de bloc à produire par exemple "h1". Les éléments de bloc existants dans la sélection sont remplacés par le nouvel élément de bloc.
• selector - modèle de sélecteur CSS 3 pour rechercher des éléments dans la sélection par. Cela peut être utilisé pour appliquer des classes à des éléments spécifiques ou à des choses complexes comme des lignes impaires dans une table.
• classes - Liste de classes séparées par des espaces pour appliquer les éléments sélectionnés ou le nouvel élément inline / block.
• styles - Nom / objet de valeur avec des éléments de style CSS à appliquer tels que la couleur, etc.
• attributs - Nom / objet de valeur avec des attributs à appliquer aux éléments sélectionnés ou au nouvel élément en ligne / bloc.
• exact - Désactive la fonction de fusion de styles similaires lorsqu'elle est utilisée. Ceci est nécessaire pour certains problèmes d'héritage CSS tels que la décoration de texte pour souligner / barrer.
• wrapper - État qui indique que le format actuel est un format de conteneur pour les éléments de bloc. Par exemple, un wrapper div ou un blockquote.

Le bouton Style

Notez que, par défaut, la liste déroulante Style est masquée dans WordPress. Ajoutez d'abord le bouton pour les formats personnalisés à une barre de menu de TinyMCE, dans l'exemple de la ligne 2 avec crochet mce_buttons_2.

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

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

Les styles personnalisés

Améliorez ensuite la liste déroulante de ce bouton. Également utile l'amélioration via une valeur supplémentaire dans le tableau, voir le codex pour cet exemple.

/**
 * 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;

}

Résultat

Menu déroulant amélioré

Vous pouvez également améliorer la liste déroulante avec un menu arborescent. Créez la var à partir de l'exemple de source ci-dessus avec plus de structure dans le tableau, comme la source suivante.

    $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'
        )
    );

Pour plus de possibilités et de paramètres, voir les valeurs par défaut du champ déroulant Format de style (écrire 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'}
    ]}
];

Ajouter une feuille de style personnalisée à l'éditeur

Maintenant, c'est le dernier point, que vous incluez le CSS personnalisé pour ces formats, via le crochet 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;
}

N'oubliez pas d'ajouter également ces règles de feuille de style à la feuille de style front-end.

Supprimer le bouton Format

Comme amélioration, vous pouvez supprimer le formatselectbouton déroulant via la vérification de la valeur dans le tableau de boutons. Ajoutez la source de suivi à la fonction fb_mce_editor_buttonsau niveau du crochet mce_buttons_2.

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

Selon cette réponse , la clé pour faire apparaître les styles dans la liste déroulante est deunset($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;
}

Très utile et merci pour les defaultstylespointeurs. J'ai trouvé que la fusion des tableaux ne fonctionnait pas jusqu'à la conversion de ces options par défaut en JSON valide (pas JavaScript valide). Ci-dessous permet d' ajouter la liste déroulante de WordPress au lieu de remplacer

Options par défaut (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" }
        ] }
 ]'; 

Dans functions.php retourne le hachage des options les plus 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;
}