NETPROFIT - Online erfolgreich
NETPROFIT
assets/images/6/wordpress-85acc04e.jpg
  • Start
  • Blog
  • WordPress-Editor TinyMCE anpassen, erweitern
Optimierung, WordPress

WordPress-Editor TinyMCE anpassen, erweitern

Robert Hartl
 · 11. Juni 2006  · 

WordPress kommt ja seit Version 2 mit dem implementierten WYSIWYG (was Du siehst, ist was Du bekommst) Editor TinyMCE. Aufgrund der Integration in WordPress sind nur wenige Schaltflächen und Funktionen in der Standard-Einstellung verfügbar. Wer Überschriften (h1, h2, …) will, geht schon leer aus. Auch die Bilderanordnung ist fehlerhaft. Da die Codeausgabe aber ordentlich und das Schreiben mit dem Editor bequem und anschaulich ist, macht die Verwendung von TinyMCE grundsätzlich Sinn.
In diesem Artikel will ich kurz erläutern, wie man den TinyMCE anpasst und erweitert, so dass er für die gängigen Bedürfnisse geeignet ist.

Achtung, diese Anleitung bezieht sich auf WordPress ursprünglich auf 2.0.x. In WP 2.1 wird nicht die Datei tiny_mce_gzip.php editiert, sondern die tiny_mce_config.php. Siehe dazu unteren Trackback. Auch die Formatauswahl sieht nun etwas übersichtlicher aus.
Also Dateien sichern. Änderungen auf eigene Gefahr.

Inhaltsübersicht

Editor TinyMCE

Vorweg kurz hilfreiche Links. Übersichtsseite mit Erläuterungen zu TinyMCE sowie Entwicklerseite mit Plugins etc. bei SourceForge.

Überschriften (h1, h2, h3, ..) hinzufügen

In der Standard-Version sieht TinyMCE so aus:

files/dateien/bilder/blog/wordpress-editor-anpassen/wordpress-tinymce-1.jpg

Mit Überschriften ist da nix.
Es ist aber sehr einfach ein Dropdown-Feld mit Formatierungen wie h1, h2, ..., p, pre, … anzeigen zu lassen. Denn der Editor TinyMCE hat im Grunde fast alle erdenklichen Schaltflächen „an Bord“. Da WordPress aber nur bestimmte erlaubt, sind Plugins etc. nicht ganz so einfach einzufügen. Denn meist blockiert WordPress die Anzeige der Schaltflächen.

Um die Überschriften freizuschalten muss man im Quellcode eine Kleinigkeit einfügen.
Die relevante Datei ist: ../wp-includes/js/tinymce/tiny_mce_gzip.php ../wp-includes/js/tinymce/tiny_mce_config.php.
Im letzten Drittel steht:

$mce_buttons = apply_filters(’mce_buttons’, array(’bold’, ‘italic’, ’strikethrough’, ’separator’, ‘bullist’, ‘numlist’, ‘outdent’, ‘indent’, ’separator’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’ ,’separator’, ‘link’, ‘unlink’, ‘image’, ‘wordpress’, ’separator’, ‘undo’, ‘redo’, ‘code’, ‘wphelp’));


Hier kann man nun Schaltflächen entfernen oder bestimmte neue hinzufügen. Das Dropdown-Menü mit den Überschriften schaltet formatselect frei.
Bei mir sieht die Leiste dann in etwa so aus:

