CKEditor eigenes CSS
Re: CKEditor eigenes CSS
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.
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.
Re: CKEditor eigenes CSS
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
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
Re: CKEditor eigenes CSS
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.
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.
Re: CKEditor eigenes CSS
Hallo bora,
Christoph
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:Dann wird allerdings tatsächlich der gesamte p-tag in div geändert.
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.bora wrote:Funktioniert auch besser als beim tinymce finde ich.
Christoph
Christoph M. Becker – Plugins for CMSimple_XH
Re: CKEditor eigenes CSS
Tja, wenn man auf die Semantik pfeift ...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.
Gert
Re: CKEditor eigenes CSS
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.
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.
Re: CKEditor eigenes CSS
Oh, habe ich da was verschlafen? Ist Semantik in den letzten 3 Jahren aus der Mode gekommen?bora wrote:der letzte Kommentar wurde offensichtlich 3 Jahre vor der Frage geschrieben, respekt.
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.
Re: CKEditor eigenes CSS
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):
Wer den CKeditor verwendet, muss ganz einfach wissen, dass bei Anwendung der Styles das Element, das gestylt werden soll, umgeschrieben wird,
Gert
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;}
Gert
Re: CKEditor eigenes CSS
Hallo Gert,
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
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/StylesGert wrote:Wer den CKeditor verwendet, muss ganz einfach wissen, dass bei Anwendung der Styles das Element, das gestylt werden soll, umgeschrieben wird,
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
Christoph M. Becker – Plugins for CMSimple_XH
Re: CKEditor eigenes CSS
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:
So kann man etwas Ordnung in die Angelegenheit bringen, aber es ist unmöglich, das optimal für TinyMCE UND CKEditor zu gestalten,
Gert
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>
...
Gert