Formatierung WYSIWYG

[FastAsAShark]

Zwischendurch formatiert sich im wysiwyg-Modus die Schrift recht eigenwillig. Insbesondere wenn ein Text mit einem Link versehen wird.

Vorgehensweise:
Text wird eingegeben (einfacher und normaler Zeilenumbruch).
Anschließend gesamten Text mit Schriftart und Größe pauschal formatiert.
Überschrift und Link mit größerer Schrift (einen Schritt größer) nachformatiert.

Im Frontend zeigt sich die Schrift auf dem Link ganz nach Tagesstimmung in der gleichen Schriftgrösse wie die Überschrift oder behält die vorherige Größe bei. Nochmaliges Nachformatieren funktioniert auch nicht. Die gleiche Schriftgrösse wie bei der Überschrift funktioniert nicht.

Wie gesagt. Mal funktioniert es, dann wieder nicht. Habe auch schon die Reihenfolge der Formatierung verändert. Ist kein System dahinter zu erkennen.

Das passiert jetzt schon über Jahre mit WB 2.7. aber auch nach Upgrade auf 2.8.2. Hatte das CSS in Verdacht. Aber ein Freund mit einer anderen Seite auf WB klagt über die gleiche unberechenbare Problematik. Ich hatte auch die unterschiedlichen Zeilenumbrüche im Verdacht. Ist aber auch nicht klare Ursache-Wirkung zu erkennen.

Kennt jemand das Problem? Hat jemand eine Idee, woran es liegen kann?

[dbs]

Einfach mal bei jedem Schritt auf Quellcode umstellen und überprüfen was er macht.
Kann dein Problem nicht nachvollziehen.

[ruebenwurzel]

Hallo,

das Formatieren von Text im WYSIWYG mache ich nur im äußersten Notfall. Grundsätzlich sollten alles im zentralen CSS des Templates geregelt sein. Insbesondere, was die Schriftart angeht. Problem ist, dass wenn man sein Design dann mal ändert, dann muss man auch alle Seiten (was bei großen Seiten nicht wirklich Spass macht) händsch anpassen. Wenn man verschiedene Stile einsetzen will, dann sollte man die im der Template.css definieren und im Editor zur Verfügung stellen.

Ein echtes WYSIWYG (also dass im Backend der Inhalt genau so ausschaut wie im Frontend) erhält man nur mit einer sauber programmierten editor.css. Dann kann man ziemlich sicher sein, dass das was man sich im Backend einrichtet, auch im Frontend soi rüberkommt.

Und last but not Least, das beste Template mit dem besten CSS nützt nix, wenn man im WYSIWYG-Editor alles nach Lust und Laune individuell gestaltet. Ich habe bei meinen Kunden deswegen schon oft den Editor auf das notwendigste reduziert. Und als erstes fliegen immer die Schriftarten raus. )

Matthias

[jacobi22]

Ein "Problem" habe ich eigentlich nur, wenn ich in einem eingefügtem Text eine am Beginn stehende Überschrift formatieren möchte. Gern nimmt der Editor dann den kompletten Text und will man den nachfolgenden Text wieder auf normal stellen, ist auch die Formatierung der Überschrift wieder weg.
Darum mach ich das nur noch direkt im Quelltext.

[FastAsAShark]

Hallo,

das Formatieren von Text im WYSIWYG mache ich nur im äußersten Notfall. Grundsätzlich sollten alles im zentralen CSS des Templates geregelt sein. Insbesondere, was die Schriftart angeht. Problem ist, dass wenn man sein Design dann mal ändert, dann muss man auch alle Seiten (was bei großen Seiten nicht wirklich Spass macht) händsch anpassen. Wenn man verschiedene Stile einsetzen will, dann sollte man die im der Template.css definieren und im Editor zur Verfügung stellen.

Ein echtes WYSIWYG (also dass im Backend der Inhalt genau so ausschaut wie im Frontend) erhält man nur mit einer sauber programmierten editor.css. Dann kann man ziemlich sicher sein, dass das was man sich im Backend einrichtet, auch im Frontend soi rüberkommt.

