CKEditor eigenes CSS

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
bora
Posts: 30
Joined: Mon Mar 29, 2010 7:29 pm

Re: CKEditor eigenes CSS

Post by bora » Tue Feb 28, 2012 8:43 pm

Hallo,
ich hänge mich hier mal kurz mit rein, da meine Frage ähnlich ist.
Ich habe relativ viele kontextunabhängige css-stile definiert. Da steht dann was über Abstände, Rahmen etc drin. Diese können eigentlich auf alle möglichen tags angewendet werden. Leider zeigt mir der C
Keditor diese dann nicht an, da sie ja nur mit ".inhaltrechts" u.s.w, beschrieben sind.
Gibt es eine Möglichkeit diese Stile trotzdem angezeigt zu bekommen oder muss ich überalle "div.inhaltrechts" und "p.inhaltrechts" etc. schreiben?

Vielen Dank im voraus.

cmb
Posts: 13395
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Tue Feb 28, 2012 8:50 pm

Hallo bora,

bei Klassen für Blockelemente reicht es eigentlich div.name_der_klasse anzugeben. Das kann dann auch für andere Blockelemente (zumindest <p> und <blockquote> habe ich mal getestet) gewählt werden.

Klassen für Inlineelemente definiert man am besten für span.name_der_klasse. Will man dann mal einen ganzen Absatz damit formatieren, muss man eben alles markieren.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

bora
Posts: 30
Joined: Mon Mar 29, 2010 7:29 pm

Re: CKEditor eigenes CSS

Post by bora » Tue Feb 28, 2012 8:57 pm

Hi,
das war ja mal eine schnelle antwort,
habs gerade probiert, es funktioniert. <div.xyz> wird auch für <p> angezeigt und akzeptiert. Dann wird allerdings tatsächlich der gesamte p-tag in div geändert. Aber das ist trotzdem sehr komfortabel. Funktioniert auch besser als beim tinymce finde ich.

Vielen Dank für die schnelle Antwort.

cmb
Posts: 13395
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Tue Feb 28, 2012 9:04 pm

Hallo bora,
bora wrote:Dann wird allerdings tatsächlich der gesamte p-tag in div geändert.
Ja, richtig! Allerdings passiert das z.B. bei <blockquote> nicht. Da wird ein <div> zusätzlich eingefügt. Vielleicht ändert sich das aber in einer künftigen CKEditor-Version noch.
bora wrote:Funktioniert auch besser als beim tinymce finde ich.
Der tinyMCE arbeit nicht kontextsensitiv. Daher hat man dann immer alle Stile zur Verfügung; da kann die Auswahl dann auch mal recht lang werden.

Christoph
Christoph M. Becker – Plugins for CMSimple_XH

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: CKEditor eigenes CSS

Post by Gert » Tue Feb 28, 2012 9:05 pm

bora wrote:Dann wird allerdings tatsächlich der gesamte p-tag in div geändert. Aber das ist trotzdem sehr komfortabel. Funktioniert auch besser als beim tinymce finde ich.
Tja, wenn man auf die Semantik pfeift ...

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

bora
Posts: 30
Joined: Mon Mar 29, 2010 7:29 pm

Re: CKEditor eigenes CSS

Post by bora » Wed Feb 29, 2012 2:13 pm

Hi,
der letzte Kommentar wurde offensichtlich 3 Jahre vor der Frage geschrieben, respekt.

Die Semantik wird zerstört, das stimmt und ist sicherlich auch nicht schön. Aber beim tiny muss ich, wenn ichs richtig gesehen habe, jedesmal den gesamten Abschnitt markieren und kann nur dann den Stil ändern. Das fand ich gestern etwas hakelig und schwierig, und ich habe es nicht wirklich hinbekommen. Da kamen immer seltsame Sachen bei heraus. Ich kann ja zur Not immer noch im Quelltext gucken aber meine User haben von html/css keine Ahnung.
Beim CK brauche ich nur in den jeweiligen Abschnitt klicken, dann kann ich den Stil für den gesamten Abschnitt ändern. Das finde ich schon einfacher.

Vielen Dank für die Hilfe.

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: CKEditor eigenes CSS

Post by Gert » Wed Feb 29, 2012 3:06 pm

bora wrote:der letzte Kommentar wurde offensichtlich 3 Jahre vor der Frage geschrieben, respekt.
Oh, habe ich da was verschlafen? Ist Semantik in den letzten 3 Jahren aus der Mode gekommen?

Ich halte es eben nicht für richtig, dass ein Editor an einer Stelle, wo der User denkt, dass er nur den Style (das Aussehen) verändert, einfach das Element ändert.

Aus einem Absatz (p wie paragraph) wird ein Bereich (div wie division). Und der normale User merkt's nicht.

Richtig interessant wird die Sache aber erst dann, wenn der User die Klasse div.irgendwas auf eine Überschrift h1-h3 anwendet, denn auch da steht die Klasse div.irgendwas in der Style Selectbox zur Verfügung. Dann wird aus h1 => div ... naja, zumindest in diesem Fall wird es der User merken ;)

Normalerweise sind Editoren dazu da, solche Sachen automatisch richtig zu machen und somit den User zu entlasten,

Gert

========================================================

PS: Das ist eigentlich ein tolles Beispiel, wie wichtig eine korrekte Semantik sein kann.

