praegnanz.de büro für intervernetzte medien

Philip, 08.11.2012

TinyMCE Advanced für Wordpress anpassen und erweitern

Der Feind eines jeden Webdesigners ist der visuelle Editor. Mal außen vor, wenn Leute aus Word ihre Texte in diesen kopieren. Aus diesem Grund will man die Funktionalität des visuellen Editor auf das Minimum reduzieren.

Bei Wordpress kann man hierfür das Plugin TinyMCE Advanced installieren und all diese design-verunstaltenden-eh-nicht-gestyleten Elemente entfernen. Hurra.

TinyMCE before and after

Anschließend ist die Auswahl auf die einsetzbaren (und gestylten) Dinge beschränkt und sogar Überschrift, Absatz, … sind definierbar.

Überschriften bis zum 6. Grad, monospace und Adresse sind aber auch hier etwas zu viel des Guten.
Zudem würde man lieber noch Klassen vergeben können, um irgendwelche Besonderheiten zu stylen.

Die Auswahl kann man ganz einfach selbst bestimmen und zwar in der functions.php des aktiven Themes.


// Customize the format dropdown items
if( !function_exists('base_custom_mce_format') ){
  function base_custom_mce_format($init) {
    // Add block format elements you want to show in dropdown
    $init['theme_advanced_blockformats'] = 'Absatz=p,Überschrift 1=h1,Zwei=h2,Drei=h3,mein Code=code';

    // Add block style elements you want to show in dropdown
    $init['theme_advanced_styles'] = 'Mytestclass=mytestclass,Klasse 1=meineKlasse1';

    // Add elements not included in standard tinyMCE dropdown p,h1,h2,h3,h4,h5,h6
    $init['extended_valid_elements'] = 'code[*]';

    return $init;
  }
  add_filter('tiny_mce_before_init', 'base_custom_mce_format' );
}

Das Ergebnis sieht dann so aus:

Da freut sich der Theme-Entwickler.

4 Kommentare

  1. Chris am 29. November 2012 #

    Sehr gut genau danach habe ich gesucht. Tolle Zusammenfassung.
    Hab mich immer damit schwer getan, aber jetzt hab ich ja eure Anleitung danke ;)

  2. Markus am 30. November 2012 #

    Ich wollte schon länger den tinymce aufbohren, hatte aber nie die Zeit mich da reinzuwühlen. Den tinymce setze ich auch noch für andere CMS ein, insofern bedanke ich mich für die Kurzanleitung. Ich werde das am Wochenende direkt umsetzen!

  3. Micha am 23. März 2013 #

    Den TinyMCE habe wollte ich eigentlich speziell bei den Kommentaren in meinem Blog zum Einsatz bringen…. klappt soweit auch gut.
    Dummerweise zeigt mir das Antwortfeld jetzt Hinweisfelder an… die mir mitteilen, was in der entsprechenden Zeile einzugeben ist… die liegt aber genau über den Buttons….
    Kann mir von Euch jemand erklären wie ich diese weg bekomme???

    Danke!!

    VG Micha
    Blog: www.michaspixelwelten.de

  4. ich am 29. September 2014 #

    Schön!
    hätte ich auch gern -
    Leider läufts nicht.
    Ich hab WP4 und TmceAdvanced 4.1.1
    hat das jemand mit diese Versionen am laufen?

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.