$mce_buttons = apply_filters('mce_buttons', array('formatselect', 'separator', 'bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'separator', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'separator', 'separator', 'link', 'unlink', 'separator', 'image', 'separator', 'undo', 'redo', 'separator', 'separator', 'code', 'wphelp'));


Welche Standard-Buttons man hinzufügen kann, steht hier.

TinyMCE Anpassen

So nun findet man links ein Dropdown-Menü mit Überschriften von h1 bis h6 und anderem.
Wer nun einen Autor oder Kunden hat, dem das vielleicht verwirrt und der nur normal p und h2, h3-Überschriften benutzen soll (h1 ist ja bereits der Titel), für den muss man noch etwas anpassen.

Die relevante Datei findet man unter ../wp-includes/ js/ tinymce/ themes/ advanced/ editor_template.js.
In der ersten ganz langen Zeile sind alle Buttons mit Grafikname und Alttext (Variablen für die Sprachdatei) aufgeführt.
Nun stehen ziemlich am Anfang der langen Datei übersichtlich untereinander die relevanten Auswahlmöglichkeiten.
Die entsprechende Zeile kann dann für das Dropdown-Menü so aussehen:

var lookup = [
  ['p', 'normaler Absatz'],
  ['h2', 'Überschrift 2.Ebene'],
  ['h3', 'Überschrift 3.Ebene']
  ];

 

Das Menü von tinyMCE sieht dann so aus:

files/dateien/bilder/blog/wordpress-editor-anpassen/wordpress-tinymce-2.jpg

Für Grafiken statt align eine class vergeben

Fügt man mit TinyMCE Grafiken wie Bilder ein und will diese linksbündig oder rechts angeordnet haben, so fügt TinyMCE in den img-Tag ein align ein.
Besser wäre eine class, welche man dann per css ansprechen könnte. Dann kann man leicht Abstände etc. individuell regeln.

Erster Schritt

Zuerst muss man TinyMCE dazu bringen statt align class einzufügen, wenn Bilder positioniert werden sollen.
WP < 2.1
Die relevante Datei ist tiny_mce.js in Zeile 2467. Hier das erste align durch class ersetzen:

tinyMCE.setAttrib(this.imgElement, 'class', align);


Nun füht TinyMCE immer class="..." ein.

 

WP > 2.0
In tiny_mce.js befindet sich der relevante Abschnitt ab Zeilen 2708. Auch die Datei themes/ advanced/ jscripts/ image.js sieht nach einem Ansatzpunkt aus.
Leider konnte ich es auf die Schnelle nicht lösen. Kommentare dazu willkommen.
In zwei kompetenten Kommentaren wird das Prozedere genau erläutert. Bitte dort weiterlesen; Sicherheitskopie nicht vergessen.

Zweiter Schritt

Für Bilder macht es meines Erachtens nur Sinn, sie entweder links oder rechts zu floaten oder ihnen eine ganze Zeile einzuräumen.
TinyMCE bietet aber für Kunden viel zu viel Varianten im Auswahlfenster an.
Diese kann man eingrenzen. In der Datei ../wp-includes/ js/ tinymce/ themes/ advanced/ image.htm kürzt man im letzten Drittel die Optionenliste wie folgt:

<td nowrap="nowrap">Anordnung:</td>
<td>
  <select name="align">
    <option value="">Ganze Zeile</option>
    <option value="left">links im Textfluss</option>
    <option value="right">rechts im Textfluss</option>
  </select>
</td>

 

Nunmehr sieht das Bildfenster wie folgt aus:

files/dateien/bilder/blog/wordpress-editor-anpassen/wordpress-tinymce-3.jpg

Nun kann man in der css-Datei für img.left und img.right ganz einfach die Bilder positionieren.
Sauber.
Nun kann man das noch steigern, wenn man es für Benutzer noch eindeutiger gestalten will. Denn diese werden mit der Bilderverwaltung direkt unter dem Artikel die Grafiken in den text einfügen. Die genaue URL weiß natürlich kaum ein Autor. Dann ändert man am besten die Reihenfolge der Zeilen und färbt die URL-Zeile in passives grau.

files/dateien/bilder/blog/wordpress-editor-anpassen/editor-bilder2.jpg
Ich hoffe, TinyMCE kann das in der kommenden eingebauten Version dann von selbst.

Buttons mit deutschen Bezeichnungen für kursiv und fett

Die Buttons mit F für Fettschrift und K für kursiv gibt’s bereits. Sie liegen im Ordner ../wp-includes/ js/ tinymce/ themes/ advanced/ images/ und heißen bold_de_se.gif bzw. italic_de_se.gif.
In der Datei ../wp-includes/ js/ tinymce/ themes/ advanced/editor_template.js muss man die Platzhalter für die Grafiken (gekennzeichnet durch {…}) durch bold_de_se.gif etc. ersetzen.
Alternativ kann man auch die komplette Sprachversion ändern. Die de.js-Dateien gibt’s bei SourceForge. Aber es muss an einigen Stellen geändert werden, also Zeit einkalkulieren.

Ziate (blockquote) in TinyMCE einfügen

Die Zitatefunktion geht mit dem Tastenkürzel „alt + q“ oder dem Einzugsbutton bereits. Ja, so einfach. Nur erkennen/ wissen muss man das erstmal.
Wir haben daher den Einzugsbutton bearbeitet und ihn einfach halbiert. Das sieht im Ergebnis so aus:

files/dateien/bilder/blog/wordpress-editor-anpassen/wordpress-tinymce-4.jpg

Weiterlesen

Da es zu diesem Thema kaum hilfreiche Infos gibt, auch nicht in den einschlägigen Foren, bleiben hier nur wenige Verweise.
Expertinnen-web hat das Einfügen von formatselect kurz beschrieben.
Einen netten Dateimanager bietet MP:Blog.

Kommentare zu WordPress-Editor TinyMCE anpassen, erweitern

1. Kommentar
Wordpress-WYSIWYG-Editor TinyMCE anpassen » die Netzspielw |

[...] Robert Hartl beschreibt in seinem Netprofit News-Blog ausführlich, wie der standardmäßig in Wordpress integrierte TinyMCE-Editor an eigene Bedürfnisse angepasst werden kann. [...]

2. Kommentar
jim |

Super Artikel! Vielen Dank! Bitte mehr davon :-)

3. Kommentar
Wordpress eindeutschen » Blog Archive » TinyMCE erwe |

[...] Beim Schreiben von neuen Einträgen oder Seiten bietet Wordpress mit TinyMCE die Möglichkeit, die eigenen Texte zu formatieren (z.B. Buttons für Fett, Kursiv, Bild einfügen, ... ). (einige Browser wie Opera oder Safari scheinen die Buttons nicht darzustellen) Die Möglichkeiten sind jedoch nicht sehr umfangreich, deswegen gleich eine kleine Anleitung, um die Funktionen zu erweitern. Auf der Seite von Netprofit findet sich eine gute Anleitung, ich werde diese hier in zwei Schritten zusammenfassen. [...]

4. Kommentar
Wordpress eindeutschen » Blog Archive » TinyMCE erwe |

[...] Auf der Seite von Netprofit findet sich eine gute Anleitung, ich werde diese hier in zwei Schritten zusammenfassen. [...]

5. Kommentar
Wordpress als CMS - ein Praxisbeispiel » Netprofit |

[...] Eine wesentliche Anforderung ist, dass Autoren nach Freischaltung einfach und leicht Ihre Fachartikel einstellen können. Dazu galt es, die Seite zum Schreiben der Artikel zu vereinfachen und Erläuterungen zu bestimmten Feldern hinzuzufügen. So haben wir mit einer individuellen Sprachdatei alle Begriffe einheitlich auf Artikel geändert, per CSS alle unnötigen Zusatzfelder ausgeblendet (nur Kategorien sind sichtbar), Hinweise zur Hauptüberschift (ehemals Titel) gegeben sowie den Wordpress-Editor TinyMCE erweitert und agepasst. Dank des Wordpress-Plugins Role Manager kann man jedem Autor individuelle Rechte einräumen. In der Grundeinstellung muss der Administrator alle Artikel erst freischalten. [...]

6. Kommentar
Nils Schulte am Hülse |

Ich habe folgendes Problem: Nachdem ich einige zusätzliche Buttons und Dropdown-Menüs in die Leiste integriert habe, ist diese zu breit und ragt unter die rechtsseitigen Artikeleinstellungen. Da sich dabei der Schreibbereich ebenfalls erweitert, ist das sehr störend beim Texten. Ich habe zwar schon ein wenig gesucht, aber keine Lösung gefunden, wie ich Tiny MCE in Wordpress dazu bringe ein mehrzeiliges Buttonmenü auszuspucken. Irgendwelche Ideen?

7. Kommentar
Robert Hartl |

Klar. In der Datei wp-includes/js/tinymce/tiny_mce_gzip.php beginnt eine Zeile mit $mce_buttons_2 = apply_filters()); Wobei alles in den Klammern dann in einer zweiten Zeile (dafür steht "_2") steht. Viel Erfolg.

8. Kommentar
Nils Schulte am Hülse |

Danke, klasse Tipp! Allerdings steht bei mir: $mce_buttons_2 = apply_filters('mce_buttons_2', array()); und in die Klammer nach array habe ich dann die gewünschten Buttons für die zweite Zeile gepackt. Ich vermute mal, dass du es auch so gemeint hast. So klappt es jedenfalls wunderbar und ich kann wieder ungestört texten :) !

9. Kommentar
Robert Hartl |

Freut mich! Ja, hatte die Kalmmern auf den Buttonsteil bezogen, was durch Dein Beispiel klarer rauskommt. Danke.

10. Kommentar
Alex / Wakü Netzteil |

Hi habe dierekt ausprobiert. Danke für den Tipp!!!

11. Kommentar
Peter |

Tja, leider will das bei mir nicht so richtig. Allerdings benutze ich WP 2.1, da hat sich offensichtlich was geändert. Die Buttonliste steht nun nicht ehr in tiny_mce_gzi.php, sondern in tiny_mce_config. Wenn ich dort andere Buttons eintrage, ändert sich aber leider rein gar nichts am Editor... Hat jemand vielleicht schon Erfahrung mit der neuen WP?

12. Kommentar
Robert Hartl |

Hallo Peter, obige Lösung bezieht sich auf WP 2.0.x. Sobald die deutsche Version von WP 2.1 online ist, muss ich sowieso die Kundenseiten updaten und anpassen. Die Änderungen werde ich dann hier unverzüglich einstellen. Wenn zwischenzeitlich bereits eine Lösung gefunden wurde, bitte ich im Mitteilung. Danke.

