WordPress WYSIWYG-Editor TinyMCE erweitern

Der Editor TinyMCE, der seit Version 2.1 von WordPress dabei ist hat eine ganze Reihe von Funktionen, die allerdings nicht standardmäßig ersichtlich sind. Außerdem gibt es die Funktion HTML-Code, die überhaupt nicht berücksichtigt wurde.

TinyMCE erweitert

Ich habe für ein Projekt den Editor verändert, so dass die Autoren leichter an die Zusatzfunktion kommen, einfach den zugehörigen Button klicken, und einen zusätzlichen Button für die Bearbeitung des kompletten HTML-Codes haben, in einem extra Fester.

Dazu muss die Konfigurationsdatei vom Editor bearbeitet werden: /wp-includes/js/tinymce/tiny_mce_config.php

Ändert den Code bei $mce_buttons in folgenden, oder passt ihn an.


$mce_buttons = apply_filters( 'mce_buttons', array( 'bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'separator', 'link', 'unlink', 'image', 'wp_more', 'separator', 'spellchecker', 'separator', 'wp_help', 'wp_adv', 'wp_adv_start', 'formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo', 'separator', 'code', 'wp_adv_end' ) );
$mce_buttons = implode( $mce_buttons, ',' );

Der Button HTML kommt durch die Erweiterung von code. Der Button für das Ein-/Ausschalten der Zusatzfunktionen kommt daher, weil ich den Tag wp_adv vorgezogen habe, vor wp_ad_start.

Weitere Links:

53 Comments

  1. Das ist klasse! Ich habe mir die ganze Zeit überlegt, ob ich mal einen kleinen Beitrag schreibe, wie man den Editor anpassen kann. Das ist ja wirklich eine sehr simple Sache geworden. Ich kann mich nur wiederholen: Klasse :-)!!

    Grüße nach Einsenach 🙂 ..
    Markus

  2. Und nach der schnöden Eigenwerbung noch schnell der Tipp wie man die Zusatzfunktionen dauerhaft sichtbar machen kann:
    In der Datei wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js
    In Zeile 49
    Das "display:none" (div id="wpadvbar" style="display:none;")
    Durch "display:block" ersetzen (div id="wpadvbar" style="display:block;")

    Ab sofort werden die zusätzlichen Befehle dauerhaft angezeigt. Man kann sie aber trotzdem per Hotkey oder mittels den von Frank vorgeschlagenen Button wieder ausblenden.

  3. @Ralf: ich empfinde es nicht schnöde oder unverschämt, hatte es aber im Beitrag vergessen, denn ich habe den Beitrag natürlich gelesen. Das zeigt al wieder wie schön OSS sein kann: "Schauen wir mal in den Code und passen ihn an".
    LG Frank

  4. Man kann doch mit dem Button "Code" auf html umschalten, oder verstehe ich da was falsch?

  5. Kann man, aber das ist nur ein Teil der fertigen Ausgabe. WordPress setzt später die Absätze p-Tag etc. und die sind in der Code-Ansicht nicht ersichtlich. Der HTML-Button ist also interessant für Leute, die 100% Kontrolle haben wollen und trotzdem den TinyMCE nutzen, zum Beispiel bei 100% validem Code.

  6. TinyMCE und volle Kontrolle? Schließt sich das nicht von vorne rein aus, da TinyMCE z.B. den Embed-Tag nicht unterstützt, der aber von vielen Video-Hostern in ihren Snippet verwendet wird.

    Ich glaube ich muss mir die neuere Version von TinyMCE noch mal etwas genauer anschauen.

  7. Ich kenne TinyMCE von dem CMS "Contenido" - dort kommt er allerdings fast so umfangreich wie eine Textverarbeitung daher. Ich hatte mich schon gewundert, warum er bei WordPress so "verhungert" aussieht! Danke für den Tipp - bereits umgesetzt und für gut befunden!
    (Bei Contenido hat er noch wesentlich mehr Funktionen, allerdings werden die eher selten gebraucht).

  8. In meinem ersten Blog hat das wunderbar funktioniert. Jetzt beim zweiten Blog, habe ich die angepasste tiny_mce_config.php von Blog1 ins Verzeichnis von Blog2 gespielt (wollte mal faul sein) und nichts passiert, d.h. keine erweiterten Funktionen. Denkfehler von mir? Gruss, Volker

  9. @Volker: mal den Cache geleert und die Seite neu geladen (F5)? Ich habe die Datei in vier Blogs eingespielt - ohne Probleme. WP speichert den Editor ,also mal auffrischen.

  10. Manchmal ist die Welt so einfach, Asche auf mein Haupt. Danke schön, es funktioniert jetzt tadellos 🙂

    Gruss, Volker

  11. Ich hab grad mein WordPress von 2.0.7 auf 2.1.3 upgedatet damit ich diesen Tipp einsetzen kann...was macht man falsch wenn nach dem Update keine Quicktags mehr da sind in dem "Visual" ?
    Tschuldigung das ich hier bisschen quer Frage.

  12. Das hatte ich schon versucht. Denke das hatte irgend was mit meinem Firefox-Plugin "Tab Mix Plus" und dessen Funktion Sitzung wiederherstellen zum tun.
    Komisch aber nach nem Rechner Neustart liefs. Danke für die Antwort 🙂

  13. Hoi Frank

    Hast du für den Tiny noch weitere Anleitungen zur Hand? Ich bin auf der Suche nach folgendem: Würde dem Editor gerne einen neuen Button hinzufügen welcher ein PopUp und das darin befindliche Formular beinhaltet. Bei Klick auf den senden Button werden lediglich die Formularfelder in den Editor gesendet, fertig. ICh denke dass diese Funktion für manche WordPressler von nutzen wäre, da man so die custom_fields umgehen kann und man zudem eigene Formularvorlagen generieren kann 🙂

  14. folgende Artikel, das war's.
    Da ich nie damit arbeite, sind die Artikel nur durch Projekte mit anderen entstanden, die derartige Probleme hatten.

    Ansonsten mal die aktuelle WP-Beta 2.4 anschauen, da werden Buttons hinzugefügt, zum Beispiel für Bildupload u.ä.

  15. ich werdem eine nächsten beiträge mal im code schreiben, mal die vor/nachteile austesten und dein quicktag genau testen 😉

    many thx für deine arbeit 🙂

  16. danke für den tollen artikel.

    leider schaff ich es aber nicht wirklich die formate auf absatz und überschrift 1 zu reduzieren. ich habe mich bereits an der editor_templates.js versucht - aber ohne erfolg. kann mir da bitte jemand weiterhelfen? danke, matt

  17. Ich benutze bereits 2.5 - dennoch schaff ich es nicht das layout auf die oben genannten formate zu reduzieren. hat sich die anpassung für die formate in version 2.5 geändert?

  18. Ich hab die zusätzlichen Buttons zwar eingebaut bekommen... jedoch sind die alle in einer Reihe und nicht so schön in 2 Reihen untereinander wie bei dir.. wie kriegt man das denn hin?

Comments are closed.