WordPress-Editor TinyMCE anpassen, erweitern

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?

Nils Schulte am Hülse →
Kommentar 2
9. Dezember 2006 um 19:20 Uhr

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 🙂 !

Nils Schulte am Hülse →
Kommentar 4
10. Dezember 2006 um 17:31 Uhr

Hi

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

Alex / Wakü Netzteil →
Kommentar 6
5. Januar 2007 um 15:13 Uhr

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.

Robert Hartl →
Kommentar 8
27. Januar 2007 um 20:40 Uhr

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 😉

Alexander Hahn →
Kommentar 10
25. März 2007 um 22:05 Uhr

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?

Conny
Kommentar 12
12. April 2007 um 09:59 Uhr

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.

CHESHiRE →
Kommentar 14
18. April 2007 um 00:15 Uhr

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

CHESHiRE →
Kommentar 16
18. April 2007 um 16:43 Uhr

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

Robert Hartl →
Kommentar 18
29. Mai 2007 um 23:57 Uhr

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;}


Robert Hartl →
Kommentar 20
30. Mai 2007 um 17:38 Uhr

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.

Robert Hartl →
Kommentar 22
30. Mai 2007 um 20:22 Uhr

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.

Steini →
Kommentar 24
9. Juni 2007 um 11:19 Uhr

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.

Robert Hartl →
Kommentar 26
5. Juli 2007 um 12:01 Uhr

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.

Robert Hartl →
Kommentar 28
2. September 2007 um 20:34 Uhr

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?

kaiser
Kommentar 30
28. September 2007 um 15:27 Uhr

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.

kaiser
Kommentar 32
28. September 2007 um 16:46 Uhr

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.

Robert Hartl →
Kommentar 34
28. September 2007 um 17:13 Uhr