13. Kommentar
Mathias |

Jepp, dann hier meine Mitteilung;-) Bei WP 2.1 wird die Anpassung in der tiny_mce_config.php gemacht. Aber Vorsicht! Manche Plugin-Buttons (z.B. Imagemanager, mygallery) verschwinden dann... Die eigentliche Erweiterung von TinyMCE mit zusätzlichen Buttons funktioniert so ziemlich gut. TinyMCE (in WP2.1) hat scheinbar eh eine Begrenzung nach Rechts. In der Default-Config sind doch mehr Buttons eingetragen, als standardmäßig verfügbar. Allerdings werden alle, die "überstehen" nicht mehr angezeigt. Dann wie oben am Besten eine zweite Zeile öffnen.

14. Kommentar
Homepageerstellung » Sinnvolle Wordpress Plugins - Teil 2 |

[...] zurückgreifen. Die Erweiterung und Implementierung weiterer Befehle ist mit der richtigen Anleitung auch kein Problem. Leider erzeugt TinyMCE unter bestimmten Umständen einen nicht ganz sauberen [...]

15. Kommentar
Kölner Computer Blog » Blog Archive » Wordpress Beit |

[...] Beitragseditor TinyMCE in Wordpress 2.1 kann leicht angepasst und erweitert werden - siehe Netprofit und [...]

16. Kommentar
Wordpress: überflüssige Elemente einfach ausblenden » Netp |

[...] möchte, sollte man die eher verwirrenden Kästen den Nutzern nicht anzeigen. Den Wordpress-Editor TinyMCE anpassen ist dagegen richtig [...]

17. Kommentar
Alexander Hahn |

Hallöle! Erstmal danke für das super Tutorial, das hat mir schon bei mehreren Projekten sehr geholfen! - Ich schraube grad an einem WP 2.1 Projekt und habe grad erfolglos versucht die "align" attribute für bilder in Klassen umzuwandeln... ich wäre über jeglichen Tip oder Link sehr erfreut ;-)

18. Kommentar
Robert Hartl |

Leider noch nicht, hab selbst schon lang gesucht und versucht.

19. Kommentar
del.izi.oes am 03.04.07 at kleinski // |

[...] Wordpress-Editor TinyMCE anpassen, erweitern » Netprofit - Pimp my Wordpress [...]

20. Kommentar
Conny |

Hallo, ich habe den TinyMCE in eine grössere Eingabemaske eingebunden, die gescrollt werden kann. Beim Scrollen in Firefox ist alles okay, aber beim scrollen im IE bleiben die TinyMCE Buttons an der alten Stelle und ziehen erst nach, wenn man in den TinyMCE klickt. Hat jemand eine Idee, was ich machen kann, dass es auch im IE richtig funktioniert?

