puis-je ajouter un format personnalisé à l'option de format dans le panneau de texte?

16

Dans l'éditeur de texte, où vous pouvez définir des en-têtes et d'autres paramètres, est-il possible d'ajouter vos propres styles à utiliser par les clients? et même supprimer les inutiles?

Doux Fuzz
la source
2
WP3 et TinyMCE sont tellement foirés dans cet aspect. Je ne peux pas croire qu'il n'est pas possible d'ajouter ou de personnaliser facilement les foutus formats comme dans CKEditor.
cherouvim
1
Je suis d'accord, c'est une douleur totale.
Mild Fuzz

Réponses:

17

L'éditeur TinyMCE "classique" a deux listes déroulantes: formatselectpour les styles de paragraphe et styleselectpour les styles de caractère - qui peuvent également contenir des styles de paragraphe, pour le rendre plus déroutant. La configuration dans WordPress par défaut affiche uniquement la liste déroulante des formats . Si vous appliquez une feuille de style personnalisée à l'éditeur, TinyMCE peut l'utiliser pour récupérer les noms de classe et les ajouter à la liste déroulante des styles - mais cela n'a pas fonctionné à chaque fois pour moi.

Depuis 3.0, vous pouvez appeler add_editor_style()votre functions.phppour ajouter une feuille de style à l'éditeur. Par défaut, il se trouve editor-style.cssdans votre répertoire de thèmes. Avant 3.0, vous devez vous connecter au mce_cssfiltre pour ajouter l'URL à la feuille de style de votre éditeur. Cela se terminera dans la content_cssvaleur de configuration TinyMCE .

Pour ajouter le menu déroulant de style , l' styleselectoption doit apparaître dans l'un des tableaux de configuration de la barre de boutons ( theme_advanced_buttons[1-4]dans TinyMCE, filtré par mce_buttons_[1-4]dans WordPress). La liste des formats de bloc est contrôlée par l' theme_advanced_blockformatsoption de TinyMCE , que vous pouvez ajouter au tableau de contrôle dans le tiny_mce_before_initfiltre. Si vous souhaitez personnaliser les noms de la liste déroulante de style (pas seulement vos noms de classe CSS), regardez l' theme_advanced_stylesoption . Vous pouvez également utiliser l' style_formatsoption plus avancée qui vous donne plus de flexibilité pour définir les styles.

Le code PHP pertinent avec tous les hooks et la configuration par défaut est wp-admin/includes/post.phpen fonctionwp_tiny_mce() . Dans l'ensemble, votre configuration pourrait ressembler à ceci:

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}
Jan Fabry
la source
existe-t-il un format spécial que le .css devrait prendre en utilisant add_editor_style? rien ne semble se produire
Mild Fuzz
1
@Mild Fuzz: Ma réponse précédente était trompeuse car WordPress n'affiche qu'une des deux listes déroulantes nécessaires. J'ai mis à jour ma réponse avec un moyen d'ajouter le deuxième menu déroulant et comment le contrôler.
Jan Fabry
1
@Mild Fuzz: Les paramètres des différents style_formatséléments sont expliqués dans la formatspage wiki associée .
Jan Fabry
1
no longr produit des erreurs, mais n'a aucun effet!
Mild Fuzz
1
json_encode génère "et non 'donc le javascript se casse. Vous devez faire str_replace ('" ', "'", json_encode ($ style_formats))
cherouvim