Und last but not Least, das beste Template mit dem besten CSS nützt nix, wenn man im WYSIWYG-Editor alles nach Lust und Laune individuell gestaltet. Ich habe bei meinen Kunden deswegen schon oft den Editor auf das notwendigste reduziert. Und als erstes fliegen immer die Schriftarten raus. )

Matthias

Das macht Sinn (Thema einheitliche Schriften) ... also muss ich an dem CSS im Template noch einiges einstricken. Hatte ich nach deiner Mail schon befürchtet. Kann ich dann eigentlich in meiner gesamten Datenbank die Formatierung aus dem Backend überbügeln?

Was mich zu der Frage veranlasst hat war diese undurchsichtige Eigenwilligkeit, die quasi willkürlich vonstatten geht. Mal geht es, mal nicht. Vor allem, weil es einem Kollegen genauso häufig unterkommt.

[ruebenwurzel]

Hallo,

dass sich das Design deiner Seite "je nach Tagesform" eigenwillig ändert habe ich auch schon festgestellt. Kann es sein, dass dein Hoster so eine Art Caching-System verwendet. Was mich bei deiner Subdomäne auch gewundert hat, dass die Schreibweise des Domänennamens in Bezug auf Groß-und Kleinschreibung extrem empfindlich zu sein scheint. Gibt es da noch irgendwo eine .htaccess Datei?

Zwecks den Formatierungen der WYSIWYG Bereiche. Das über die Datenbank zu lösen kann ich mir nicht vorstellen. Ich würde da über den Quelltext des WYSIWYG-Editors gehen. Ist bei eurerer doch recht umfangreichen Seite ne Menge Arbeit, lohnt sich aber im Ergebnis.

Benutzt man eine editor.css (ich mach dir mal eine fertig für dein Template), dann hat man im Backend schon die richtig schriftart, Schriftgröße und auch das richtige Aussehen der Überschriften. Dann kommt der normale "Redakteur" schon gar nicht in Versuchung hier nochmal was ändern zu müssen.

Gruß
Matthias

[FastAsAShark]

Dank Matthias ist das CSS nun sauber und startklar. CSS ist schon eine coole Sache. Die Website hat nun eine weitaus eindeutigere Struktur bekommen. Schriften und Umbrüche sind noch feinjustiert. Man beachte Zeilenumbrüche "br" und Absätze "p".

(1) Ich muss hier nur noch die Formatierung für den externen Linkverweis im inhaltlichen Text automatisieren. Der externe Link wird immer mit den gleichen Eigenschaften (als Pop-Up und an gleicher Stelle ausgegeben).

Im Quellcode eines einzelnen Eintrags findet sich hierüber folgende Definition:

<p><span style="font-size: small;"><a onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,fullscreen=no,dependent=no,width=600,height=600,left=300,top=100,status'); return false" href="..."><span style="font-family: Verdana;"><strong>&gt;&gt; homepage</strong></span></a></span><span style="font-size: x-small;"><span style="font-family: Verdana;"> </span></span></p>

Dabei ist "..." die individuelle Eingabegrösse für den externen Link.

Die Schriftart und Schriftgrösse ist mittlerweile an anderer Stelle im CSS definiert.

Was ich gefunden habe: Den Befehl in <body> und <body/> setzen und mit "span" und "a href" definieren. Ich denke hier müssen die Infos aus dem Quelltext untergebracht werden. Eine Hürde wird es sein, dass durch die Links in der Navigation und andere intere WB-links auch andere Zielorte vorhanden sind. Daher ist hier die template.css vielleicht nicht der richtige Ort. Gibt es hierfür eine elegantere Lösung?


(2) Aber das größte Problem, was mir nun bevorsteht ... die Datenbank ist bereits so umfangreich, dass ein manuelles Umarbeiten der ehemaligen Einzelformatierunge n in dem bestehenden Quellcode herausgelöscht werden müssen. Bevor ich hier tagelang hunderte von Seiten einzeln durchgehe, frage ich mich, ob man dieses nicht über eine mysql-automation bereinigen lassen kann? Ist jetzt eher kein WB-Thema, aber vielleicht kann mir jemand einen Tipp geben, wo ich darüber Hinweise im Netz finden kann.