21. Kommentar
Herr Honk |

Hallo, gibt es eigentlich schon eine Lösung für das "Für Grafiken statt align eine class vergeben" Problem unter WP > 2.0

22. Kommentar
CHESHiRE |

Also, ich hab eben herausgefunden, wie bei Bildern im WP-2.1-TinyMCE statt align ein class verwendet wird. Das hat aber auch eine ganze Weile gedauert. Ich beschäftige mich schon einige Zeit mit dem TinyMCE und habe auch schon zwei Tutorials zur Funktionserweiterung geschrieben (hier und hier). Diese Frage wird zwar nicht behandelt (wird sie auch nicht werden), aber ich habe mich derer trotzdem angenommen, weil Herr Honk mich ganz nett drum bat. 1. align gegen class tauschen: Die Datei editor_template.js im Verzeichnis /wp-includes/js/tinymce/themes/advanced/ muss an zwei Stellen geändert werden (Funktion "_insertImage"). Auf Zeile 1393 [WP 2.2: Zeile 1426] wird das ganze für den Safari-Browser definiert. Dazu muss einfach das align= durch class= ersetzt werden (Istgleich beachten!). Weiter unten, auf Zeile 1433 [WP 2.2: Zeile 1466] muss 'align' durch 'class' ersetzen (Hochkommas beachten, also das erste! Das zweite muss bleiben.). Damit hat man aber nur das HTML-Attribut ausgetauscht, als Attributwert steht immer noch bspw. "left" oder "right". Da es aber bestimmt keine CSS-Klasse mit diesen Namen gibt, kann man den Wert auch noch anpassen. Deswegen... 2. CSS-Klassen definieren: Dazu ist das Editieren der Datei image.htm im Verzeichnis /wp-includes/js/tinymce/themes/advanced/ von Nöten. Ziemlich in der Mitte (Zeile 54) wird die Liste mit select id="align" name="align" definiert. In den nachfolgenden Zeilen sind die Ausrichtungen definiert: überall, wo mit option eingeleitet wird, wird eine Ausrichtung definiert. Der Wert von value entspricht dabei dem entsprechenden HTML-Attributwert für align im img-Tag. Wer damit nichts anzufangen weiß, kann sich an die Aneinanderreihung in der Liste orientieren. "baseline" entspricht also "Grundlinie", "top" steht für "oben" usw. Wer noch Fragen hat, kann mir mailen (Admin dieses Blogs hier fragen), bei mir kommentieren oder einfach hier - ich werd' noch ab und zu nachschauen.

23. Kommentar
Robert Hartl |

Klasse CESHiRE! Hertlichen Dank, ich werde den Kommentar nachher auch direkt aus dem Text anlinken.

24. Kommentar
CHESHiRE |

Ich habe noch einen Nachtrag, weil ich eben eine Mail bekam, deren Verfasser wohl etwas falsch gemacht hat. Ist ja an sich nicht schlimm, aber bevor das noch mehr Leute missverstehen, mach ich's doch mal lieber genauer. Die Frage: ich denke das ich das "align" für den Safari gefunden habe, aber in der _insertImage : function(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout) { steht bei mir kein "align=" sondern halt nur ein "align" und wenn ich da dann jetzt ein "class=" reinmache wird der wysiwyg nicht mehr angezeigt. Meine Antwort: du hast da einen Fehler gemacht. So wie du es beschrieben hast, hast du den Aufruf der Funktion verändert. Das darfst du aber nicht, du musst die Funktionsweise der Funktion ändern, also das, was mit dem Parameter gemacht werden soll. Und das ist weiter unten. Und zwar wird dabei die folgende Zeile berührt: tinyMCE.setAttrib(tinyMCE.imgElement, 'align', align); Das ist wieder ein Funktionsaufruf, der bewirkt, dass im Quelltext dann dem img-Element bei dem Attribut align der Wert der Variable align zugeschrieben werden soll. Ich habe zusammengehörige Stellen mal gekennzeichnet. Also musst du das align, welches in Anführungszeichen steht, ersetzen. Denn der Wert der Variable align, der an die Funktion übergeben wird, soll ja auf ein class gelegt werden und nicht mehr auf ein align . Die Zeile sieht bei mir folgendermaßen aus: tinyMCE.setAttrib(tinyMCE.imgElement, 'class', align);

