WordPress-Editor TinyMCE anpassen, erweitern
Startseite BlogOptimierung, WordPressWordPress-Editor TinyMCE anpassen, erweitern

WordPress-Editor TinyMCE anpassen, erweitern

11. Juli 2006 — Optimierung WordPress
Wordpress-Editor TinyMCE anpassen, erweitern

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:
Wordpress TinyMCE anpassen

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:
WordPress Editor anpassen

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:
Wordpress Editor TinyMCE

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.
TinyMCE-Editor Bilder einfügen bearbeiten
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:

Wordpress Editor TinMCE

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.

NETPROFIT Blog

Im Blog schreibt         über CMS, SEO & Webdesign. Kontakt →

Kategorien

Trackback-URL: http://blog.netprofit.de/wordpress-tinymce-editor-anpassen-erweitern.html/trackback

35 Kommentare zu WordPress-Editor TinyMCE anpassen, erweitern

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

Gravatar von jim - via garvatar.org jim
Kommentar 1
18. August 2006 um 13:02 Uhr

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?

Gravatar von Nils Schulte am Hülse - via garvatar.org Nils Schulte am Hülse →
Kommentar 2
9. Dezember 2006 um 19:20 Uhr

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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 3
9. Dezember 2006 um 22:36 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 :) !

Gravatar von Nils Schulte am Hülse - via garvatar.org Nils Schulte am Hülse →
Kommentar 4
10. Dezember 2006 um 17:31 Uhr

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

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 5
10. Dezember 2006 um 19:39 Uhr

Hi

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

Gravatar von Alex  / Wakü Netzteil - via garvatar.org Alex / Wakü Netzteil →
Kommentar 6
5. Januar 2007 um 15:13 Uhr

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?

Gravatar von Peter - via garvatar.org Peter
Kommentar 7
27. Januar 2007 um 18:52 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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 8
27. Januar 2007 um 20:40 Uhr

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.

Gravatar von Mathias - via garvatar.org Mathias →
Kommentar 9
31. Januar 2007 um 06:56 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 ;-)

Gravatar von Alexander Hahn - via garvatar.org Alexander Hahn →
Kommentar 10
25. März 2007 um 22:05 Uhr

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

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 11
25. März 2007 um 22:26 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?

Gravatar von Conny - via garvatar.org Conny
Kommentar 12
12. April 2007 um 09:59 Uhr

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

Gravatar von Herr Honk - via garvatar.org Herr Honk
Kommentar 13
17. April 2007 um 11:15 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.

Gravatar von CHESHiRE - via garvatar.org CHESHiRE →
Kommentar 14
18. April 2007 um 00:15 Uhr

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

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 15
18. April 2007 um 14:44 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);

Gravatar von CHESHiRE - via garvatar.org CHESHiRE →
Kommentar 16
18. April 2007 um 16:43 Uhr

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?

Gravatar von Bastian - via garvatar.org Bastian
Kommentar 17
29. Mai 2007 um 18:16 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. :-)

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 18
29. Mai 2007 um 23:57 Uhr

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.

Gravatar von Bastian - via garvatar.org Bastian
Kommentar 19
30. Mai 2007 um 17:25 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;}

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 20
30. Mai 2007 um 17:38 Uhr

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?

Gravatar von Bastian - via garvatar.org Bastian
Kommentar 21
30. Mai 2007 um 18:01 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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 22
30. Mai 2007 um 20:22 Uhr

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.

Gravatar von Steini - via garvatar.org Steini →
Kommentar 23
9. Juni 2007 um 11:01 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.

Gravatar von Steini - via garvatar.org Steini →
Kommentar 24
9. Juni 2007 um 11:19 Uhr

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.

Gravatar von Rainer - via garvatar.org Rainer →
Kommentar 25
5. Juli 2007 um 09:11 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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 26
5. Juli 2007 um 12:01 Uhr

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?

Gravatar von Herbert A. Eberth - via garvatar.org Herbert A. Eberth →
Kommentar 27
2. September 2007 um 15:54 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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 28
2. September 2007 um 20:34 Uhr

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

Gravatar von kaiser - via garvatar.org kaiser
Kommentar 29
20. September 2007 um 02:38 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?

Gravatar von kaiser - via garvatar.org kaiser
Kommentar 30
28. September 2007 um 15:27 Uhr

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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 31
28. September 2007 um 15:49 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.

Gravatar von kaiser - via garvatar.org kaiser
Kommentar 32
28. September 2007 um 16:46 Uhr

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

Gravatar von kaiser - via garvatar.org kaiser
Kommentar 33
28. September 2007 um 17:03 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.

Gravatar von Robert Hartl - via garvatar.org Robert Hartl →
Kommentar 34
28. September 2007 um 17:13 Uhr

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

Gravatar von tsedeke - via garvatar.org tsedeke →
Kommentar 35
28. Juli 2008 um 23:22 Uhr

Kommentar schreiben zu WordPress-Editor TinyMCE anpassen, erweitern

Kommentare werden erst nach manueller Freischaltung sichtbar.

Kommentar

KommentatorIn

(erforderlich)

(erforderlich, wird nicht angezeigt)

(optional)

Theresienstraße 28
D-94032 Passau

Tel.: +49 (0)851/ 966 31-31
Fax: +49 (0)851/ 966 31-41
E-Mail:

©  2001 − 2014  NETPROFIT  | Kontakt | AGB | Impressum