Page 1 of 5

CKEditor eigenes CSS

Posted: Sat Feb 18, 2012 4:54 pm
by Traktorist
Hallo zusammen,

wo kann man für den CKEditor einstellen, dass er das eigene und nicht das Seiten CSS verwendet.

Gruß, Ele

Re: CKEditor eigenes CSS

Posted: Sat Feb 18, 2012 5:14 pm
by cmb
Hallo Ele,

das macht man in plugins/ckeditor/inits/init_*.js (also entweder in allen 4 Dateien, oder nur in derjenigen, die man als Toolbar gewählt hat). Dort steht die Zeile:

Code: Select all

contentsCss : '%STYLESHEET%',
Diese kann einfach gelöscht werden. Oder man kann ein ganz anderes Stylesheet einbinden, indem man den Datei-Pfad statt %STYLESHEET% angibt.

Christoph

Re: CKEditor eigenes CSS

Posted: Sun Feb 19, 2012 1:24 pm
by Traktorist
Hi Christoph,

herzlichen Dank für die schnelle und kompetente Antwort.
Ins .JS hätte ich nie geschaut ;)

Gruß, Ele

Re: CKEditor eigenes CSS

Posted: Sun Feb 19, 2012 2:31 pm
by Holger
Hi,

alternativ könnte man auch in styleshett.css nur die für den Editor relevanten Einträge machen und den Rest mittels @import aus einer anderen Datei inkludieren.


LG
Holger

Re: CKEditor eigenes CSS

Posted: Sun Feb 19, 2012 2:52 pm
by cmb
Hallo Holger,
Holger wrote:und den Rest mittels @import aus einer anderen Datei inkludieren.
Gibt's da nicht evtl. Probleme mit dem stylesheetparser-Plugin unter FF?

Ich hab's gerade noch mal getestet: ein @import lässt die Initialisierung des Editors im FF abstürzen, wenn das stylesheetparser-Plugin aktiviert ist, so dass die geänderte Formatierung des (X)HTML-Quellcodes nicht duchgeführt wird.

Christoph

Re: CKEditor eigenes CSS

Posted: Sun Feb 19, 2012 3:13 pm
by Holger
cmb wrote:Gibt's da nicht evtl. Probleme mit dem stylesheetparser-Plugin unter FF?
Stimmt wohl. Selber habe ich das noch nicht weiter getestet. Generell hat das Plugin aber noch einige Unzulänglichkeiten.
Aber auch diesee Bugs wird wohl noch gefixt werden...

Generell wäre aber auch ein "editorstyles.css" möglich und vielleicht sogar besser.
Die Designer müssten Styles für den Content eben nur in einer gesonderten Datei anbieten.
Das wäre sehr "userfreundlich".


LG
Holger

Re: CKEditor eigenes CSS

Posted: Wed Feb 22, 2012 6:00 pm
by Lariss
Hallo Christoph,
ich habe die ckeditor bei mir lokal installiert. Ich habe bei der Einstellung Toolbar: full gewählt.
Erstens bei mir war von Anfang an die Still alles weiß (kein Eintrag). Dann habe ich wie du gesagt hast

Code: Select all

contentsCss : '%STYLESHEET%',
gelöscht, es bleibt nach wie vor unverändert. Dann habe Ich den Pfad zu meinem stylesheet.css eingegeben wie:

Code: Select all

contentsCss : ' templates/pitpl_shop/stylesheet.css',
Es ändert sich aber leider an Ckeditor Still nichts, es bleibt leer!

Gruss
Lariss

Re: CKEditor eigenes CSS

Posted: Wed Feb 22, 2012 6:25 pm
by cmb
Hallo Lariss,

zunächst einmal muss man wissen, dass der CKEditor die Stile kontext-sensitiv anzeigt, d.h. es werden nur diejenigen angezeigt, die für die aktuelle Cursorposition oder Auswahl sinnvoll sein könnten. Und es müssen entsprechende Stile vorhanden sein.

Zum Testen: man definiert p.zum_testen {background:yellow} im Stylesheet und setzt den Cursor in einen normalen Paragraphen. Dann sollte p.zum_testen angezeigt werden.

Ich vermute aber, dass es bei Dir an der Unzulänglichkeit des Stylesheetparsers des CKEditors liegt, der unter Firefox nicht mit @-Direktiven im Stylesheet klar kommt. Das sollte einen JS-Fehler geben -- schau mal in die Fehlerkonsole (F12).

Wenn das so ist, hilft entweder Umschreiben des Stylesheets (verzicht auf @import & Co.), oder manuelles Konfigurieren der Style-Selectbox (http://docs.cksource.com/CKEditor_3.x/D ... ide/Styles).

Christoph

Re: CKEditor eigenes CSS

Posted: Wed Feb 22, 2012 7:11 pm
by Lariss
Hallo Christoph,

herzichen Dank für deine Tipps.
Das werde ich ausprobieren, sobald ich Zeit finde.

Gruss
Lariss

Re: CKEditor eigenes CSS

Posted: Fri Feb 24, 2012 6:40 am
by Lariss
Hallo Christoph,
deine Tipps sind Gold wert. Es ist wirklich so, dass wichtige Formatierungselemente in Stil angezeigt werden. Ich habe beispielsweise
blockquote.kursiv und font.ret in meinem stylesheet.css definiert, und sie tauchen tatsächlich in Ckeditor auf.
Nochmals vielen Dank.
Gruss
Lariss