25. Kommentar
Bastian |

Was ich nicht verstehe ist, dass man eine "Bild Url" eingeben muss. Die Bilder, die ich zum Artikel hinzufügen möchte, lade ich doch erst für den Artikel hoch (über die Wordpress-Funktion "Upload"). Oder muss ich, wenn ich diese Align-Funktionen des Tiny nutzen will, Bilder per FTP uploaden und in diesen Dialog umständlich eingeben?

26. Kommentar
Robert Hartl |

Hi Bastian, der Editor ist eigenständig, die Uploadhilfe von Wordpress. Daher das etwas begrenzte Zusammenspiel. Am einfachsten: Bild per Upload hochladen und ins Textfenster ziehen. Dann Bild markieren (anklicken) und auf das Image-Symbol des Editors klicken. Ergo: Die richtige URL steht schon drin. :-)

27. Kommentar
Bastian |

Danke! Wenn ich es jetzt erreichen möchte, dass meine Bilder (links, zentriert oder rechts gesetzt) von Text umschlossen werden sollen. Wie erreiche ich das am einfachsten? Wenn ich also dieser Anleitung folge, ersetze ich align durch css-klassen. Muss ich diese Klassen dann noch selbt schreiben? Dann muss ich nämlich die Segel streichen.

28. Kommentar
Robert Hartl |

Klar, wie die aussehen, kommt aber auf Bild-Ränder und Gesamtdesign an. Bsp: img.left{ float:left; margin:5px 10px 0 0;} img.right{ float:right; margin:5px 0 0 10px;}

29. Kommentar
Bastian |

Und dann schreibe ich diese Zeilen jeweils in eine Datei right.css und links.css und wo speichere ich die ab? Also wo sucht der Tiny danach?

30. Kommentar
Robert Hartl |

Also Bastian, da gibt es eine Menge Webseiten im Netz, die genau beschreiben, wo eine CSS-Datei hinkommt und wie man diese einbinden kann. Bei Wordpress unter Theme bearbeiten, style.css, am besten ganz am Ende einfach einfügen.

31. Kommentar
Steini |

Hallo, erstmal Danke für Eure Infos. Das hilft mir alles sehr weiter. Ich habe auch versucht die Buttons einzudeutschen (wie unter "Buttons mit deutschen Bezeichnungen für kursiv und fett" beschrieben). Jedoch musste ich feststellen das dies nur im IE funktioniert. Jedoch im Firefox nicht. Weitere Browser habe ich nicht getestet. Mit der Webdev-Toolbar für den Firefox habe ich dann herrausgefunden, das zur Darstellung der Buttons per CSS die Bilddatei "buttons.gif" verwendet wird. Festgelegt wird dies in der CSS-Datei "editor_ui.css". Wenn man dort einfach in der Definition "a.mceTiledButton img" den Dateinamen für "buttons.gif" umbenennt, dann werden im Firefox viele Buttons nicht dargestellt. In der "buttons.gif" sind alle/viele Icons hintereinander dargestellt. Für die einzelnen Buttons wird vermutlich die Positon des Background-Bildes verändert. Bei meinem Bold-Icon ist das z.B. "background-position: -40px 0pt;" Ich habe aber noch nicht gefunden, wo diese Position gesetzt wird. Man könnte ja sonst einfach die deutschen Icons in die "buttons.gif" einbauen ("ranhängen") und die Position entsprechend verändern. Oder man deutsch die Icons in der "button.gif" ein. Das zur Info. Bezieht sich alles auf Wordpress 2.1.2 - Deutsche Edition.

32. Kommentar
Steini |

