web-dev-qa-db-fra.com

TinyMCE style_select - Ajout de classes

TL; DR Question

  1. Comment créer un sous-menu pour mes classes avec style_format?
  2. Puis-je ajouter un sous-menu au menu existant?

Avec la nouvelle fonction Styleselect de TinyMCE 4.0, vous disposez de nombreux menus prédéfinis, en-têtes, en ligne, en mode bloc et en alignement. Existe-t-il un moyen de conserver ces menus tout en ajoutant un nouveau menu Classes avec des sous-éléments de classes définies par le développeur?

Style Select Drop Down Menu

L'image ci-dessus est à peu près ce que je vais faire. Je peux ajouter des classes via cette fonction de filtrage -Le problèmeest qu’il supprime tous les éléments de menu prédéfinis (titres par alignement) et les remplace par ma seule classe.

function myformatTinyMCE($in) {
    $style_formats = array(
        array(  
            'title' => 'Blue Color',
            'selector' => 'p,strong,u,em,ul,ol,a',
            'classes' => 'blueColor',
            'wrapper' => false,
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

J'ai consulté la TinyMCE style_formats Documentation pour essayer de reproduire ce qu'ils font, mais il semble qu'ils aient été prédéfinis styles liés à des mots-clés, comme les alignements, donc je ne sais pas si c'est possible. J'ai pu reproduire le sous-menu mais je n'ai pas pu l'appliquer car il s'agit d'une classe et non d'un format style="" direct.

function myformatTinyMCE($in) {
    $style_formats = array(
        array(
            'title' => 'Classes',
            'items' =>  array(  
                array(
                    'title' => 'Blue Color',
                    'icon' => 'alignleft',
                    'format' => 'blueColor'
                )
            )
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
customizationtinymcewp-editor
2
Howdy_McGee

EDIT

La méthode simple et rapide n’est qu’un simple paramètre: style_formats_merge...

function myformatTinyMCE($in) { 
         $style_formats = array(
            array(
                'title' => 'Classes',
                'items' =>  array(  
                    array(
                        'title' => 'Blue Color',
                        'selector' => 'p,strong,u,em,ol,ul',
                        'classes' => 'blueColor'
                    )
                )
            )
        );
        $in['style_formats_merge'] = true;
        $in['style_formats'] = json_encode( $style_formats );

        return $in; 
    }
    add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Tout ce qui est en dessous de ce point est un moyen beaucoup plus long d’agir, mais peut être utile aux futurs téléspectateurs, je vais donc le garder.

Donc, pratiquement après avoir posé cette question, j'ai trouvé la réponse sur les formulaires de TinyMCE: Ajout de classe à TinyMCE style_formats - pas la dernière ligne du code. Au format WordPress, cela ressemble à ceci:

function myformatTinyMCE($in) { 
     $style_formats = array(
        array(
            'title' => 'Classes',
            'items' =>  array(  
                array(
                    'title' => 'Blue Color',
                    'selector' => 'p,strong,u,em,ol,ul',
                    'classes' => 'blueColor'
                )
            )
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Malheureusement, tous les anciens éléments du menu TinyMCE sont toujours effacés. J'ai ensuite utilisé le style_format docs pour recréer les éléments de menu. La version longue ressemble à ceci (sans la classe).

function myformatTinyMCE($in) { 
     $style_formats = array(
        array(
            'title' => 'Headers', 
            'items' => array(
                array(
                    'title' => 'Header 1', 
                    'format' => 'h1'
                ),
                array(
                    'title' => 'Header 2', 
                    'format' => 'h2',
                ),
                array(
                    'title' => 'Header 3', 
                    'format' => 'h3'
                ),
                array(
                    'title' => 'Header 4', 
                    'format' => 'h4'
                ),
                array(
                    'title' => 'Header 5', 
                    'format' => 'h5'
                ),
                array(
                    'title' => 'Header 6', 
                    'format' => 'h6'
                )
            )
        ),
        array(
            'title' => 'Inline', 
            'items' => array(
                array(
                    'title' => 'Bold', 
                    'icon' => 'bold', 
                    'format' => 'bold'
                ),
                array(
                    'title' => 'Italic', 
                    'icon' => 'italic', 
                    'format' => 'italic'
                ),
                array(
                    'title' => 'Underline', 
                    'icon' => 'underline', 
                    'format' => 'underline'
                ),
                array(
                    'title' => 'Strikethrough', 
                    'icon' => 'strikethrough', 
                    'format' => 'strikethrough'
                ),
                array(
                    'title' => 'Superscript', 
                    'icon' => 'superscript', 
                    'format' => 'superscript'
                ),
                array(
                    'title' => 'Subscript', 
                    'icon' => 'subscript', 
                    'format' => 'subscript'
                ),
                array(
                    'title' => 'Code', 
                    'icon' => 'code', 
                    'format' => 'code'
                )
            )
        ),
        array(
            'title' => 'Blocks', 
            'items' => array(
                array(
                    'title' => 'Paragraph', 
                    'format' => 'p'
                ),
                array(
                    'title' => 'Blockquote', 
                    'format' => 'blockquote'
                ),
                array(
                    'title' => 'Div', 
                    'format' => 'div'
                ),
                array(
                    'title' => 'Pre', 
                    'format' => 'pre'
                )
            )
        ),
        array(
            'title' => 'Alignment', 
            'items' => array(
                array(
                    'title' => 'Left', 
                    'icon' => 'alignleft', 
                    'format' => 'alignleft'
                ),
                array(
                    'title' => 'Center', 
                    'icon' => 'aligncenter', 
                    'format' => 'aligncenter'
                ),
                array(
                    'title' => 'Right', 
                    'icon' => 'alignright', 
                    'format' => 'alignright'
                ),
                array(
                    'title' => 'Justify', 
                    'icon' => 'alignjustify', 
                    'format' => 'alignjustify'
                )
            )
        )
    );  
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );

Vous pouvez simplement ajouter le tableau de classes de la première fonction à cette fonction existante pour l'ajouter au dernier élément de menu. Voici la version compacte, avec la classe:

function myformatTinyMCE($in) { 
     $style_formats = array(
        array('title'=>'Headers','items'=>array(array('title'=>'Header 1','format'=>'h1'),array('title'=>'Header 2','format'=>'h2',),array('title'=>'Header 3','format'=>'h3'),array('title'=>'Header 4','format'=>'h4'),array('title'=>'Header 5','format'=>'h5'),array('title'=>'Header 6','format'=>'h6'))),array('title'=>'Inline','items'=>array(array('title'=>'Bold','icon'=>'bold','format'=>'bold'),array('title'=>'Italic','icon'=>'italic','format'=>'italic'),array('title'=>'Underline','icon'=>'underline','format'=>'underline'),array('title'=>'Strikethrough','icon'=>'strikethrough','format'=>'strikethrough'),array('title'=>'Superscript','icon'=>'superscript','format'=>'superscript'),array('title'=>'Subscript','icon'=>'subscript','format'=>'subscript'),array('title'=>'Code','icon'=>'code','format'=>'code'))),array('title'=>'Blocks','items'=>array(array('title'=>'Paragraph','format'=>'p'),array('title'=>'Blockquote','format'=>'blockquote'),array('title'=>'Div','format'=>'div'),array('title'=>'Pre','format'=>'pre'))),array('title'=>'Alignment','items'=>array(array('title'=>'Left','icon'=>'alignleft','format'=>'alignleft'),array('title'=>'Center','icon'=>'aligncenter','format'=>'aligncenter'),array('title'=>'Right','icon'=>'alignright','format'=>'alignright'),array('title'=>'Justify','icon'=>'alignjustify','format'=>'alignjustify')))
        ,array(
            'title' => 'Classes',
            'items' =>  array(  
                array(
                    'title' => 'Blue Color',
                    'selector' => 'p,strong,u,em,ol,ul',
                    'classes' => 'blueColor'
                )
            )
        )
    );   
    $in['style_formats'] = json_encode( $style_formats );

    return $in; 
}
add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
1
Howdy_McGee