web-dev-qa-db-fra.com

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

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 aux clients? et même supprimer les inutiles?

formattingtext
14
Mild Fuzz

L'éditeur TinyMCE "classique" comporte deux listes déroulantes: formatselect pour styles de paragraphe et styleselect pour caractères de style -, qui peuvent également contenir des styles de paragraphe, pour le rendre plus confus. La configuration dans WordPress par défaut affiche uniquement le menu déroulant format . Si vous appliquez une feuille de style personnalisée à l'éditeur, TinyMCE peut l'utiliser pour choisir les noms de classe et les ajouter au menu déroulant style - mais cela ne fonctionnait pas à chaque fois pour moi.

Depuis la version 3.0, vous pouvez appeler add_editor_style() dans votre functions.php pour ajouter une feuille de style à l'éditeur. Par défaut, c'est editor-style.css dans votre répertoire de thèmes. Avant la version 3.0, vous devez vous connecter au filtre mce_css pour ajouter l'URL à la feuille de style de votre éditeur. Cela se retrouvera dans la content_css valeur de configuration TinyMCE .

Pour ajouter le menu déroulant style , l'option styleselect 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'option theme_advanced_blockformats de TinyMCE , que vous pouvez ajouter au tableau de contrôles dans le filtre tiny_mce_before_init . Si vous souhaitez personnaliser les noms du menu déroulant style (pas uniquement vos noms de classes CSS), consultez l’option theme_advanced_styles . Vous pouvez également utiliser l'option plus avancée style_formats qui vous donne plus de flexibilité pour définir les styles.

Le code PHP approprié avec tous les points d'ancrage et la configuration par défaut est dans wp-admin/includes/post.php, DANS LA FONCTION wp_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;
}
17
Jan Fabry

Voir ici La liste déroulante des formats TinyMCE n’affiche plus les aperçus de style

Kara avait raison, vous devez supprimer les styles par défaut pour voir les nouveaux styles ...

unset($init['preview_styles']);

return $settings;
0
user2136473