Hallo, Nachtrag zu meinem letzten Kommentar. Ich habe die "buttons.gif" Datei für den Firefox eingedeutscht. Findet man hier: [Link entfernt, da Seite nicht mehr vorhanden] Einfach die alte "buttons.gif" Datei im Ordner "/tinymce/themes/advanced/images" umbenennen (damit man sie nicht überspielt und damit löscht). Die "buttons_de.gif" in den gleiche Ordner kopieren und dann umbennen in "buttons.gif". Dann sind die Icons auch im Firefox deutsch - also bei Bold = Fett und Italic = Kursiv.

33. Kommentar
Rainer |

Deine Überlegungen waren sicherlich wertvoll, scheinen mir aber durch das Plugin TinyMCE Advanced vgl. http://www.vi-su.de/wordpress-plugin-tinymce-advanced/2007/05/25/ hinfällig zu sein.

34. Kommentar
Robert Hartl |

Naja nicht ganz Rainer. Wenn man sich schon den kompletten Editor TinyMCE mit den gewünschten Addons auf den Server holt (so Tiny ist das dann nicht mehr), ermöglicht dieses Plugin "nur" das beqeueme Zuschalten von Extras. Dafür sind ansonsten auch nur einzelne Zeilen zum Aktivieren und Steuern der Erweiterungen erforderlich. Hier geht es darum, den Editor anzupassen, nicht nur zu erweitern. Das Problem ist nämlich, dass unnütze Buttons nur ablenken und wichtige (wie Zitat) fehlen/ nicht erkennbar sind. Was leider nicht wirklich verbessert werden kann ist die Kommunikation zwischen Inline-Bildupload und Editor.

35. Kommentar
Herbert A. Eberth |

Hallo, ich habe eine Nachfrage zum Thema TinyMCE, und zwar was das Einfügen von Bildern angeht. Ich konnte in Deinen Erläuterungen zur Verwendung des "class"-Tags anstelle von "align" nicht nachvollziehen, ob und was denn genau in der Datei "image.htm" im Verzeichnis /wp-includes/js/tinymce/themes/advanced/ geändert werden soll. Muss ich da im Tag ebenfalls das align durch class ersetzen?

36. Kommentar
Robert Hartl |

Hallo Herbert, in der Datei bestimme ich nur, was beim Klick auf das Bildsystem zu sehen ist (option bewirkt die Auswahlmöglichkeiten). Ich denke, der Code-Ausschnitt unter Zweiter Schnitt oben zeigt das. Wenn was anderes unklar ist, bitte ich um Präzisierung der Frage.

37. Kommentar
kaiser |

Vorsicht für alle, die einen zweisprachigen, oder nativen (en) blog verwenden: keine Umlaute oder Sonderzeichen in das advanced-theme file schreiben (zB Dropdownleiste). Sonst ist alles weg. Was Abhilfe schafft. Einfach Originalfile wieder drüber schreiben. Und ja! ich hab den Fehler grad selbst gemacht ;)

38. Kommentar
kaiser |

Hello, sehr gutes Ding. Nur ein großes Problem: das 'more'-Tag ist nicht mehr hinein zu bekommen. [Anm. des Admin: Versalien lesen sich schlecht] Also funktioniert kein Template/Theme, das ohne 'the_excerpt' arbeitet mehr.... Verdammt! Hat jemand Vorschläge?

39. Kommentar
Robert Hartl |

Erstens gehen auch Themes mit excerpt, nur dass Wordpress dann automatischer nach einer bestimmten Wortanzahl abschneidet. Um dieses manuell zu beeinflussen ist das Setzen des 'more'-Tags erforderlich. Aufgrund meiner (!) obiger Lösung ist der more-Tag weg. Ganz einfach, weil ich ihn nicht benötige. Spontane Lösung: Fügen Sie in der Button-Liste bei $mce_buttons auch noch 'wordpress' in die kommaseparierte Liste mit ein. Dann sollten Sie den more-Tag wieder sehen.

40. Kommentar
kaiser |

Grüß Gott, Herr Hartl! Das war flott. Leider ist das Problem bei mir nicht so einfach, denn folgende Tags sind inkludiert, werden aber nicht angezeigt: "fullscreen", "wordpress", "wphelp" [Anm. Autor: So besser?] Haben Sie eine Idee, warum? Ich bin leider etwas ratlos... Ps. Wenn ich the_excerpt zur Ausgabe nicht drinnen hab, kann er mir nichts anzeigen.

