Text im Content-Bereich verschiedenen CSS-Klassen zuweisen

[Hans>NULL]

Yep,
und weil das ein Dauerbrenner im Forum ist, dachte ich mal an ein Beispiel-Template, das all die Optionen sichtbar macht, damit die FCK-Möglichkeiten auch ausgeschöpft werden können. Auch anderes, wie Objekte, Canvas usw. sollten dann drin sein. Hab' aber noch keinen freien Zeitabschnitt im Terminkalender.
Gesammelt wurde aber schon 
Gruß, Hans>NUL

Edit (nun kommen einige Vereinfachungen):
p.s. mit der XML habe ich mich noch nicht beschäftigt. M.W. ist das auch nur INLINE aber mit Erweiterungsmöglichkeiten (z.B. inkl. <span> usw.) Es gibt die von Dir angegeben Erweiterungen von Klassen inkl Objekten und mehr (http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Styles), wie ich mittlerweile nachgelesen habe. Die editor.css nimmt nach meinem jetzigen Kenntnisstand die layoutnahen Klassen (keine ID) aufbauend auf screen.css auf, die im Editor verfügbar sein sollen. In die screen.css solten dann in der Hauptsache die "Gestaltungs-"ID's und ein paar rudimentäre Klassen, die für das Template bzw. den Aufbau desselben nötig sind.
CSS-Aufbau sollte demnach 
1. screen.css (+Abarten für unterschiedliche Medien) für das Aussehen
2. editor.css für Klassen wie z.B. Fließtext, Blocksatz etc.
3. FCK XML+JS = Inline für Auszeichnungen, wie z.B. Teaser
sein.
Ob das alle Möglichkeiten sind, weiß ich zum jetzigen Zeitpunkt nicht. Weiter Infos, wenn vorhanden, sind also willkommen. Die o.a. Infos stehen unter Vorbehalt. Nötige Korrekturen sind also erwünscht.

Nachtrag: Wenn XHTML-valide Seiten gewünscht sind, ist die Gefahr groß, daß durch den Einsatz aller Möglichkeiten natürlich auch die Gefahr der Inkompatibilitäten steigt. Gutes Wissen um XHTML ist bei der Erstellung solcher Templates unerläßlich.

[Rayne]

So, habe nun diese *.js-Datei wie beschrieben abgeändert und dieser rote Eintrag ist weg.

Da die Schriftfarbe global schon weiß definiert ist, habe ich die extra weiße Farbe aus den Klassen rausgenommen, so werden sie auch vernünftig im Editor angezeigt

ABER es gibt ein neues Problem. Ich habe eine Klasse „Text“, die den Text etwas einrücken soll. Bei einem längeren Text wird aber nur die erste Zeile eingerückt, der Rest verhält sich so, als wäre er ohne Klasse. Und das, obwohl der Text hintereinanderweg geschrieben ist, also ohne Umbruch.

So sieht das aus: http://s1b.directupload.net/file/d/1577/m2tlapw5_jpg.htm

Hier die Klasse:

Code:

.text {
      margin-left:  20px;
      margin-right: 10px;           
      }

Und so sieht der Quelltext für den Text aus:

Code:

<p><span class="text">Leider funktionieren einige Extensions auch nur mit einigen Anpassungen mit PostgreSQL, unter anderem auch RealURL. Importiert wird die Extension wie gewohnt. Danach in der &quot; ext_tables.sql&quot; im Extensionverzeichnis wieder alle &quot;ENGINE=InnoDB&quot; entfernen. Beim Update der Datenbank werdenerstmal einige Warnungen angezeigt, diese k&ouml;nnen ignoriert werden. Jedoch darf die Tabelle &quot;tx_realurl_uniqalias&quot; nicht vom Extensionmanager heraus angelegt werden, da dies zu einem Fehler f&uuml;hrt. Also das H&auml;ckchen entfernen und dann Installation fertig ausf&uuml;hren. Anschlie&szlig;end die noch fehlende Tabelle mit folgendem SQL-Anweisungen manuell anlegen:</span></p>

[Hans>NULL]

Sieht so aus als wenn irgendwo was überschrieben wird. Hilft nur suchen.

Mach mal 'nen Test mit INLINE:

Code:

<p style="margin-left:10px;">10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug</p>

Der sollte klappen

Gruß, Hans>NUL

[BerndJM]

Hi,

vielleicht nochmal zur Verdeutlichung:
die Angaben in der  /fckeditor/fckeditor/fckconfig.js bewirken, daß die entsprechenden Style-Elemente wirklich als inline Elemente verwendet werden. z.B. unabdingbar, wenn man Blockelemente vernünftig formatieren möchte, während die Angaben in der editor.css lediglich dazu führen, daß die entsprechenden Stile mittels "span" in den Text reinformatiert werden.

