kick-image

Je mehr wir den Texteditor “TinyMCE” in unseren Projekten einsetzen, desto mehr wächst er uns ans Herz – so umfangreich und flexibel ist dieser anpassbar. Darum verwenden wir ihn auch bei unserem hauseigenen Content Management System.

Diesmal war die Kunden- Anfrage folgende: in einem Redaktions- System soll am Ende jedes Beitrages der jeweilige Autor in dieser Art und Weise vorgestellt werden:

Hier jedesmal Foto und Beschreibung manuell einzupflegen sollte vermieden werden, auch wechseln häufig die Autoren. Ein diesbezüglicher Automatismus war in dieser Software nicht vorgesehen, was also tun?

Da der TinyMCE bereits integriert war bot sich dieser zur Lösung regelrecht an, und hierbei die Funktion “Vorgefertigte Vorlageninhalte einfügen / Insert predefined template content”.

Und so war unsere Vorgehensweise (Texte und Adressen sind nat. nur Beispiele bzw. Dummies):

1) Inhalt erstellen:

Wir erstellen eine HTML- Datei namens “autor_nachname.html” mit folgendem Inhalt:
Autor: <b>Vorname Nachname</b><br />
E- Mail: <a href="mailto:name@example.org">name@example.org</a><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
Dies ist der HTML- Code (formatiert mit CSS) welcher später eingefügt wird und obige Ansicht erzeugt – Head, Body & Co sind also nicht nötig.

2) Settings für den Texteditor anpassen:

Diese Settings bestimmen Aussehen und Funktion des Texteditors. Je nach verwendeter Software sind diese zentral gespeichert oder in den Head der Datei eingebunden.

Für die neue Funktion benötigen wir die Plugin- Definition “template” (1) (das Plugin selber wird von TinyMCE mitgeliefert), die Einbindung des passenden Buttons in die Buttonleiste namens “template” (2) sowie die Information zum Speicherort der “Snippet- Liste” (3). Letztere wird im nächsten Schritt erstellt.

3) Auflistung der Snippets:

Diese Datei beinhaltet die Auflistung aller Snippets inkl. Beschreibung und Adresse und wird unter dem Namen “template_list.js” wie im Schritt 2) Punkt (3) vermerkt gespeichert.
(1) Kurzbezeichnung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) in der Dropdown- Auswahl “Template” angezeigt.
(2) Url des Snippets (die HTML- Datei aus Schritt 1)), relativ zum Dokument welches den Texteditor enthält.
(3) Beschreibung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) als “Description” angezeigt.
(4) jede Zeile wird mit einem Beistrich abgeschlossen, nicht aber die letzte Zeile!

Der genaue Code zum Kopieren und Umschreiben:
var tinyMCETemplateList = [
["Autor Nachname", "customized/autor_nachname.html", "Autorenbeschreibung Vorname Nachname"],
["Autor Nachname 2", "customized/autor_nachname_2.html", "Autorenbeschreibung Vorname Nachname 2"]
];

Fertig!

Und so sieht es dann im Administrationsformular aus:

Der markierte neue Button öffnet folgendes Popup- Fenster:

Im Dropdown “Template” wählt nun der Admin die passende Autoren- Beschreibung aus. Sofort wird diese in das “Preview”- Fenster geladen und die “Description” wird angezeigt.

Nach Klick auf “Insert” schließt sich dieses Fenster und der vordefinierte Inhalt befindet sich im Textfeld des Admin- Formulares und kann mit den restlichen Inhalten gespeichert werden.

• Freitag, 10.07.2009, 10:58 Uhr
• Trackback-URL
• Permalink
• Tags: TinyMCE
• Kommentar schreiben

TinyMCE, der Texteditor den wir u.a. auch in unserem CMS verwenden entpuppt sich immer mehr zum Alleskönner. Und immer mehr Erfahrung sammeln wir bei diversen Anpassungen.

Diesmal war die Anfrage, die Auswahl der “Schriftarten”, welche dem Administrator zum Formatieren von Texten zur Verfügung stehen, zu reduzieren.

Im Standard- Downloadpaket des Texteditors sind viel zu viele und auch eher exotische Schriftarten eingebunden. Abgesehen von der Unübersichtlichkeit führt dies mit Sicherheit zu “Mißbrauch” – was angeboten wird wird über kurz oder lang auch genutzt, und so manche gut gemachte Website würde zur typografischen Spielwiese des Admin werden…

Dank des sehr ausführlichen Wiki bei TinyMCE wurde hierfür auch schnell die Lösung gefunden: “theme_advanced_fonts”.

Diese Angaben kommen in die JavaScript- Datei, in der das Aussehen bzw. die Funktionsbestückung des Text- Editors geregelt wird. Dies hat den Vorteil das man bei Updates ev. vorgenommene Änderungen in den Hauptdateien nicht wieder überschreibt.

Kongret ist hier folgende Anweisung zu schreiben:
theme_advanced_fonts: "Arial=arial,helvetica,sans-serif; Comic Sans MS=comic sans ms,arial,helvetica,sans-serif;",

Zur Erklärung: vor dem “=” steht die Bezeichnung die im Texteditor zu sehen ist. Nach dem “=” die Schriftarten in der Reihenfolge, wie sie vom Browser verwendet werden soll – gleich wie bei CSS- Anweisungen.

Das wars schon wieder, mehr ist nicht zu machen!

Ähnliches ist auch bei der Schriftgröße möglich:
Standardgemäß wird bei der Auswahl der Schriftgröße die Einheit “pt” verwendet, der Editor schreibt aber z.B.:
<p style="font-size: large;">Text</p>

