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öglicherweise 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 individuell erweitern.
Bevor Änderungen auf diese Weise durchgeführt werden können, muss die Funktion zunächst in der functions.php aktiviert werden. Diese Funktionalitä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 hinzufü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 / Stylesheets
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 individuelle Anpassungen vorgenommen werden, oder wir importieren die style.css.
@import url('style.css')