web-dev-qa-db-de.com

Fügen Sie in tinymce ein Dropdown-Menü zum Auswählen einer Klasse hinzu

Wie kann ich dem Wordpress-Wysiwyg (Tinymce Advanced) ein Dropdown-Menü mit vordefinierten Klassennamen hinzufügen/auswählen, das ich für verschiedene Elemente verwenden kann?

Was ich gerne hätte:

  1. Fügen Sie einen Text oder ein anderes Element hinzu
  2. Klicken Sie auf den Text und dann auf die Dropdown-Liste, um eine Klasse auszuwählen, die dem Element hinzugefügt werden soll
1
Johan Dahl

Um die Dropdown-Stile zu erreichen, müssen wir den Filter-Hook tiny_mce_before_init verwenden. Dieser Filter gewährt Entwicklern Zugriff auf das TinyMCE-Einstellungsarray.

Im folgenden Beispiel werden benutzerdefinierte Stiloptionen zu einer vorhandenen Stil-Dropdown-Liste hinzugefügt.

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;

} 

Sie können mehr über die tinymce Knöpfe und ihre Verwendungen und Haken von hier lesen.

3
Karun