Aus einer Klasse "ganztollformatiert" wird im Quelltext im ersten Fall (wenn ich sie z.B.dem "div" zuweise ein

Code:

<div class="ganztollformatiert">...</div>

während im zweiten Fall daraus ein

Code:

<p><span class="ganztollformatiert">...</span></p>

wird.
Ein nicht ganz unerheblicher Unterschied, da "span" nunmal kein Blockelement ist.

Grüßle Bernd

[Hans>NULL]

Die wenigsten sind wohl  gezwungen tiefer in den Editor einzusteigen. Für eine Redaktion, wenn diese auch z.B. etwas textgestalterisch einwirken möchte, kommt man als Ersteller dann doch nicht herum das CMS  entsprechend einstellen zu müssen. Schön, wenn jetzt durch das Zusammentragen der Infos diverse Unklarheiten beseitigt werden könnten.
Gruß, Hans>NUL

[BerndJM]

Hallo Hans,
im Prinzip hast du recht, die wenigsten werden wohl soweit gehen müßen.
Ich bin aber z.B. allein schon darüber gestolpert als es darum ging einen globalen Block vernünftig formatieren zu können und dem Editierenden auch den Style an die Hand zu geben.
Also gar nicht so abwegig, mal bischen darüber zu "talken"

Grüßle Bernd

[Rayne]

Sorry Leute, ich habe gerade den Überblick verloren

Was muss ich nun genau machen, damit meine im normalen CSS definierten Klassen im Editor benutzen kann, sodass diese auch "richtig" eingebunden werden, nicht nur mittels span? In diese *.js, oder in die editor.css? Wenn die editor.css "schlecht" ist, wofür wird die dann benutzt?

Ihr meint, die wenigsten steigen so tief in die Maaterie ein, aber das verstehe ich nicht so ganz. Wer seinen Inhalt optisch aufpeppen möchte, muss doch die Klassen irgendwie in diesem Editor einbinden können.

Ich hoffe, ihr könnt meine Verwirrtheit auflösen

[Hans>NULL]

Statt .text bitte einmal

Code:

.texteinrueckung {
      margin-left:  40px;
      margin-right: 10px;           
      }

in die editor.css eintragen und nach einem Reload schauen, ob's in der Style-Liste im Editor erscheint.
Gruß, Hans>NUL

[Rayne]

Ja, dort erscheint dann sofort "texteinrueckung" an Stelle von "text" (Problem besteht weiterhin).

[Stefek]

Ihr meint, die wenigsten steigen so tief in die Maaterie ein, aber das verstehe ich nicht so ganz. Wer seinen Inhalt optisch aufpeppen möchte, muss doch die Klassen irgendwie in diesem Editor einbinden können.

In der Regel versucht man (ich verallgemeinere mal) bei der Schaffung der CSS Datei so vorzugehen, dass man auf die Standardauswahl im Editor zurückgreifen kann.

Wenn man mehr will, arbeitet man die XML-Datei (siehe weiter oben) aus.Dort kann man ganz schön mit verschiedenen Klassen arbeiten, wenn man da erstmal begriffen hat. (Ich pflege z.B. eine Seite, die <blockquote class="rightquote"> und <blockquote class="leftquote"> in der Auswahlliste hat, weil ich es öfter brauche, so habe ich sie mir in die XML Datei geschrieben und gut ist.

Und die editor.css : das weiß ich nicht, weil ich sie mir noch nie benutzt habe. Es sieht mir nach einem Versuch aus, dem Burschen, der den Content eingeben soll, vorzugaukeln, dass er mit einem WYSIWYG Editor arbeitet. Ich finde den Begriff WYSIWYG Editor ohne hin unglücklich gewählt, weil es nicht wahr ist (und technisch auch nicht machbar ist, zumindest heute noch nicht).
Also das "Vorgaukeln" ist: man macht in der editor.css ein paar der Klassen rein die man verwendet und schon wird, während man Content einpflegt, es etwas ähnlicher dem was am Ende herauskommt.
Doch man kriegt sie ohnehin nich richtig definiert.
Was wenn ich z.B. mit mehreren Blöcken arbeite, die ihrerseits eigene Stile haben. Usw. Usw.

Da finde ich es erheblich einfacher, einem Kunden den FCK Editor so zu "frisiereren", dass er die Quellcode Ausgabe nicht zu sehr vermurksen kann und ihm darüberhinaus zu zeigen, was die Headlines sind, was Paragraphen und Divisions sind. Nur ein paar Grundlagen. Denn so schwer ist es auch nicht, wenn man eine einigermaßen mit M$ Office vertraute Person vor sich hat.

Nur ein paar Ideengänge von mir.

Stefek

[Hans>NULL]

@Rayne

Dann bitte in der JS ändern

Code:

FCKConfig.CustomStyles =
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } },
'MY STYLE 1' : {Element :'h2', Styles : {'color' : 'Blue' , 'background-color' : 'Red' } },
'Einrückung10pxh2' : { Element : 'h4', Styles : { 'margin-left' : '10px' } }
};