41. Kommentar
kaiser |

Edit: , wp-page und wp-more, wie es Chesire beschreibt, funktionieren auch nicht...

42. Kommentar
Robert Hartl |

Mir ging es nur um die schwer lesbare Großschreibung, welche ich mir erlaubt habe zu korrigieren. the_excerpt(); gibt immer die gekürzte Artikelfassung aus, wohingegen the_content(); den kompletten Artikel zeigt. Eines von beiden muss vorhanden sein, sonst sieht man keinen Postinhalt. Verwendet man the_excerpt(); wird eben ein Auszug angezeigt, den man optional mit more steuern kann. Wenn mein Impuls nicht klappt, am besten eine aktuelle Version downloaden und in der Datei die Buttonbezeichnungen (unter mce_buttons) anschauen. Die Wordpress-spezifischen Tags sollten man dann in die geänderte Version übernehmen. Das müssten zumindest meinem Gedächtnis nach aber schon die obigen sein (wp-more, ...). Wenn das nicht klappt, wüsste ich momentan auch keine Lösung.

43. Kommentar
laxu » Blog Archive » Pastedate TinyMCE-Plugin |

[...] Zur Installation muss man in wp-includes/js/tinymce/tiny_mce_config.php das Plugin dem “$plugins=…”-Array hinzufügen, und die Buttons(”pastedate”, “pasteupdate”) dem “$mce_buttons=…” Array hinzufügen. Hier gibt es eine detailreichere Anleitung. [...]

44. Kommentar
Silkester erzählt » Blog Archive » Der visuelle Beit |

[...] TinyMCE für Wordpress anpassen. (Wenn auch zu spät gesehen, doch noch bemerkenswert und für zukünftige Jobs.) font, [...]

45. Kommentar
Linkdump 2007-01-14 « Data Travelers-Blog |

[...] Wordpress-Editor TinyMCE anpassen, erweitern - nervt ganz gewaltig, dass Kollegen immer motzen, dass man die Ausrichtung von Bildern nicht ändern könne u.ä. [...]

46. Kommentar
kaepten’s log » TinyMCE - Worpress Editor erweitern |

[...] https://www.netprofit.de/blog/wordpress-tinymce-editor-anpassen-erweitern/trackback/ http://bueltge.de/wordpress-editor-tinymce-noch-umfangreicher-erweitern/415/ http://mitra.ch/?p=153 [...]

47. Kommentar
Texteditor zum Verfassen von Blogs | Blogging, Internet und Webp |

[...] hat ein Blogger-Kollege auf seinem Blog ausführlich gepostet. Dieser Editor soll ab der WP-Version 2.2 kompatibel sein und noch mehr [...]

48. Kommentar
tsedeke |

Der Link der möglichen Butons (reference Buttons) ist umgezogen. Die neue Referenzlink liegt hier: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

49. Kommentar
Wordpress TinyMCE Editor um Styles erweitern at darmstädterFiltr |

[...] Ausführlicher Artikel zur Erweiterung des Editors, vor allem in älteren Wordpress Versionen Übersicht aller TinyMCE Default-Buttons und Plugins die zur Erweiterung zur Verfügung stehen Als Lesezeichen sichern Hide Sites « Blank-Page problem with CodeIgniter framework [...]

50. Kommentar
Wordpress: überflüssige Elemente einfach ausblenden |

[...] abgelenkt, da diese nicht mit den meist überflüssigen Begriffen konfrontiert werden. Den Wordpress-Editor TinyMCE anpassen ist dagegen richtig [...]

51. Kommentar
Wordpress als CMS |

[...] (nur Kategorien sind sichtbar), Hinweise zur Hauptüberschift (ehemals Titel) gegeben sowie den Wordpress-Editor TinyMCE erweitert und agepasst. Dank des Wordpress-Plugins Role Manager kann man jedem Autor individuelle Rechte einräumen. [...]

* Diese Felder bitte ausfüllen.

Kommentare werden erst nach manueller Freischaltung sichtbar. Die übermittelten Daten werden entsprechend der Datenschutzerklärung zur Verarbeitung des Kommentars gespeichert.

Bitte rechnen Sie 3 plus 8.
zurück zu Übersicht
Suche