Der TinyMCE Editor von WordPress ist ein sogenannter WYSIWYG (What you see is what you get) Editor. Die Standard Version des Editors ist ziemlich schlank gehalten und reicht vielen für den täglichen Gebrauch mögli­cher­weise nicht aus.

Plugin

Mit dem Plugin TinyMCE Advanced lässt sich der Editor mit einigen Funktionen erweitern.

Custom Styles

Darüber hinaus lässt sich der Editor mit TinyMCE Custom Styles indivi­duell erweitern.

Bevor Änderungen auf diese Weise durch­ge­führt werden können, muss die Funktion zunächst in der functions.php aktiviert werden. Diese Funktio­na­lität bietet auch das Plugin TinyMCE Advanced. Wer jedoch ganz eigene Formate erstellen möchte ist mit den Custom Styles an der richtigen Adresse.

// Fügt Formate Pulldownmenu zum TinyMCE hinzu
 function mo_tinymcebuttons( $buttons ) {
 array_unshift( $buttons, 'styleselect' );
 return $buttons;
 }
 // Registrieren der Funktion in der zweiten Reihe des Editors
 add_filter( 'mce_buttons_2', 'mo_tinymcebuttons' );

Button

einen über CSS stylebaren Button hinzu­fügen.

//Definieren der Formate
    function mo_formate( $init_array ) {
	$style_formats                                                         = array(
		// Jedes Array Kindelement definiert ein eigenes Format
		array(
			'title'                                                        => 'Button', //Titel
			'classes'                                                      => 'btn', //CSS Klasse
            'selector'                                                     => 'a' //Gültigkeit für HTML Elemente
		),
        /*
        //Platz für weitere Formate
		array(
			'title'                                                        => '⇠.rtl',
			'block'                                                        => 'blockquote',
			'classes'                                                      => 'rtl',
			'wrapper'                                                      => true,
		),
        */
	);
	// Fügt das Array in die Formate ein
	$init_array['style_formats']                                           = json_encode( $style_formats );

	return $init_array;

    }
    add_filter( 'tiny_mce_before_init', 'mo_formate' );

Editor Styles / Style­sheets

Um die Änderungen auch im Backend sichtbar zu machen, benötigen wir die Funktion add_editor_style()

// Fügt das Editor Stylesheet hinzu
function mo_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'mo_add_editor_styles' );

Anschließend muss die CSS Datei angelegt werden. In dieser können entweder indivi­duelle Anpas­sungen vorge­nommen werden, oder wir impor­tieren die style.css.

@import url('style.css')