web-dev-qa-db-fra.com

TinyMCE: ajout de CSS au menu déroulant de format

J'ai correctement ajouté une feuille de style TinyMCE à l'aide de 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 tel est le cas, existe-t-il une autre méthode ou fonction que je peux utiliser pour accéder également au style de la liste déroulante Format TinyMCE?

enter image description here

csstinymce
20
Marc P

Vous ne pouvez pas améliorer la liste déroulante formatselect. Mais vous pouvez améliorer avec le hook tiny_mce_before_init la deuxième liste déroulante styleselect, il y a masquer dans une installation WordPress par défaut. La documentation liste tous les défauts et les possibilités.

  • inline - Nom de l'élément en ligne à 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 permettant de rechercher des éléments dans la sélection. Cela peut être utilisé pour appliquer des classes à des éléments spécifiques ou à des choses complexes telles que 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 - Objet Nom/Valeur avec les éléments de style CSS à appliquer, tels que la couleur, etc.
  • attributs - Objet Nom/Valeur avec attributs à appliquer aux éléments sélectionnés ou au nouvel élément inline/block.
  • exact - Désactive la fonctionnalité de fusion des 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 soulignement/strikethough.
  • wrapper - Etat indiquant que le format actuel est un format de conteneur pour les éléments de bloc. Par exemple, un wrapper div ou blockquote.

Le bouton de style

Notez que, par défaut, la liste déroulante Style est masquée dans WordPress. Tout d’abord, ajoutez le bouton pour les formats personnalisés à une barre de menus de TinyMCE, dans l’exemple de ligne 2 avec hook 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

Ensuite, améliorez la liste déroulante de ce bouton. Également utile l’envoi via 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

enter image description here

Menu déroulant amélioré

Vous pouvez également améliorer le menu déroulant avec un menu arborescent. Créez la variable à partir de la source exemple 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'
        )
    );

enter image description here

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

Le dernier point concerne l’inclusion du css personnalisé pour ces formats via hook 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 ces règles de feuille de style également à la feuille de style front-end.

Supprimer le bouton de format

À titre d’amélioration, vous pouvez supprimer le bouton déroulant formatselect en vérifiant la valeur dans le tableau de boutons. Ajoutez la source suivante à la fonction fb_mce_editor_buttons au crochet mce_buttons_2.

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

Per cette réponse , la clé pour que les styles apparaissent dans la liste déroulante est de unset($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;
}
5
helgatheviking

Très utile et merci pour defaultstyles pointeurs. J'ai constaté que la fusion de tableaux ne fonctionnait pas avant la conversion de ces options par défaut en JSON valide (JavaScript non valide). Ci-dessous permet l'ajout du menu déroulant WordPress tinymce au lieu de le remplacement

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, retournez le hash des options 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;
}
2
s6712