Code Styling Project

It’s not a bug, it’s always a feature.
  • Deutsch
  • English
  • rss
  • Home
  • Blog
  • Impressum
  • Entwicklungen
  • Fehlerbehebungen
  • Anleitungen

TinyMCE - Schreiben mit Theme basiertem Stylesheet

codestyling | 11. Juni 2008 | 14:54

Der Editor von Moxiecode Systems AB TinyMCE, der als visueller Editor in WordPress verwendet wird, kann weit mehr, als standardmäßig eingeschaltet ist. Viele Erweiterungen lassen sich bereits durch Advanced TinyMCE Plugin freischalten, jedoch wird nicht immer das eigene, zum Theme passended Stylesheet im visuellen Editor verwendet. Wenn man ein WordPress als Auftragsarbeit für jemanden anderes einrichtet und betreut, der dann nur schreiben soll, kann man keine Kenntnisse in CSS und/oder HTML voraussetzen.

Deshalb ist es sinnvoll, wenn man ein wenig mehr Komfort bereitstellt und die Auswahl an Formatierungsmöglichkeiten für den Benutzer erweitert und vereinfacht. Ich habe ein Theme aktiv, das mir diese Möglichkeit frei Haus liefert, weil es eingebaut wurde. Ich habe nun dieses Feature als kleines Plugin herausgenommen und stelle das hier mal zu Download zur Verfügung.

Feature Demonstration

Im nebenstehenden Beispiel Screenshot ist exemplarisch gezeigt, was man dann im Editor erwarten kann. Der Editor bekommt eine neue Dropdown Liste, in der sich alle Klassen Stile der entsprechenden Datei befinden, die darin definiert wurden. Auf die Beschriftung hat man nur in sofern Einfluss, als das man die Klassennamen in der CSS Datei dann deutsch angeben muß, wenn man für deutsche Benutzer das bereitstellen will. Es wird immer 1:1 der Klassenname angezeigt, da hat man keinen Einfluß drauf, ist so im Editor codiert. Wie bekomme ich aber nun mein Stylesheet da rein ?

Voraussetzungen

Das Plugin ist mit WordPress 2.5.x getestet und wird auch erst ab dieser Version sauber funktionieren. Für ältere WordPress Versionen kann ich keine Garantie geben und befürchte, dass dieses Interface dort noch nicht (oder anders) bereitgestellt ist.

Weiterhin benötigt man eine neue Stylesheet Datei im aktuellen Theme Ordner, die in den visuellen Editor integriert werden soll. Der Dateiname wurde im Plugin als Konstante definiert und lautet: tinymce_blog_themed.css Wer das gern ändern möchte, kann das machen, ist aber sowieso nur für das Backend. In dieser Stylesheet Datei wird all das definiert, was man im Editor als Formatierungen haben möchte. Klassen werden in die Dropdown Liste aufgenommen und die Element Styles sorgen dafür, dass man auch korrekt Voransichten von z.B.: Bildern (Rahmen, Abstände etc.) bekommt. Man kann sich da frei entfalten.
Diese Datei ist nur für den visuellen Editor nötig. Es sollten also nur die wichtigen Styles enthalten sein, die ein Autor brauchen kann, einen Background oder Seitenstyle empfiehlt sich daher nicht. Diese Datei braucht man dann also nicht im Blog mit anzugeben. Wer allerdings sein style.css um einen Import erweitert: @import “tinymce_blog_themed.css”; kann das natürlich dann nur einmal definieren und im Theme Styleheet referenzieren.

Installation

Das Downloadpaket enthält 3 Dateien:

  1. tinymce-blog-themed-stylesheet.php (Plugin)
  2. tinymce_blog_themed.css (Style Demo wie im Screenshot)
  3. Demonstrations - Screenshot

Das Plugin (PHP Datei) bitte direkt in den Plugin Ordner uploaden (/wp-content/plugins/) und die Stylesheet Datei in den Ordner des aktuellen Themes. Man kann auch gleich mit eigener Stylesheet Datei beginnen, dann braucht man nur das Plugin.
Im Adminbereich kann man dann das Plugin einfach aktivieren, und es steht zur Verfügung. Es gibt keine weitere Konfiguration oder Administrationsseite, funktioniert sofort. Das Plugin prüft aber sicherheitshalber die Existenz der zu integrierenden Stylesheet Datei beim Aufruf des Editors. Sollte diese nicht vorhanden sein, wird auch keine Dropdown Liste bereitgestellt.

WP 2.5+ Plugin: blog-theme-stylesheet-v1.0.0.0.zip

Hinweis

Falls es Probleme gibt, dass der Editor entweder verschwindet oder aber die Dropdown Liste nicht erscheint, liegt das möglicherweise am Cache des Editors und ggf. des Browsers. Den Editor Cache kann du auf deiner Domain löschen, in dem du im Order wp-content\uploads\js_cache alle Dateien löschst. Dann stellt TinyMCE den Cache neu her beim nächsten Aufruf. Und wie man den Browsercache löscht, sollte jeder wissen, wie es geht. Diese beiden Aktionen sind nicht immer nötig, meist sollte das auch so gehen. Nur im Falle, es versagt, bitte erst dies hier ausprobieren.

