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

20

J'ai 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 de 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?

    
posée Marc P 08.01.2014 - 00:22

3 réponses

41

Vous ne pouvez pas améliorer la liste déroulante formatselect . Mais vous pouvez améliorer avec le crochet tiny_mce_before_init la deuxième liste déroulante styleselect , il est masqué 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 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 fusion de styles similaires fonctionnalité lorsque utilisé. Ceci est nécessaire pour certains problèmes d'héritage CSS tels que la décoration de texte pour souligner / effacer.
  • wrapper - Etat indiquant que le format actuel est un format de conteneur pour bloc éléments. 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 la ligne 2 avec le 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

Ensuite, améliorez le menu déroulant de ce bouton. Également utile pour le positionnement 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

Menudéroulantamélioré

Vouspouvezégalementaméliorerlemenudéroulantavecunmenuarborescent.Créezlavariableàpartirdelasourceexempleci-dessusavecplusdestructuredansletableau,commelasourcesuivante.

$style_formats=array(array('title'=>'Headers','items'=>array(array('title'=>'Header1','format'=>'h1','icon'=>'bold'),array('title'=>'Header2','format'=>'h2','icon'=>'bold'))),array('title'=>'DownloadLink','selector'=>'a','classes'=>'download'));

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 consiste à inclure le fichier 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 ces règles de feuille de style également à la feuille de style front-end.

Supprimer le bouton de formatage

Comme amélioration, vous pouvez supprimer le bouton déroulant formatselect en vérifiant la valeur dans le tableau de boutons. Ajoutez la source de suivi à 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] );
    }
}
    
réponse donnée bueltge 08.01.2014 - 09:49
5

Selon la réponse , la clé pour que les styles apparaissent dans la liste déroulante est 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;
}
    
réponse donnée helgatheviking 03.07.2015 - 23:23
2

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). La section ci-dessous permet d'ajouter le menu déroulant de WordPress tinymce 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, renvoyez le hachage 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;
}
    
réponse donnée s6712 30.01.2015 - 18:40

Lire d'autres questions sur les étiquettes