web-dev-qa-db-fra.com

Ajouter une classe CSS à la liaison dans l'éditeur TinyMCE

En cherchant une solution, je suis tombé sur le plugin pour activer une liste déroulante des styles CSS déjà présents dans une feuille de style. Ce que je veux, c'est permettre à l'éditeur d'ajouter des classes CSS à partir d'une zone de texte. Donc, si vous considérez cette image:

enter image description here

Ce que je recherche idéalement, c’est un moyen d’obtenir une autre zone de texte en dessous de Titre appelé Classe . La liberté de taper une classe CSS est nécessaire pour d'autres fonctionnalités du site. Des idées sur la façon dont je peux y arriver?

Merci beaucoup!

linkstinymce
7
maGz

J'ai pu résoudre ce problème en ajoutant le WP Edit plugin sur mon site. Il a un bouton Advanced Link , qui me permet (ou un éditeur) de saisir manuellement un nom de classe.

1
maGz

Une option consiste à ajouter une classe au menu Styleselect de MCE. Adapté de la page Codex "TinyMCE Custom Styles" }, vous devez d'abord ajouter le style sélectionné à l'éditeur:

// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Cela ajoutera la nouvelle liste déroulante à l'éditeur. Ensuite, vous créez vos styles personnalisés:

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {  
    // Define the style_formats array
    $style_formats = array(  
        // Each array child is a format with it's own settings
        array(  
            'title' => 'My Link Custom Class',  
            'selector' => 'a',  
            'classes' => 'my-custom-link-class'             
        )
    );  
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Attach callback to 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Depuis WordPress 3.9, qui inclut une mise à niveau vers TinyMCE 4.0, le style sélectionné est beaucoup plus robuste et inclut la règle selector qui signifie que vous pouvez définir des styles pouvant uniquement être appliqués à des liens. C'est joli Nice.

Cette solution signifie que vous pouvez prédéfinir les classes dont vous avez besoin et vous assurer qu'il n'y a jamais de fautes de frappe ou autres problèmes.

Comme le note le Codex, ceci est mieux associé à un bon editor-style.css } qui appliquera vos styles directement dans l'éditeur.

19
mrwweb