WordPress WYSIWYG-Editor TinyMCE erweitern

6. März 2007 von in Tipps, WordPress

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:

, , , ,

Über

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

Kommentare

  
  1. Markus sagt:
    6. März 2007 um 08:46

    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. Ralf sagt:
    6. März 2007 um 14:24

    Eigenwerbung: WordPress kann doch YouTube - http://unterderhaube.neun12.de/artikel-24

    Ich bin mal so unverschämt ;)

  3. Ralf sagt:
    6. März 2007 um 14:31

    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.

  4. Frank Bültge sagt:
    6. März 2007 um 15:23

    @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

  5. Burchi sagt:
    7. März 2007 um 12:38

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

  6. Frank Bültge sagt:
    7. März 2007 um 13:20

    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.

  7. Robert Hartl sagt:
    7. März 2007 um 13:28

    Danke Frank!
    Ich hatte für vorherige WP-Funktionen auch die Bildverarbeitung verbessert, da hat sich aber einiges getan. Wenn Du dazu (http://blog.suchmaschinen-optimierungen.info/wordpress-tinymce-editor-anpassen-erweitern) eine Idee hast oder anknüpfen könntest, denke ich, wäre das nicht nur für mich eine große Hilfe.

  8. Ralf sagt:
    7. März 2007 um 13:43

    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.

  9. Petra sagt:
    26. März 2007 um 20:53

    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).

  10. Volker sagt:
    9. April 2007 um 13:30

    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

  11. Frank Bültge sagt:
    10. April 2007 um 08:19

    @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.

  12. Volker sagt:
    10. April 2007 um 09:37

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

    Gruss, Volker

  13. Herr Honk sagt:
    11. April 2007 um 09:53

    eine Frage: wo definiere ich welche Styles bei styleselect angezeigt werden?

  14. Frank Bültge sagt:
    13. April 2007 um 08:24

    Die Einstellungen findest du in: /wp-includes/js/tinymce/themes/advanced/editor_template.js

  15. Denis sagt:
    16. April 2007 um 18:04

    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.

  16. Frank Bültge sagt:
    17. April 2007 um 11:57

    Lösche mal den Cache und aktuallisiere die Site.

  17. Denis sagt:
    17. April 2007 um 12: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 :-)

  18. Manuel Merz sagt:
    18. Januar 2008 um 09:18

    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 :)

  19. Frank Bültge sagt:
    18. Januar 2008 um 09:40

    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.ä.

  20. Manuel Merz sagt:
    18. Januar 2008 um 10:09

    Schade, danke dennoch. Kenne mich mit JS überhaupt nicht aus :( Mal schauen ob ich noch weitere Informationen finden kann :)

  21. picard sagt:
    18. Januar 2008 um 11:41

    hallo frank
    du nutz nicht den tiny?

  22. Frank Bültge sagt:
    18. Januar 2008 um 12:48

    Nein, ich schreibe immer im Code, mit Quicktags.

  23. picard sagt:
    18. Januar 2008 um 13:54

    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 :-)

  24. Matt sagt:
    2. April 2008 um 15:22

    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

  25. Frank Bültge sagt:
    2. April 2008 um 15:48

    Willst du auf WordPress 2.5 updaten? dann ist es eventuell nicht mehr so relevant, denn der Editor ist dann besser.

  26. Matt sagt:
    2. April 2008 um 16:40

    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?

  27. Sarina sagt:
    12. April 2008 um 00:53

    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?

  29. redaktion sagt:
    20. Januar 2010 um 08:11

    Hallo,
    auch hier will ich die Forderung meiner Leser einbringen: warum ist der normale Kommentareditor so sehr abgespeckt, dass Leser daran verzweifeln? Ich bekomme gestern ein Mail mit der Bitte, weil der Leser aus WORD immer wieder ins Kommentarfeld mit copy&paste überträgt, seinen Text selber einzusetzen.

    Warum kann man nicht den Editor von WP ggf. erweitert um TinyMCE Advanced als Kommentareditor anbieten? Die Codes sind doch alle da!

    • Frank Bültge sagt:
      20. Januar 2010 um 10:46

      @redaktion :weil ich die Kommentare der Leser schätze und keine Copy/Paste Aktionen wünsche. Ebenso bringen Tools wie Word unmengen von Markup mit, welches in den Kommentaren keinen Platz haben sollte.

  30. Michael Wald sagt:
    30. Januar 2010 um 17:27

    @Frank

    erstmal vielen dank für deine umfangreichen artikel die mich immer wieder auf deine seite führen!

    scheinbar ist seit (gerücht?) wp 2.7 die datei tiny_mce_config.php nicht mehr bei der wordpress installation dabei.

    in einem anderen beitrag eines kollegen (auch von 2007) habe ich etwas gefunden was ich gerne beim tiny editor konfigurieren möchte, und zwar "verify_html : false".
    http://blog.brockha.us/index.php?/archives/103-TinyMCE-loescht-OBJECT-und-EMBED.html

    allerdings finde ich nirgens bei der aktuellen wp 2.9.1 bei tiny dazu die entsprechende datei. zusätzlich habe ich advanced tiny installiert, aber auch dort nichts zum konfigurieren gefunden.

    hast du eventuell einen hinweis für mich?

    thx

    • Frank Bültge sagt:
      3. Februar 2010 um 10:16

      @Michael: auch nicht mein Steckenpferd, aber eventuell geht der folgende Code, der den init-Hook des TinyMCE anspricht.

      function fb_change_mce_options($initArray) {
      if ( isset( $initArray['valid_elements'] ) ) {
      $initArray['valid_elements'] .= ',' .'*[*]';
      } else {
      $initArray['valid_elements'] = '*[*]';
      }
      $initArray['verify_html'] = false;
      }
      add_filter('tiny_mce_before_init', 'fb_change_mce_options');

  31. Redaktion sagt:
    3. Februar 2010 um 18:00

    Grundsätzlich funktioniert mein Verstand! Aber was soll dieser Kommentar #39? Ich verstehe meine Aufgabe auch so, dass ich meine "Kunden" von meinem Blog zufrieden stellen möchte. Also: ein besserer Kommentar- Editor, der insbesondere die WORD- Einfügefunktion hat, damit die Steuerzeichen von WORD nicht mit übertragen werden, wäre schon angebracht!

  32. Michael Wald sagt:
    3. Februar 2010 um 19:04

    @Frank

    danke für deine antwort.

    jetzt muss ich mal dumm fragen (bin halt ein n00b)

    wo kommt der code denn genau hin?

  33. Michael Wald sagt:
    3. Februar 2010 um 20:39

    @Frank

    ah, ok =)

    also bei mir geht dann der visuell mode gar nicht mehr. kommt nur noch html

    • Frank Bültge sagt:
      4. Februar 2010 um 14:55

      @Michael: Dann definiere die Elemente, die zusätzlich erlaubt sein dürfen, mit | getrennt.

      