[gottfried]

Hi !

manuelles Umarbeiten reduziert sich auf ein Minimum, wenn man von WB in Notepad kopiert und wieder rück.
Da bleibt nur der text.

[FastAsAShark]

Da die Datenbank recht gross ist, ist es dennoch sehr zeitaufwendig, jede Seite einzeln anzufassen. Außerdem gibt es hierbei Schweirigkeiten, wenn Tabellen und Bilder mit im Text eingebunden sind.

Bei einfachem Text funktioniert es. Allerdings verschwinden auch die Absatzumbrüche. Dieses hat zur Folge, dass eine Formatierung im ersten "Absatz" zur Formatierung des gesamten Textes führt. Hier muss der Umbruch jeweils von Hand wieder hergestellt werden (der Unterschied zwischen Return und Umschalt + Return). Die hervorgehobenen Texte durch "bold" gehen ebenfalls verloren.

Hier wäre also das Vorgehen angebracht, Jeweils den Text auszukopieren und dann aus der Zwischenablage sowohl in Notepad (Umformatierung) und in Word (Vorlage) anzuspeichern. Alternativ kann man die Vorlage als Kopie auch auf lokaler Ebene gesichert laufen lassen. Wenn man die Vorlage nicht hat, fehlt einem bei umfangreichen Text schnell der Überblick hinsichtlich der manuellen Formatierung außerhalb des CSS.

Bei der Formatierung in der Tabelle hat sich die Formatierung nicht vollständig durch Notepad gelöscht (hatte nur den Text umkopiert). Nachdem ich ihn wieder eingefügt habe, war die Textdarstellung zu klein (vermute hier aber noch eine Korrekturmöglichkeit im CSS - kam mir grad in den Sinn).

Ansonsten ist die Zwischenablage über Notepad eine praktikable Lösung. Danke für den Hinweis.

Aufgrund der Grösse der Datenbank war da jedoch eher die Überlegung, es in der SQL-Datenbank zu machen. Also mit entsprechender Befehlsroutine sämtliche Einträge umzuformatieren. Durch ein entsprechendes Script könnten so die "br", "p" und "bold" möglicherweise bestehen bleiben. Allerdings über Google bin ich nicht weitergekommen.

 

[FastAsAShark]

Habe es grad mit Notepad bei einem anderen Text getestet. Hier waren die Umbrüche richtig drin. Ist wohl das Phänomen, was "Jacobi22" auch hin und wieder aufgefallen ist. Dann kann man es ohne Quelltext mit den beiden unterschiedlichen Tastenkombis (siehe letztes Posting) im Editor auch wieder herstellen.

[jacobi22]

<div align="right"><a href .../a></div>

ich nehm mal an, das ist jetzt nur hier so verkehrt geschrieben

P:S: Ist natürlich schwer, zu helfen, wenn ihr beiden da eine Alleinunterhaltung draus macht 

[FastAsAShark]

Sorry, hatte mich hier etwas im Posting vertan. Ich hatte verzweifelt nach der Formatierung (Position) des Links Text_Read_More in den News gesucht. War nach Upgrade auf WB 2.8.2 im gesamten Code nicht zu finden. Irgendwann habe ich dann aus Resignation den Code im Editor der News und in detailed_output.htt eingefügt. Danach hat es funktioniert. Das rot markierte stellt nur einen Teil des Codes für den Link da. Wie gesagt. Gehörte hier nicht ins Posting, daher habe ich es wieder rausgenommen.

Alleinunterhaltung ist es hier nicht. Matthias hat mir meine CSS entsprechend bereinigt. Die beiden geschilderten Probleme sind bislang noch nicht hinter der Kulisse behandelt.

Beim ersten Punkt stehe jetzt vor dem Problem, wie die Eingabe bei einem externen Link automatisiert werden kann. Also die folgenden Einstellungen nicht immer neu eingeben muss.