Um dies Anzupassen genügt folgende Zeile:
theme_advanced_font_sizes : "xx-small=1, x-small=2, small=3, medium=4, large=5, x-large=6, xx-large=7",

Vor dem “=” steht wieder der Text der zur Auswahl dient, danach die Größe.

Wieder ein weiterer Schritt zu mehr Übersichtlichkeit – “reduce to the max” ;-)

• Freitag, 06.03.2009, 15:35 Uhr
• Trackback-URL
• Permalink
• Tags: TinyMCE
• Kommentar schreiben

Der Open Source WYSIWYG- Texteditor “TinyMCE” (http://tinymce.moxiecode.com) kommt bei unseren Projekten immer öfter zum Einsatz – und dementsprechend speziell werden so manche Anwendungsfälle.

Aktuell war eine Formatierungserleichterung von Sonder- Textformaten gefragt: verschiedene Textpassagen sollen rot hinterlegt sein, der Text soll fett, weiß und größer als der restliche Text sein.

Hier war die Drop-Down Auswahl “Format” (im englischen “Styles”) genau richtig!

In dieser Auswahl sind vorgefertigte CSS- Formatierungen zu finden, welche in einer speziellen CSS- Datei hinterlegt sind – somit läßt sich beinahe jede Formatierung schnell hereinladen. Die CSS- Formate müssen als Klasse angelegt werden und werden autom. dem umgebenden Element zugewiesen bzw. ein <span> mit dieser Klasse wird generiert.

Einbinden läßt sich diese Auswahl sehr einfach in den “Settings- Angaben” (tinyMCE.init):

1. Angabe der CSS- Datei mit den Sonderformatierungen:
   content_css:”spezielle_formate.css”,
2. Einfügen der “Drop-Down Auswahl”, z.B.:
   theme_advanced_buttons1 : “bold,…,styleselect“,

In o.g. Fall stand in der speziellen CSS- Datei u.a.:

.rot_hinterlegt {
background:#c00;
color:#fff;
font-weight:bold;
font-size:1.3em;
}

Der Klassename “rot_hinterlegt” ist in der Format- Auswahl zu finden, eine damit bedachte Textstelle schaut z.B. so aus:

<p>Dies ist <span class="rot_hinterlegt">rot hinterlegter Text</span></p>

Dies zeigt einen weiteren Vorteil dieser Anwendung: es wird eine Klasse zugewiesen und keine Inline- CSS- Anweisungen geschrieben. Soll z.B. das rot später einmal dunkler werden ist nur die Änderung der CSS- Datei nötig (”Trennung von Layout und Inhalt”).

Alles in allem ein sehr praktischer Text- Editor mit einem einzigen Nachteil: er ist mittlerweile schon so umfangreich und mächtig das eine gewisse Ladezeit einkalkuliert werden muss. In Zeiten von immer schnellerem Breitband- Internet sollte dies aber nicht mehr so ins Gewicht fallen…

• Freitag, 20.06.2008, 17:21 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, TinyMCE
• Kommentare lesen/schreiben

Deckt der im Standard-Paket von WordPress enthaltene Editor “TinyMCE” viele der im täglichen Gebrauch mit WP benötigten Funktionen ab, so fehlt doch manches Entscheidende…

Was uns speziell dabei sehr abgeht ist der sog. “Fullscreen”- Modus, welcher das Textfeld auf Browsergröße vergrößert – perfekt für längere Beiträge.

Abhilfe bringt hier – wie so oft – ein passendes Plugin: “TinyMCE advanced von Laptop Tips”
Dieses Plugin bringt noch weitere Funktionen mit, einfach mal ausprobieren lohnt sich.

Wer nicht schon wieder ein Plugin installieren möchte muß etwas im Backend schrauben (siehe auch die Beiträge auf bueltge.de: WordPress WYSIWYG-Editor TinyMCE erweitern und WordPress Editor TinyMCE noch umfangreicher erweitern).

Der “Fullscreen”-Modus kommt hier nicht vor, daher hier unser kleines Tutorial:

1. Editieren der “tiny_mce_config.php”

Diese Datei ist zu finden unter “\wp-includes\js\tinymce”.

Hier die Zeile:
$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress');
suchen und erweitern auf:
$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'fullscreen');

Drei Zeilen darunter finden wir:
$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', ...
Hier kommt noch ‘fullscreen’ an beliebiger Stele dazu, z.B.:
$mce_buttons = apply_filters('mce_buttons', array('fullscreen', 'bold', 'italic', 'strikethrough', ...

2. Down- bzw. Upload des TinyMCE-Plugins “fullscreen”

Nun benötigen wir noch das eigentliche Plugin für den Fullscreen-Modus.

Dieses ist im WordPress-Paket leider nicht enthalten, also auf zur TinyMCE-Downloadseite.
Dort das “Main-Package” runterladen und den Ordner “fullscreen” suchen (”\tinymce\jscripts\tiny_mce\plugins”). Diesen Ordner noch in den WP-Ordner hochladen (”\wp-includes\js\tinymce\plugins”) und der Fullscreen-Modus ist verfügbar (Klick auf das “Monitor”-Symbol).

Die soeben runtergeladenen Plugin-Ordner ermöglichen noch viele praktische Erweiterungen des Texteditors. Diesbezügliche Beschreibungen im Wiki von TinyMCE.

• Montag, 04.02.2008, 11:55 Uhr
• Trackback-URL
• Permalink
• Tags: TinyMCE, WordPress
• Kommentare lesen/schreiben