Was Du nicht brauchst kannste ja wieder rausnehmen.
Gruß, Hans>NUL
p.s. Falls das für Dein Blockelement nicht paßt, wäre die Nutzung der XML anzuraten.  Wir kennen alle nicht Deine CSS-Dateien.

Edit:
@Stefek
Das bestätigt die Annahme, daß weitestgehend große Unklarheit herrscht. "BerndJM"s Anmerkungen gehen auch in diese Richtung. Arbeiten wir dran...
Noch'n Edit: Die editor.css macht die Klassen vom jeweiligen Editor unabhängig. Beim Wechsel wären die sonst weg.

[Stefek]

<blockquote class="rightquote"> und
<blockquote class="leftquote">

OK, für das obige sah der code dann so aus:

<Style name="blockquote: rechts" element="blockquote">

<Attribute name="class" value="rightquote" />

   </Style>

   <Style name="blockquote: links" element="blockquote">

<Attribute name="class" value="leftquote" />

   </Style>

Allerdings ist die Datei: modules/fckeditor/wb_config/wb_fckstyles.xml
nicht wie oben von mir angegeben
../fckeditor/fckeditor/fckstyles.xml

Und so kann man sich eben viele eigene Kombinationen basteln.

Gruß,
Stefek

[ruebenwurzel]

Hallo,

auch nochmal kurz mein Senf zur editor.css  . Ja damit kann man den Seiteneditoren tatsächlich ein WYSIWYG (backend = frontend) vorgaukeln. Zumindest was Schriftgrößen, Überschriften, Contentbackground und so weiter betrifft. Was nicht WYSIWYG ist, ist die Contentbreite. Also dann doch nicht echtes WYSIWYG aber wenigstens fast.  .

Matthias

[Hans>NULL]

... und ich suche noch 'ne Lösung für die Praxis 
Wie templateabhängig unterschiedliche Konfigurationen (JS/XML) des Editors laden?
Mal außen vorgelassen, wie man sinnvoll unterschiedliche config. benennen und speichern soll.
Gruß, Hans>NUL

[Stefek]

Hehe!
Wie ich sehe tauchst Du grad ganz tief darein.

Den Schnorchel nicht vergessen 

Gruß,
Stefek

[Hans>NULL]

Ja klar, bis zum Hals in der Grube...
Bei der Fragestellung sind die PHP-Leute gefragt. Vorstellen kann ich mir, die editoreigenen Conf.-Dateien in's jeweilige Template-Verzeichnis zu packen und die Pfade hinzubiegen. Fragt ein Editor: Wo sind meine configs? Wenn'se nich im Template sind  dann vor der Haustür? oder so... 
Gruß, Hans>NUL
p.s. Bin neugierig auf das Ergebnis von "Rayne"

[BerndJM]

Hi Matthias,

Was nicht WYSIWYG ist, ist die Contentbreite. Also dann doch nicht echtes WYSIWYG aber wenigstens fast.

Stimmt so nicht ganz, du kannst in der editor.css den body mit einer festgelegten Breite definieren, damit es so ungefähr hinkommt.

Grüßle Bernd

[Rayne]

Vielen Dank für eure vielen Antworten, ihr habt mir sehr weitergeholfen

Ich habe meine CSS-Klassen nun aber so umbenannt, dass ich sie mittels der Standardeinstellungen im Editor verwenden kann. Also statt der Klasse ".Text" gibt es "p", für die Rubrik, die Überschrift und das Datum h1, h2 und h3. Und für die Bilder img.

Mehr muss ich eh nicht formatieren, also reicht das glücklicherweise aus

Aber die Option mit der xml-Datei werde ich mir definitiv merken. Denn nicht alles kann man global definieren.

Danke nochmal!!

[Hans>NULL]

Da freut sich die Gemeinde.
Hab' noch 'ne interessante Anmerkung/Option entdeckt.
Zu lesen in wb_fckconfig.js (\wb\modules\fckeditor\wb_config) unter

Note: GENERAL HINTS ON CSS FORMATS AND XML FILES

Ist aber ziemlich zeitraubend, wenn nicht nervig, alle Daten nach Infos zu durchsuchen.
Sowas wie'n Handbuch -zum Blättern- gibt's wohl nüch.
Gruß, Hans>NUL

[BerndJM]

Sowas wie'n Handbuch -zum Blättern- gibt's wohl nüch.

Naja, zum blättern nicht gerade, aber hier findet sich ja schon ne Menge Infos ...

Grüßle Bernd