Das zweite Problem ist die automatisierte Löschung vorhandener individueller Formatierungen im WYSIWYG-Editor. Nun ist eine vernünftige CSS-Formatierung vorhanden. Die Datenbank ist recht gross. So wäre eine Löschung der alten Formatierungen sehr mühseelig.

[FastAsAShark]

Zu 2:

Ich habe mir mal meine Datenbank auf dem Server bei meinem Provider angesehen. Dort finde ich eine Tabelle mit den Spalten "Content" und "Text". Unter Content findet man die Einträge mit dem Quellcode aus dem FCK-Editor. Könnte man hier nicht mit der allgemeinen Löschung der Formatierung ansetzen?

Also nicht dass ich jetzt auf die Idee kommen würde, da selbst Hand anzulegen. Würde in der Datenbank sicherlich mehr Schaden als Nutzen anrichten. Ich habe mich mitterweile auf das manuelle Bereinigen mit mir selbst geeinigt. Aber für andere Anwender mit vermurksten Formatierungen wäre das vielleicht ein Ansatz.

Zu 1:

Die Editierung das Backends der Link-Zielseite (Pop-up Fenster) habe ich noch immer nicht gefunden.

[FastAsAShark]

Bezüglich der manuellen Löschung der Formatierung im FCK-Editor: es gibt dort auch einen Button, über den ein Grossteil der Formatierung gelöscht werden kann. Das dargestellte Radiergummi löscht Schriftarten und Schriftgrössen, so dass die Formatierung aus dem CSS wieder die Gültigkeit bekommt. Allerdings gehen dabei auch andere Formatierungen (z.B. Bold oder Blocksatz) verloren.

Zumindest ist das Umkopieren in Notepad nicht unbedingt zwingend erforderlich. Ist aber auch nur eine Beschleunigung bei der Löschung in der jeweiligen Seite, keine Stapelbearbeitung einer gesamten Datenbank ..

Allerdings ... hat denn hier wirklich niemand einen Schimmer, in welcher Datei des Moduls FCK-Editor (erreichbar durch AFE) die Link-Zielseite (Pop-Up) detailierter definiert werden kann? Es nervt ein wenig, ständig die Einstellungen wiederholen zu müssen.

[FastAsAShark]

Allerdings ... hat denn hier wirklich niemand einen Schimmer, in welcher Datei des Moduls FCK-Editor (erreichbar durch AFE) die Link-Zielseite (Pop-Up) detailierter definiert werden kann? Es nervt ein wenig, ständig die Einstellungen wiederholen zu müssen.

Hat denn hier niemand eine Idee?

[ruebenwurzel]

Hallo,

Der FCKEditor wird nicht vom WB Team entwickelt. Deswegen wirst du hier auf so spezielle Fragen vermutlich keine Antwort bekommen. Da auch die entwicklung von FCKEdotir eingestellt ist, wird es schwierig sein, auf den entwicklerseiten etwas zu finden. Vielleicht hilft dir dieFCKEditor Doku ja weiter.

Matthias

[dbs]

Schau mal in die modules/fckeditor/fckeditor/editor/dialog/fck_link.html

[maverik]

Es gibt heutzutage auch elegantere und einfachere Methoden als den "80er Jahre pop up Style". 

[FastAsAShark]

Die da wären?

[maverik]

guggst du hier

http://www.websitebaker.net/pages/tutorials/jquery/colorbox-demo.php

externer Link im iframe

[FastAsAShark]

Das sieht schon recht cool aus. Aber wie vergibt man da auf jeder neuen Seite einen anderen Link? Die Daten werden mit dem FCK-Editor von verschiedenen Stellen eingepflegt. Wie kann der betreffende User dann im Backend die externe Page einpflegen?

[maverik]

wenn jquery über register frontend modfiles eingebunden und mein colorbox snippet installiert ist einfach beim links setzen unter erweitert die stylesheet klasse iframe setzen

[FastAsAShark]

Ich habe mir die verschiedenen Hinweise im Tutorial durchgelesen. Aber vermutlich etwas durcheinandergeschm issen. So finde ich beispielsweise die verschiedenen Layoutbeispiele nicht wie beschrieben in den Zipdateien (da gibt es keine Ordner mit Example ...). Liegt vielleicht an der neuen Version, die ich heruntergeladen habe.

