Page 1 of 1

eigene CSS in FCKeditor einbinden

Posted: Thu Apr 15, 2010 9:42 am
by anne43
Leider gelingt es mir nicht meine eigene CSS-Datei in den FCKeditor einzubinden.
Habe auch schon gegoogelt, finde aber nichts, was mir weiterhilft.
Wäre daher dankbar für einen Tipp.

Vielen Dank im Voraus
Anne

Re: eigene CSS in FCKeditor einbinden

Posted: Thu Apr 15, 2010 7:03 pm
by imperfekt
Hi,
wenn Du Stile im FCKeditor verwenden möchtest gehören zwei Komponenten dazu.
Eine für die Funktion, eine fürs besser Aussehen der Vorschau.

Besser Aussehen der Vorschau machst Du über den WebYep!-Code:
<?php webyep_richText("Feldname", false, "../meinetollenstilenochmalfürFCK.css", true); ?>
Damit kann man im Editorfenster besser sehen wie es aussehen wird wenns fertig ist.
(Das kann einfach das selbe Stilesheet wie für Deine Site sein - meist muß aber noch mal angepasst werden.)

Die Stile die der FCKeditor in seiner Benutzeroberfläche über das Menü "Stil:" anbieten soll,
müssen extra noch mal in die Datei "fckstyles.xml" geschrieben werden.

Eine Anleitung dafür findest Du hier:
http://docs.cksource.com (je nach dem welche Version Du benutzt)
Letzte FCKedit Version http://docs.cksource.com/FCKeditor_2.x/Developers_Guide/Configuration/Styles

Grüße,
imperfekt

Re: eigene CSS in FCKeditor einbinden

Posted: Fri Apr 16, 2010 10:50 am
by anne43
Hallo Imperfekt,
Danke für deinen Tipp. Erst klappte ja gar nichts, aber nun habe ich es lösen können.
1. Schritt: in der "fckconfig.js" diese Zeile ergänzen:
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../../../../meincss.css' ;
mein.css liegt im rootverzeichnis der Site, wenn sie woanders liegt, den entsprechenden Pfad angeben.
2. Schritt: in der Datei "fckstyles.xml" die Styles aus der CSS-datei einbinden.
eine meiner CSS-Klassen ist ".text" . Also musste ich Folgendes einbinden:
<Style name="Text" element="span">
<Attribute name="class" value="text" />
</Style>
Für den Hover-Effekt von .text habe ich
<Style name="Links" element="a">
<Attribute name="class" value="text" />
</Style>
reingeschrieben.
Dann die Dateien hochladen - und siehe da, es funktionierte.
Um den Hovereffekt korrekt hinzukriegen, ist es wichtig, dem Wort oder den Wörtern, die verlinkt werden sollen, zuerst den Stil zuzuweisen und dann erst mithilfe des Editors zu verlinken.
Dann klappt's.
Ich hoffe, das nützt auch anderen was.
Auf den entsprechenden Tipp bin ich auf dieser seite: http://yaml.phpwcms.org/fckeditor.phtml gestolpert.
Viele Grüße
Anne

Re: eigene CSS in FCKeditor einbinden

Posted: Fri Apr 16, 2010 11:24 am
by imperfekt
hi Anne,
liegt der Teufel vielleicht im Anwendungs-Detail?

Dein Stil:
<Style name="blauertext" element="span">
<Style name="font-color" value="#000033" />
</Style>

Wirkt auf Text (bzw. erzeugt einen Span).
Um die Auswahlmöglichkeit in "Stil:" sehen zu können mußt Du einen Abschnitt im Text auswählen.

Genau so ist es bei z.B. einem Stil der auf ein Bild wirken soll:
<Style name="Bild liegt rechts" element="img">
<Style name="float" value="right" />
<Style name="margin-left" value="10px" />
</Style>
Den siehst Du nur in "Stil:" wenn Du ein Bild ausgewählt hast.

Also müßte ein Stil für einen Link z.B. so aussehen***:
<Style name="mein schicker link mit Bild" element="a:hover">
<Style name="background-image" value="url(arrow_navi.gif)" />
<Style name="padding-right" value="10px" />
</Style>
UND damit Du den auswählen kannst muß ein Link ausgewählt sein, der den Stil erhalten soll ...

Hilft das?
Grüße,
imperfekt

***blindflug - ungetestet!

Re: eigene CSS in FCKeditor einbinden

Posted: Fri Apr 16, 2010 12:36 pm
by anne43
Nun hat es sich überschnitten:-)
Habe mein Post gerade überarbeitet:-)

Re: eigene CSS in FCKeditor einbinden

Posted: Fri Apr 16, 2010 3:57 pm
by imperfekt
Noch besser natürlich so mit der class.
Aber - war das bei Schritt 1 nicht das was durch die Nennung im WY!-Code erledigt wird?
Bzw. ist das mit WY! nicht unnötig?
*grübel*
:D
Ejal, hauptsache läuft ...