WordPress WYSIWYG-Editor TinyMCE erweitern

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.

Comments

  
  1. Markus says:

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

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

    Ich bin mal so unverschämt ;)

  3. Ralf says:

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

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

  6. 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 says:

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

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

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

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

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

    Gruss, Volker

  13. Herr Honk says:

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

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

  15. Denis says:

    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. Lösche mal den Cache und aktuallisiere die Site.

  17. Denis says:

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

    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. 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 says:

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

  21. picard says:

    hallo frank
    du nutz nicht den tiny?

  22. Nein, ich schreibe immer im Code, mit Quicktags.

  23. picard says:

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

    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. Willst du auf WordPress 2.5 updaten? dann ist es eventuell nicht mehr so relevant, denn der Editor ist dann besser.

  26. Matt says:

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

    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?

  28. redaktion says:

    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!

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

  29. Michael Wald says:

    @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

    • @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');

  30. Redaktion says:

    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!

  31. Michael Wald says:

    @Frank

    danke für deine antwort.

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

    wo kommt der code denn genau hin?

  32. Michael Wald says:

    @Frank

    ah, ok =)

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

    • @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');
      
  33. Michael Wald says:

    @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 =)

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

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

  34. Michael Wald says:

    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.

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

    • @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');
      
  35. Michael Wald says:

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

  36. Michael Wald says:

    @Frank

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

  37. Michael Wald says:

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

  38. Chris says:

    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?

  39. KranzKrone says:

    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

  1. [...] 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 [...]

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