Jedenfalls funktioniert aber schonmal der Link, wenn ich ihn unter "erweitert" Colorbox eingegeben habe. Jedoch seitenfüllend als komplette neue Seite. Da ich den Besucher meiner Webseite jedoch nur auf einen Besuch zu einer anderen Seite schicken möchte, sollte die neue Seite schon nur temporär und in einem begrenzten Fenster zu sehen sein (daher auch mein oben erwähntes Popup mit reduzierten Browsermöglichkeiten).

Ich denke aber es liegt an der späten Stunde. Werde es mir daher nochmal in aller Ruhe ansehen und etwaigen Fehlern bei der Einbindung und dem Verständnis auf den Grund gehen.

[maverik]

mit einem link wäre die hilfe einfacher

[FastAsAShark]

Ich werde mir gleich nochmal meine Installation der Colorbox ansehen. Aus dem Tutorial habe ich die Einbindung weggelassen, da ich ja mit WB 2.8.2. arbeite.

Daher habe ich gleich die einzelnen Zeilen aus dem zweiten Punkt in den Header geschrieben (alle drei Codes untereinander weg).

Ich vermute es liegt daran, dass ich noch kein Beispiel auf der FTP-Ebene umkopieren konnte. Wie gesagt ... in der ZIP-Datei finde ich keine Beispiele, die ich öffnen kann (Baumverzeichnis sieht anders aus).

Die Darstellung des Iframes funktioniert mit der Colorbox zwar schon, allerdings als neue Seite. Somit ist auch die Browserzeile usw. zu sehen. Ich möchte aber die neue Seite auf eine Grösse von 600x600 auf aufgelegten Frame anzeigen. Der Besucher soll dann auch nur die Möglichkeit haben, etwas zu scrollen. Schließlich ist es ja nur ein Verweis auf eine externe Seite (soll ja anschließend wieder auf die eigentliche zurück).

Daher auch die Überlegung mit dem Popup. Dort kann man die Vorgaben ja recht bequem aus dem Backend auswählen (siehe Bild oben). Der Hinweis von dbs (modules/fckeditor/fckeditor/editor/dialog/fck_link.html) scheint auch weiter zu führen. Nur habe ich hier keinen Plan, bei welcher Variable ich nun die absoluten Werte eingeben muss. Habe es schon probiert, tut sich aber nicht wirklich etwas.


Wie gesagt: Ich würde gerne für verschiedene Variablen konstante Werte eingeben.
- Scrollbar soll immer aktiviert sein
- Position Width 600, Height 600, Left- 300 und Top 100 sollen immer gleiche Werte haben


Denke bei der Scrollbar ist es die Checkbox:

/ <input id="chkPopupScrollBars" name="chkFeature" value="scrollbars" type="checkbox" /><label for="chkPopupScrollBars" fckLang="DlgLnkPopScroll">ScrollBars</label>/

Bei den Positionen muss hier irgendwo die absolute Zahl im Code eingegeben werden:

/ <tr>
<td nowrap="nowrap"><span fckLang="DlgLnkPopWidth">Width</span></td>
<td>&nbsp;<input id="txtPopupWidth" type="text" maxlength="4" size="4" /></td>
</tr>
<tr>
<td nowrap="nowrap"><span fckLang="DlgLnkPopHeight">Height</span></td>
<td>&nbsp;<input id="txtPopupHeight" type="text" maxlength="4" size="4" /></td>
</tr>
</table>
</td>
<td>&nbsp;&nbsp;</td>
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td nowrap="nowrap"><span fckLang="DlgLnkPopLeft">Left Position</span></td>
<td>&nbsp;<input id="txtPopupLeft" type="text" maxlength="4" size="4" /></td>
</tr>
<tr>
<td nowrap="nowrap"><span fckLang="DlgLnkPopTop">Top Position</span></td>
<td>&nbsp;<input id="txtPopupTop" type="text" maxlength="4" size="4" /></td>
</tr>