function fb_change_mce_options($initArray) {
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style]';
	
	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}
	
	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');
  34. Michael Wald sagt:
    5. Februar 2010 um 14:40

    @Frank

    nochmal danke für deine antwort und große mühe!

    ne, wenn das so kompliziert ist verzichte ich gerne auf die option, oder hoffe jemand setzt es irgendwann als plugin um.

    hier in der doku von tiny steht dass man einfach etwas ausschalten könne
    http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/verify_html

    wenn dass nicht geht, taugt scheinbar die doku nix.

    ich bin kein programmierer, ich konfiguriere aber wo möglich.

    nochmals danke für deine antworten =)

    • Frank Bültge sagt:
      5. Februar 2010 um 14:54

      @Michael: kopiere doch mal den Code einfach in die functions.php deines Themes, ob es geht?

    • Frank Bültge sagt:
      5. Februar 2010 um 15:10

      @Michael: habe mal gespielt:

      
function fb_change_mce_options($initArray) {
	$initArray['verify_html'] = false;

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

      sollte passen; zumindest ist das Config-Array des Tiny-MCE dann mit dem Parameter gefüttert. Also den Code mal in die functions.php oder ein Plugin ablegen.

  35. Michael Wald sagt:
    5. Februar 2010 um 15:32

    hm, funzt so nicht bei mir (vorrausgestzt ich hab den code richtig eingebaut)

    also ich hab z.B. folgendes:

    in einer seite ist u.a. eine google maps eingebunden (per code mit iframe)

    wenn ich auf visuell umschalte macht tiny mir den code kaputt.

    natürlich könnte ich für google maps wieder ein entsprechendes plug in installieren.

    find ich aber nicht so toll, irgendwann hat man einfach zu viele plugins installiert, was die komplexität meiner meinung nach unnötig erhöht.

    auch wenn ich im html mode mal (vermutlich nicht w3c konform) mehrere p tags oder sonst was setze, haut mir tiny die formatierung immer raus.

    genauso bei youtube videos.

    ich paste im html mode den code zum einbetten von youtube rein und schreib vorher noch center, schließ hinter dem code sauber ab, aber wenn ich die seite nachträglich im visuell mode bearbeite haut mir tiny einfach die anweisung center wieder raus.

    • Frank Bültge sagt:
      5. Februar 2010 um 15:42

      @Michael: ja, dann muss mein vorhergehender Code her, denn dann muss man eigene strings als valide definieren, im Standard macht WP alles weg, was nicht XHTML 1.0 ist. Versuche mal das Plugin, vermute, dass es deinen Wunsch trifft.

    • Frank Bültge sagt:
      5. Februar 2010 um 15:55

      @Michael: wenn ich folgenden Code ablege, dann ich Maps einbetten; keine Problem. Aber du musst eben immer um deine Tags und Elemente erweitern.

      
function fb_change_mce_options($initArray) {
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}
	$initArray['verify_html'] = false;

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');
  36. Michael Wald sagt:
    5. Februar 2010 um 15:57

    @Frank hab ich installiert und trotzdem haut tiny z.B. den code einer google maps mit iframe wieder kaputt bei mir.

    hab auch testhalber advanced tiny deaktiviert...

  37. Michael Wald sagt:
    5. Februar 2010 um 16:10

    @Frank

    sorry, ich hab das plugin probiert, werd jetzt mal deinen code testen...

  38. Michael Wald sagt:
    5. Februar 2010 um 16:17

    jo, jetzt hab ich deinen letzten code in die function.php eingegebaut und die maps bleibt erhalten, auch beim umschalten auf visuell mode...

    thx und weiteres muss ich wohl noch einige nächte überschlafen =)

  39. Chris sagt:
    3. April 2011 um 09:32

    Bei WordPress Version > 3.0 heißt die Datei zum verändern nicht mehr so bzw. ist nicht mehr an besagter Stelle ?!
    Wurde sie umgezogen? Wo findet man sie nun?

  40. KranzKrone sagt:
    4. Juni 2011 um 04:19

    Bin auf diesen Beitrag gestossen, als ich über Google nach "wordpress frontend WYSIWYG" gesucht habe.

    Neben dem Erweitern des WYSIWYG-Editor, ist es auch möglich den Komplett in das Frontend zu verlegen? So in der Art wie beim P2 Theme es der fall ist? Also das ich aus dem Frontend heraus, wenn ich eingeloggt bin, einen neuen Artikel schreiben kann?

Trackbacks

  2. WordPress Editor TinyMCE leicht anpassen | bueltge.de [by:ltge.de]
    12. Juli 2007 um 11:58

    [...] WordPress WYSIWYG-Editor TinyMCE erweiternVergleich von Webbasierenden WYSIWYG-EditorenWordPress Editor TinyMCE noch umfangreicher erweiternWordPress mit einem Forum verbinden …WordPress Editor Bereich anpassen (Plugin)JavaScript-Editor gesucht ?Webbasierendes Desktop-Betriebssystem [...]

© 2013, since 2005 bueltge.de [by:ltge.de] · Theme is built by ThemeShift