web-dev-qa-db-fra.com

Ajouter une liste déroulante de sélection d'une classe dans tinymce

Comment puis-je ajouter un menu déroulant/sélectionner avec des noms de classe prédéfinis dans le Wordpress wysiwyg (tinymce advanced) que je peux mettre sur différents éléments?

Ce que je voudrais:

  1. Ajouter du texte ou tout autre élément
  2. Cliquez sur le texte, puis sur le menu déroulant pour sélectionner une classe à ajouter à cet élément.
tinymcewysiwygplugin-tinymce
1
Johan Dahl

Pour obtenir les styles déroulants, nous devons utiliser le crochet de filtrage tiny_mce_before_init. Ce filtre permet aux développeurs d’avoir accès au tableau de paramètres TinyMCE.

L'exemple suivant ajoute des options de style personnalisées à une liste déroulante Style existante.

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(                     
            array(
                    'title' => '1/5 Block',
                    'block' => 'div',
                    'classes' => 'col-md-5',
                    'wrapper' => true
            ),
            array(
                    'title' => 'Pull Left',
                    'block' => 'div',
                    'classes' => 'pull-left',
                    'wrapper' => true
            ),
            array(
                    'title' => 'Button R',
                    'selector' => 'a',
                    'classes' => 'btn btn-default pull-right'
            ),  
            array(
                    'title' => 'Text Center Green Button',
                    'selector' => 'a',
                    'classes' => 'btn btn-green center'
            ),              
            array(
                    'title' => 'Clearfix',
                    'block' => 'div',
                    'classes' => 'clearfix'
            ),
    );

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

    return $settings;

}

Vous pouvez en savoir plus sur les boutons tinymce et leurs utilisations et leurs points d'ancrage depuis ici .

3
Karun