Kategorien
Deutsch, WordPress (DE)
RSS Kommentare
RSS Kommentare

« Hierarchische Kommentare mit WordPress WordPress Sprachdateien erzeugen Fehler in gettext.php »

12 Antworten    Schreib einen Kommentar

Frau Braun

Frau Braun

12.06.2008 | 15:54

Tolles Plugin, endlich volle Formatkontrolle, vielen Dank! Danke auch für die Hilfe im Wordpress-Forum. Wenn alle Styles in der style.css bleiben, klappt alles wunderbar. Wenn ich die Import-Anweisung verwende, funktioniert das bei mir noch nicht, muss aber auch nicht unbedingt sein.

Herzlichst
Frau Braun

Antworten »

Horst Schulte

Horst Schulte

14.06.2008 | 14:49

Vielen Dank für dieses Plugin. Klappt sehr gut. Ich habe es zufällig im Wordpress Forum entdeckt und auch gleich ein bisschen Werbung dafür gemacht.

Antworten »

Daishi

Daishi

21.06.2008 | 17:00

Ahhhh, sehr interessant :D.
Das schau ich mir doch gleich an, vielen Dank! :D

Antworten »

Loisl

Loisl

07.08.2008 | 03:23

Vieeeeelen lieben Dank …..

eins der Wenigen PlugIns die ich Überhaupt einsetze aber dafür ist es um Klassen genialer.
Endlich schnell und einfach Texte Formatiert.
Ich hatte nur noch einige Probleme mit dem “body” in der “tinymce_blog_themed.css” ->> hat mir nach dem import (logischerweise) den “body” meiner Theme überschreiben und somit war mein ganzes Theme dahin ;-)

nochmals besten Dank und lg loisl

Antworten »

daniel

daniel

19.09.2008 | 03:07

Tolle Arbeit, ganz groß!

Das ist genau das was es manchmal braucht; wird bei mir erst mal benutzt bevor ich mir dann wirklich wp-quicktag installier! Lot-A-Mercy

Antworten »

Manuela

Manuela

27.02.2009 | 20:47

Ich hätte ja gern dieses Plugin.
Allerdings hab ich das problem, wie von dir beschrieben, dass der editor nicht mehr angezeigt wird. den editor cache kann ich nicht löschen, weil es die dateien bei mir gar nicht gibt.

ich verzweifel gleich..
wäre schön, wenn du mir helfen könntest….

Antworten »

codestyling

codestyling

27.02.2009 | 21:48

Hmm, hab das Plugin eben sicherheitshalber nochmal mit WordPress 2.7.1 getestet und es funktioniert.
Ab WP 2.6 wird diese Cache Datei nicht mehr geschrieben. Kann es sein, dass du bereits TinyMCE Advanced als Plugin installiert hast, welches das ebenfalls schon integriert hat ?

Antworten »

Manuela

Manuela

27.02.2009 | 21:51

aaaah.. okay.. alles super. es lag am tiny advanced.. ich habs deaktiviert und nun geht es..
vielen vielen dank..

Antworten »

Cocofri

Cocofri

12.10.2011 | 09:21

Genau das war auch mein Problem! Vielen Dank für dieses tolle Plugin - jetzt funktioniert alles einwandfrei!

Antworten »

Bjoern

Bjoern

13.06.2009 | 11:44

Habe gerade ein frisches WP 2.8 aufgesetzt und das Plugin installiert. Funktioniert einwandfrei. Vielen Dank!!!

Antworten »

Daniel

Daniel

24.08.2009 | 21:08

Dito mit WP 2.84!

Nach wie vor ein tolles schlankes Plugin

Antworten »

Georg

Georg

10.10.2009 | 18:17

Cool, dass du so ein Plugin hast. Ich benutze WP 2.8.4 DE auf XAMPP lokal installiert und WP rennt prima. Ich habe mir das folgende Plugin-Verzeichnis C:\xampp\htdocs\strato\hallowelt.de\wordpress\wp-content\plugins\tinymce_blog_themed erstellt und die Dateien dort hinein kopiert. Browser-Cache gelöscht (Firefox 3.5 sowie IE 8 getestet), aber nix. Die Dropdown Liste erscheint nicht. Das js_cache-Verzeichnis gibt’s bei mir nicht. Was mache ich falsch?
Danke und Gruß
Georg

Antworten »

Du kannst diese Tags verwenden : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Navigation

  • Allgemein
  • jQuery in WordPress
  • Politik
  • WordPress (DE)

Suche

Neuere Beiträge ...

  • WordPress 2.6.1 lädt zu viele script.aculo.us Komponenten
  • WordPress Sprachdatei Plugin - Machbarkeitsstudie
  • WordPress 2.6 und die Text/Diff Fehler im Editor
  • WordPress Fehler durch Sprachdateien - die Ursache
  • WordPress Sprachdateien erzeugen Fehler in gettext.php

Ältere Beiträge ...

  • Hierarchische Kommentare mit WordPress
  • WordPress 2.5.1 - mehrsprachige Anmeldung (beta download)
  • WordPress 2.5.1 und Mehrsprachigkeit (1 von 3)
  • 3. Neuaufguss dieser Domain
rss RSS Kommentare valid xhtml 1.0 design by jide powered by Wordpress get firefox