Comment personnaliser TinyMCE4 dans WP 3.9 - l'ancienne méthode pour les styles et les formats ne fonctionne plus

10

Avant WP 3.9, les deux filtres suivants étaient appliqués dans le fichier functions.php:

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

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

de sorte que la liste déroulante des formats de paragraphe affiche uniquement p, h3 et h4 tandis que la liste déroulante des styles personnalisés affiche "En-tête brut", "En-tête klein" et ainsi de suite. Mais malheureusement, wp et tinymce ne dérangent plus depuis wp 3.9, je ne vois que la liste déroulante des formats de paragraphe standard maintenant

paragraphe

ainsi que la liste déroulante des formats de styles standard:

modes

Jusqu'à présent, je n'ai trouvé aucun document pour savoir si des crochets ont changé avec la mise à jour de tinymce 4. Tout le monde le sait? Cordialement Ralf

Mise à jour: Ok sur la base d'un peu plus de recherche et des commentaires ci-dessous, je suppose que j'ai compris les choses:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');
ermarus
la source
Non, je ne l'ai pas vu. Merci! Mais malheureusement, avec le code décrit ici, il est uniquement possible de créer un bouton au lieu de remodeler le style et les listes déroulantes de paragraphes. Je dois continuer à lire et à faire des recherches.
ermarus
Voici comment conserver les éléments de menu d'origine style_selectet y ajouter un menu "Classes". wordpress.stackexchange.com/questions/143689/…
Howdy_McGee

Réponses:

19

Si vous regardez dans, class-wp-editor.phpvous constaterez que le filtre que vous utilisez est toujours là, mais les paramètres sont différents.

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

Je suppose, mais je pense que vous devez changer la clé du tableau vers laquelle vous ciblez formats.

EDIT Laissant cela en place, mais le PO confirme que cela ne fait pas ce qu'il tente.

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Gardez à l'esprit que cela n'a pas été testé, votre kilométrage peut donc varier. (Et ne l'utilisez pas sur un site de production avant de l'avoir testé).

Poursuivre

En creusant plus profondément, les formats semblent être un bouton tinyMCE personnalisé. Vous pouvez voir que le formatselectbouton est ajouté mce_buttons_2dans le class-wp-editor.php. Et puis je l'ai suivi pour tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

Dans cet esprit, je pense que la nouvelle cible serait de 1. (idéalement) changer le editor.settings.block_formatsou 2. supprimer ce bouton en filtrant mce_buttons_2et en ajoutant votre propre version personnalisée.

Testé et fonctionnel

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

    $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' )
    );

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Petite mise en garde : je ne sais pas où ajouter les styles pour les éléments déroulants eux-mêmes. Dans l'exemple TinyMCE, l'option "Red Headline" est rouge. Je ne pouvais pas comprendre cela. Si vous le faites, s'il vous plaît laissez-moi savoir.

helgatheviking
la source
merci helga! j'ai déjà examiné l'éditeur de classe-wp. Mais je ne savais pas quelle devait être la syntaxe (il n'y a pas beaucoup de documentation liée à wp pour le tinymceapi mis à jour). a essayé votre suggestion maintenant. mêmes résultats qu'avec mes extraits de code initiaux. TinyMCE ne se soucie pas de ce à quoi ressemble l'init. sur le site tinymce, j'ai trouvé un exemple pour les formats personnalisés, js uniquement, et je n'ai pas réussi à l'adapter vers wp et php: tinymce.com/tryit/custom_formats.php
ermarus
1
Grande aide, merci! Je voulais juste ajouter que l' block_formatsoption ne peut pas avoir de fin; . Je construisais la valeur à partir des options configurables enregistrées et j'avais un suivi; qui a falsifié la liste. J'espère que cela fera gagner quelques minutes à quelqu'un.
Adam Pope
1
@indextwo yup, je l'ai résolu ici (du mieux que j'ai pu) et j'ai décidé ... hé ... blog! Vous n'obtenez pas la classe sur une durée même si vous la définissez comme en ligne? array( 'title' => 'Red text', 'inline' => 'span', 'styles' => array( 'color' => '#ff0000' ) ),?
helgatheviking
2
Les éléments du menu format héritent des styles de votre editor-styles.css, à l' exception des styles de couleur. Si vous voulez également les styles de couleurs, l'ajout de ce code à la fonction mce_mod () a fonctionné pour moi:unset($init['preview_styles']);
Dalton
1
@helgatheviking concernant votre petite mise en garde : vous pouvez activer tous les styles si vous définissez $init['preview_styles'] = 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow';. Je suppose que c'est essentiellement la même chose que @Dalton l'a suggéré, bien que d'une manière plus explicite. Cela définit simplement les valeurs par défaut, selon la documentation
tmce