Für das Aussehen auf dem Bildschirm ist es völlig egal, ob ich <h1>Überschrift</h1> oder <div class="heading">Überschrift</div> schreibe, das kann völlig gleich aussehen.

Wichtig wird die Semantik, wenn ich eine html Datei an ein Programm zur weiteren Verarbeitung übergebe, in diesem Fall die content.htm an CMSimple_XH.

Da ist es plötzlich ein Unterschied, ob da steht <h1>Überschrift</h1> oder <div class="heading">Überschrift</div>. Das eine erzeugt eine Seite, das andere nicht.
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: CKEditor eigenes CSS

Post by Gert » Wed Feb 29, 2012 4:22 pm

Hallo an alle,

jetzt habe ich mich doch mal mit dem FCKeditor beschäftigt.

Die Style Selectbox zeigt überhaupt keine globalen Klassen an, wie z. B. ".test".

Er zeigt nur Klassen an, die bestimmten Elementen zugeordnet sind, wie "img.test". Diese gruppiert er in der Styles Selectbox nach Object styles, Block Styles und Inline Styles. Innerhalb dieser Gruppierungen ordnet er die Klassen nach der Reihenfolge, wie sie in der stylesheet.css auftauchen.

Object Styles werden nur angezeigt, wenn per Coursor ein Objekt (z. B. ein Bild) aktiviert ist. In diesem Fall werden auch alle anderen Block- und Inline Styles angezeigt.

Wenn man mit dem Coursor in einem Blockelement (p, div) ist, werden Block- und Inline Styles angezeigt, aber keine Object Styles. Ebenso, wenn man sich in einem Inline Element (zwischen <span> und </span>) befindet.

Zum Testen könnt Ihr ja mal folgendes CSS ganz oben in Eure stylesheet.css eintragen (absichtlich so durcheinander, damit man sieht, wie's funktioniert):

Code: Select all

// TEST STYLES

div.test {border: 10px solid;}
p.test {border: 10px solid;}
h4.test {border: 10px solid;}
.test {border: 10px solid;}
div.test2 {border: 10px solid;}
blockquote.test {border: 10px solid;}
img.test {border: 10px solid;}
span.test {border: 10px solid;}
img.test2 {border: 10px solid;}
h5.test {border: 10px solid;}
 
Wer den CKeditor verwendet, muss ganz einfach wissen, dass bei Anwendung der Styles das Element, das gestylt werden soll, umgeschrieben wird,

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

cmb
Posts: 13395
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: CKEditor eigenes CSS

Post by cmb » Wed Feb 29, 2012 4:48 pm

Hallo Gert,
Gert wrote:Wer den CKeditor verwendet, muss ganz einfach wissen, dass bei Anwendung der Styles das Element, das gestylt werden soll, umgeschrieben wird,
Das gilt allerdings nur für Block-Elemente (wenn ich nichts übersehen habe), und auch nicht für alle (z.B. bleiben Blockquotes erhalten). Und das wird dann auch gleich in der Paragraph-Format-Selectbox entsprechend angezeigt. Darauf muss der Anwender natürlich achten. Details über die CKEditor Styles-Combo findet man unter http://docs.cksource.com/CKEditor_3.x/D ... ide/Styles

Christoph

PS: Und beim tinyMCE muss man wissen, dass Blocklevel-Stile nur zugewiesen werden können, wenn der ganze Block selektiert ist, und dass so mancher Stil, der zugewiesen wird, keinen Unterschied macht. Bei den o.g. Test-Stilen z.B. bewirkt ein p.test2 ja nichts -- trotzdem kann der Stil in der Selectbox gewählt werden.

Beide Editoren haben also ihre Eigenheiten -- was man nun lieber mag, ist vermutlich auch etwas Geschmacks-/Gewöhnungssache.

Der einzige mir bekannte Editor für CMSimple_XH 1.5.x, der keine solche Sperenzchen macht, ist Codeeditor_XH :mrgreen:
Christoph M. Becker – Plugins for CMSimple_XH

Gert
Posts: 3075
Joined: Fri May 30, 2008 4:53 pm
Location: Berlin
Contact:

Re: CKEditor eigenes CSS

Post by Gert » Wed Feb 29, 2012 5:06 pm

Hallo Christoph,

jedenfalls verhalten sich TinyMCE und CKEditor derart unterschiedlich bezüglich der Styles, dass man diesbezüglich keine allgemeingültige Empfehlung für Template Designer rausgeben kann. Das muss sich jeder, der damit arbeiten will, selbst zurechtrücken in der stylesheet.css.

Ein Dienstleister muss das dann genau auf die gegebenen Umstände (welcher Editor) und die Bedürfnisse des Kunden abstimmen. Unter Umständen ist es sinnvoll, mit verschiedenen css Dateien zu arbeiten:

stylesheet.css: Alle Styles für den Anwender (content styles) und den Editor

templatestyles.css: Alle Styles, die nicht relevant sind für die Editorarea und den User (den content). Die wird dann per template.htm eingebunden:

Code: Select all

... 
<head>
<?php echo head();?>
<link rel="stylesheet" href="<?php echo $pth['folder']['template']; ?>templatestyles.css" type="text/css">
</head>
...
So kann man etwas Ordnung in die Angelegenheit bringen, aber es ist unmöglich, das optimal für TinyMCE UND CKEditor zu gestalten,

Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

Post Reply