Wordpress-Editor TinyMCE anpassen, erweitern
Stichwörter: anleitung, optimierung, wordpress
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.
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:
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:
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:
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.
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:
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.
Wesentliches zu Webdesign und Webseitenoptimierung:
zuletzt aktualisiert am
Mittwoch, den 20. August 2008.
Pingback | 13. Juli 2006 um 12:58 | individueller Pingback-Link
[…] 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. […]
Pingback | 9. August 2006 um 15:01 | individueller Pingback-Link
[…] clicky […]
Pingback | 13. August 2006 um 18:26 | individueller Pingback-Link
[…] Hier kann man nur Schaltflächen entfernen, die Reihenfolge verändern oder neue hinzufügen. Eine Liste aller Möglichkeiten gibt es übrigens hier. Weitere Informationen und Tipps gibt es auch hier. […]
Kommentar | 18. August 2006 um 13:02 | individueller Kommentar-Link
Super Artikel! Vielen Dank! Bitte mehr davon
Pingback | 3. September 2006 um 09:06 | individueller Pingback-Link
[…] Den Editor kann man bequem dahingehend anpassen (siehe Anleitung). […]
Pingback | 22. September 2006 um 20:28 | individueller Pingback-Link
[…] 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. […]
Pingback | 25. September 2006 um 00:30 | individueller Pingback-Link
[…] Auf der Seite von Netprofit findet sich eine gute Anleitung, ich werde diese hier in zwei Schritten zusammenfassen. […]
Pingback | 19. Oktober 2006 um 21:15 | individueller Pingback-Link
[…] 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. […]
Pingback | 28. Oktober 2006 um 14:39 | individueller Pingback-Link
[…] Beim Surfen gefunden:Wordpress-Editor TinyMCE anpassen, erweitern […]
Kommentar | 9. Dezember 2006 um 19:20 | individueller Kommentar-Link
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?
Kommentar | 9. Dezember 2006 um 22:36 | individueller Kommentar-Link
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.
Kommentar | 10. Dezember 2006 um 17:31 | individueller Kommentar-Link
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
!
Kommentar | 10. Dezember 2006 um 19:39 | individueller Kommentar-Link
Freut mich! Ja, hatte die Kalmmern auf den Buttonsteil bezogen, was durch Dein Beispiel klarer rauskommt. Danke.
Kommentar | 5. Januar 2007 um 15:13 | individueller Kommentar-Link
Hi
habe dierekt ausprobiert. Danke für den Tipp!!!
Pingback | 21. Januar 2007 um 02:16 | individueller Pingback-Link
[…] Bei mir hat diese Lösung geklappt, ich hoffe bei anderen auch. Ach übrigens: Wer den bei Wordpress relativ spärlich ausgestatteten TinyMCE mit Funktionen erweitern will, der kann dies gerne tun. Robert Hartl beschreibt die nötigen Schritte ausführlich in einer wundervollen Anleitung. […]
Kommentar | 27. Januar 2007 um 18:52 | individueller Kommentar-Link
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?
Kommentar | 27. Januar 2007 um 20:40 | individueller Kommentar-Link
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.
Kommentar | 31. Januar 2007 um 06:56 | individueller Kommentar-Link
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.
Pingback | 2. Februar 2007 um 16:40 | individueller Pingback-Link
[…] Wordpress-Editor TinyMCE anpassen, erweitern […]
Pingback | 3. Februar 2007 um 20:53 | individueller Pingback-Link
[…] 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 […]
Pingback | 6. Februar 2007 um 13:32 | individueller Pingback-Link
[…] Anpassung längst nicht zu Ende. Wie man die Buttonleiste erweitern kann, findet ihr in diesem Blogbeitrag von Netprofit. Aber Achtung: die Anleitung dort bezieht sich auf WP 2.0.x. In der neuesten Version wird nicht die […]
Pingback | 6. Februar 2007 um 14:31 | individueller Pingback-Link
[…] Wordpress-Editor TinyMCE anpassen, erweitern […]
Pingback | 14. Februar 2007 um 23:28 | individueller Pingback-Link
[…] Beitragseditor in WP 2.0/2.1 kann leicht angepasst und erweitert werden - siehe Netprofit und […]
Pingback | 15. Februar 2007 um 16:04 | individueller Pingback-Link
[…] Beitragseditor TinyMCE in Wordpress 2.1 kann leicht angepasst und erweitert werden - siehe Netprofit und […]
Pingback | 5. März 2007 um 00:15 | individueller Pingback-Link
[…] möchte, sollte man die eher verwirrenden Kästen den Nutzern nicht anzeigen. Den Wordpress-Editor TinyMCE anpassen ist dagegen richtig […]
Kommentar | 25. März 2007 um 22:05 | individueller Kommentar-Link
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
Kommentar | 25. März 2007 um 22:26 | individueller Kommentar-Link
Leider noch nicht, hab selbst schon lang gesucht und versucht.
Pingback | 4. April 2007 um 02:38 | individueller Pingback-Link
[…] Wordpress-Editor TinyMCE anpassen, erweitern » Netprofit - Pimp my Wordpress […]
Kommentar | 12. April 2007 um 09:59 | individueller Kommentar-Link
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?
Kommentar | 17. April 2007 um 11:15 | individueller Kommentar-Link
Hallo,
gibt es eigentlich schon eine Lösung für das “Für Grafiken statt align eine class vergeben” Problem unter WP > 2.0
Kommentar | 18. April 2007 um 00:15 | individueller Kommentar-Link
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.
Kommentar | 18. April 2007 um 14:44 | individueller Kommentar-Link
Klasse CESHiRE!
Hertlichen Dank, ich werde den Kommentar nachher auch direkt aus dem Text anlinken.
Kommentar | 18. April 2007 um 16:43 | individueller Kommentar-Link
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);
Pingback | 28. April 2007 um 08:36 | individueller Pingback-Link
[…] fand ich eine Lösung. Die wird hier jedoch nicht erläutert, weil ich das schon in einem anderen Blog (der sich damit beschäftigt hat, aber für WP 2.1 keine Lösung parat hatte) mittels […]
Pingback | 28. April 2007 um 08:37 | individueller Pingback-Link
[…] fand ich eine Lösung. Die wird hier jedoch nicht erläutert, weil ich das schon in einem anderen Blog (der sich damit beschäftigt hat, aber für WP 2.1 keine Lösung parat hatte) mittels […]
Kommentar | 29. Mai 2007 um 18:16 | individueller Kommentar-Link
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?
Kommentar | 29. Mai 2007 um 23:57 | individueller Kommentar-Link
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.
Kommentar | 30. Mai 2007 um 17:25 | individueller Kommentar-Link
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.
Kommentar | 30. Mai 2007 um 17:38 | individueller Kommentar-Link
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;}
Kommentar | 30. Mai 2007 um 18:01 | individueller Kommentar-Link
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?
Kommentar | 30. Mai 2007 um 20:22 | individueller Kommentar-Link
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.
Kommentar | 9. Juni 2007 um 11:01 | individueller Kommentar-Link
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.
Kommentar | 9. Juni 2007 um 11:19 | individueller Kommentar-Link
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.
Pingback | 22. Juni 2007 um 14:17 | individueller Pingback-Link
[…] mehr Infos benötigt und sich am liebsten seine Symbolleisten aus Word nachbauen würde findet bei Netprofit und bei nCHESHIRE ützliche […]
Kommentar | 5. Juli 2007 um 09:11 | individueller Kommentar-Link
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.
Kommentar | 5. Juli 2007 um 12:01 | individueller Kommentar-Link
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.
Kommentar | 2. September 2007 um 15:54 | individueller Kommentar-Link
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?
Kommentar | 2. September 2007 um 20:34 | individueller Kommentar-Link
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.
Kommentar | 20. September 2007 um 02:38 | individueller Kommentar-Link
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
Kommentar | 28. September 2007 um 15:27 | individueller Kommentar-Link
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?
Kommentar | 28. September 2007 um 15:49 | individueller Kommentar-Link
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.
Kommentar | 28. September 2007 um 16:46 | individueller Kommentar-Link
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.
Kommentar | 28. September 2007 um 17:03 | individueller Kommentar-Link
Edit: , wp-page und wp-more, wie es Chesire beschreibt, funktionieren auch nicht…
Kommentar | 28. September 2007 um 17:13 | individueller Kommentar-Link
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.
Pingback | 13. November 2007 um 18:18 | individueller Pingback-Link
[…] 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. […]
Pingback | 11. Dezember 2007 um 19:49 | individueller Pingback-Link
[…] TinyMCE für Wordpress anpassen. (Wenn auch zu spät gesehen, doch noch bemerkenswert und für zukünftige Jobs.) font, […]
Pingback | 14. Januar 2008 um 22:09 | individueller Pingback-Link
[…] Wordpress-Editor TinyMCE anpassen, erweitern - nervt ganz gewaltig, dass Kollegen immer motzen, dass man die Ausrichtung von Bildern nicht ändern könne u.ä. […]
Pingback | 8. Februar 2008 um 12:22 | individueller Pingback-Link
[…] http://blog.suchmaschinen-optimierungen.info/wordpress-tinymce-editor-anpassen-erweitern/trackback/ http://bueltge.de/wordpress-editor-tinymce-noch-umfangreicher-erweitern/415/ http://mitra.ch/?p=153 […]
Pingback | 22. April 2008 um 06:26 | individueller Pingback-Link
[…] hat ein Blogger-Kollege auf seinem Blog ausführlich gepostet. Dieser Editor soll ab der WP-Version 2.2 kompatibel sein und noch mehr […]
Kommentar | 28. Juli 2008 um 23:22 | individueller Kommentar-Link
Der Link der möglichen Butons (reference Buttons) ist umgezogen.
Die neue Referenzlink liegt hier: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference