Admin-Backend: WYSIWYG und Vorschau stylen?

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
sph
Regular
Posts: 62
Joined: Wed Apr 26, 2006 3:28 pm

Admin-Backend: WYSIWYG und Vorschau stylen?

Post by sph » Wed Jan 20, 2016 5:42 pm

Hallo community,

ich möchte bei meinem Blog dafür sorgen dass die Anzeige beim Verfassen eines Eintrags mittels WYSIWYG ziemlich genau dem Endergebnis entspricht. Dafür muss ich wohl das Stylesheet anpassen, dass für Formatierungen im Text-Eingabefeld zuständig ist, sowie die Vorschau eines Eintrags.

Bei einer sehr alten s9y-Installation hab ich das irgendwie zustande gebracht, indem ich einfach die entsprechenden Systemdateien abgeändert habe. Ist lange her, nichtmehr nachvollziehbar - und seitdem hat sich s9y auch sehr verändert.


Beim jetzigen Blog (aktuelle Version) möchte ich nur ungern irgendwo in der s9y-Struktur herumwerken, mir wär eine Lösung lieber, die auch das nächste Update überlebt.

-> Welche Stylesheets werden vom WYSIWYG-Editor eigentlich verwendet? Wie und wo kann ich darin am besten Änderungen vornehmen, ohne dass die Daten beim nächsten Update wieder überschrieben werden?

-> Wo und wie kann ich die Vorschau eines Eintrags updatesicher anpassen? Ich hab noch im Kopf dass die Vorschau mittels iframe angezeigt wurde, aber auch da musste man dafür sorgen dass die zugehörige CSS angepasst wurde...

Danke für jede Hilfestellung,

Grüße!
the island of stupid - come to where the monkey is...

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by yellowled » Thu Jan 21, 2016 1:09 pm

sph wrote:ich möchte bei meinem Blog dafür sorgen dass die Anzeige beim Verfassen eines Eintrags mittels WYSIWYG ziemlich genau dem Endergebnis entspricht. Dafür muss ich wohl das Stylesheet anpassen, dass für Formatierungen im Text-Eingabefeld zuständig ist, sowie die Vorschau eines Eintrags.
Vorweg: zum Anpassen des WYSIWYG-Editors kann ich wenig bis nichts sagen. Ich weiß nur, dass CKE (ich nehme an, um den als WYSIWYG-Editor geht es?) normalerweise eine Datei namens editor.css einliest, in die man solche Styles kippen kann.

Ob und wie das in der CKE-Version von s9y klappt, kann ich nicht sagen (ich habe es nur mal für eine viel rudimentärere Anwendung in einem anderen CMS genutzt) – falls jemand dazu mehr sagen kann, ist es Ian. Ich bezweifele aber ehrlich gesagt, dass die Darstellung so wird, wie Du es Dir vorstellst.

Die Vorschau eines Eintrags solltest Du allerdings gar nicht anpassen müssen, die sollte – je nachdem, welches Theme Du verwendest – im Backend einfach funktionieren. Falls das nicht der Fall ist und Du ein eigenes Theme verwendest, musst Du eventuell Deine preview_iframe.tpl leicht anpassen.

In jedem Fall wären mehr Details über alles hilfreich. :wink:

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

sph
Regular
Posts: 62
Joined: Wed Apr 26, 2006 3:28 pm

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by sph » Sat Jan 23, 2016 5:09 pm

Hi yellowled, danke für deine Antwort!

Zum WYSIWYG:
Leider steht im Backend nur "WYSIWYG", aber ich denk es handelt sich um CKE. Man kann das Aussehen des Editors bzw. des Texts im Eingabefeld ändern, aber scheinbar wohl nicht wie von mir gewünscht in der Konfiguration eines eigenen Themes. Klar könnte man die Editor-Konfiguration im System ändern (ich vermute irgendwo bei /htmlarea/ckeditor/...), so hab ich das ja bereits mal hingefrickelt - aber schön ist das nicht und ich hab wenig Lust das wieder so zu machen.

Es gibt ja so viele Möglichkeiten das Aussehen von Front- und Backend zu verändern, ich hab drauf gehofft dass es auch für das Aussehen des WYSIWYG sowas wie ne Template-Datei gibt.



Zur Vorschau:
Ich benutze ein eigenes Theme - und da funktioniert die Vorschau eben nicht "einfach so". Mein Theme benutzt keine preview_iframe.tpl.

Ich hab diese Template-Datei mal angelegt (ich hab sie vom Theme 2k11 übernommen) und etwas herumprobiert, aber das hatte nicht den gewünschten Effekt. Ich hätte eben gerne dass in der Vorschau auch Dinge wie Blockquotes, Code, Listen, usw. so wie beim fertigen Artikel angezeigt werden, aber das ist nicht der Fall.

Das Vorschau-iframe verwendet scheinbar nicht wirklich mein Frontend-CSS, selbst wenn ich das in der preview_iframe.tpl händisch eintrage. Dann sehe ich zwar dass das iframe die richtige CSS lädt, aber die Vorschau wird trotzdem nicht entsprechend dargestellt.

Die Vorschau eines Eintrags im Backend wird also anders generiert als der fertige Eintrag selbst - und an diesen Unterschieden möchte ich etwas ändern. Nur... wo und wie?

In der preview_iframe.tpl vermutlich nicht, denn dort wird eben an irgend einer Stelle einfach nur {$preview} eingebunden - wo das herkommt oder wie das aussieht ist mir unklar.


Trotzdem Danke für deine Infos! :-)
the island of stupid - come to where the monkey is...

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by Timbalu » Sat Jan 23, 2016 6:13 pm

Das sind zweierlei Dinge!

Die Vorschau des WYSIWYG Editors im WYSIWYG Mode (alles unterhalb der CKEDITOR Toolbar - also das eigentliche textarea Feld) wird innerhalb vom CKEditor (in /htmlarea/ckeditor/ckeditor/skins/moono/***.css sowie im JS der LIB) gestyled (1). Besondere Serendipity CSS Spezialitäten diesbetreffend sind in /htmlarea/wysiwyg-style.css zu finden.
In der /htmlarea/ckeditor_s9y_config.js ist nachzulesen, wie man sich eine eigene custom config strickt, in der man u.a. das genannte CSS File 'wysiwyg-style.css' dann auch verändern kann (Inhalt und Platz, um es updatesicher zu machen). Analog im CKE Plugin.

Das zweite ist die Entry iFrame Vorschau von Serendipity im Entry Form Backend. Sie basiert auf dem template fallback Mechanismus und dem genannten file 'preview_iframe.tpl'. Sollte dein Theme keines haben, wird das nächsthöhere Fallback file genommen - in 2k11. Möchtest du also selber deine Preview stylen, musst du dein eigenes File haben und dieses anpassen.

Soviel zur Theorie.

Denn zwischen 2.0.x und der nächsten 2.1 Version sind wichtige Änderungen eingeflossen, die diesen fallback Mechanismus fixen, da das mit 2.0x in den meisten Fällen nur annähernd hinkam und nicht wirklich genau war. Ich kann jetzt aus dem Stehgreif nicht mehr sagen - wie genau das damals alles war, als ich es untersuchte, aber es hing u.a. auch mit der preview_iframe.tpl und zB der user.css des eigenes Themes zusammen. Und wenigstens für 2.1-dev kann ich sagen das es nun exakt funktioniert.

[...] Wenn ich mich recht erinnere, lud das 2.0x zb das /templates/2k11/admin/style.css im Falle eines non default 2k11 themes. Man konnte es aber als workaround zB überschreiben, indem man ein eigenes File unterhalb von

Code: Select all

    <link rel="stylesheet" href="{$head_link_stylesheet}">
in die preview_iframe.tpl einfügte, zb

Code: Select all

<link rel="stylesheet" href="{serendipity_getFile file="preview_user.css"}">
mit der man alles weitere überschreiben konnte. Oder noch einfacher {$head_link_stylesheet} durch ein eigenes hardkodiertes ersetzen.

(1) Übrigens ist der CKE [?] Toolbar-Button dafür da Infos über Namen und Version der besagten Lib zu geben.

Edit:
sph wrote:Es gibt ja so viele Möglichkeiten das Aussehen von Front- und Backend zu verändern, ich hab drauf gehofft dass es auch für das Aussehen des WYSIWYG sowas wie ne Template-Datei gibt.
Abgesehen davon, dass du "Aussehen des WYSIWYG" definieren müsstest, sollte ich vielleicht noch anmerken, dass ich nicht dazu rate an den styles oder am "Aussehen" des textarea wysiwyg-modes weiter herumzuarbeiten, als es mit den image floats in der wysiwyg-style.css bereits geschehen ist. Dazu ist das ganze Ding nicht robust genug, als das man da ohne tiefe Vorkenntnisse der internen Arbeitsweise von CKE "herumfummeln" sollte. Wer die hat, natürlich bitte gerne!
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by yellowled » Sat Jan 23, 2016 7:52 pm

sph wrote:Ich hätte eben gerne dass in der Vorschau auch Dinge wie Blockquotes, Code, Listen, usw. so wie beim fertigen Artikel angezeigt werden, aber das ist nicht der Fall.
Je nachdem, wie Dein Theme sonst so aussieht, wundert mich das nicht. Das ist ohne Beispiel schwer zu erklären und vielleicht der schwierigste Teil an der Theme-Entwicklung in s9y, aber im Prinzip sollte die preview_iframe.tpl in etwa die index.tpl (deren Markup-Struktur) abbilden und auch die dort eingebundenen Theme-Assets (Stylesheet, eventuell JS) einbinden. Hinzu kommt aber, dass die preview_iframe.tpl noch ein kleines Stück inline-JS nutzt, das ggf. angepasst werden muss.

Einfacher wäre es zu erklären, wenn Du mal den Code Deiner index.tpl hier copypasten könntest.
sph wrote:In der preview_iframe.tpl vermutlich nicht
Doch. Es gab/gibt da ein paar Holperigkeiten, wie Ian bereits beschrieben hat, aber dieses Template erzeugt ganz 100%ig bombensicher die Backendvorschau von Einträgen. Aber wie gesagt – wenn Dein Theme keine hat, nimmt s9y die preview_iframe.tpl aus 2k11 (Template-Fallback). Weicht Dein Theme stark vom Markup der index.tpl von 2k11 ab, kann das nicht klappen, also brauchst Du eine angepasste preview_iframe.tpl.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

sph
Regular
Posts: 62
Joined: Wed Apr 26, 2006 3:28 pm

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by sph » Mon Jan 25, 2016 6:58 pm

@Timbalu:

Danke für den Hinweis auf die /htmlarea/ckeditor_s9y_config.js :!:

Und natürlich für deine weiteren Ausführungen dazu. Jetzt konnte ich in meinem Theme-Verzeichnis eine entsprechende Konfiguration ablegen, sogar noch ein, zwei unbenötigte Toolbar-Buttons loswerden - und die Eingabe-Textarea dank eigenem CSS "aufhübschen".

Tiefgreifende oder weitergehende Veränderungen will ich in der WYSIWYG-CSS ja gar nicht machen, aber jetzt ähnelt der Text eben schon beim Tippen dem Layout der Seite (Schriftarten, Farben, Einrückungen, ...), das sieht gleich viel harmonischer aus :wink:



Damit betrachte ich meine WYSIWYG-Anliegen als erledigt, bleibt also noch die Sache mit der Vorschau...

...und da muss ich mir eure Infos erst nochmal langsam und der Reihe nach durch den Kopf gehen lassen. Ich habs nicht eilig, möchte das aber eben schon gern in Ordnung bringen.

Ich kann gern Code posten, aber das trägt auch nicht dazu bei dass ich verstehe was da gerade passiert - und ihr habt sicher auch was anderes zu tun als die kaputten Templates anderer Leute zu fixen, oder? :wink:

Danke nochmal für eure Hilfestellungen! Wenn ich trotzdem nicht weiterkomm werd ich mich wieder melden. Mit Template-Code. :-)


NACHTRAG:

Oh, das ging jetzt doch ganz flott - habs hinbekommen! :)

Ich hab mir eine sehr spartanische preview_iframe.tpl gebastelt und wurde dann schnell fündig: Ich hatte noch Klassen und IDs in meinem CSS, die eben genau bei der Vorschau nicht mehr vorhanden waren - und daher nicht zum tragen kamen :oops:

Ich hab bei der Gelegenheit aber nicht die preview_iframe.tpl korrigiert und die Klassen eingefügt, sondern die CSS entschlackt und auf unnötiges verzichtet.

Und plötzlich sieht die Vorschau eines Eintrags haargenau so aus wie der fertige Eintrag.

Danke nochmal für eure Hilfestellungen - ich hätt sonst ewig an den falschen Stellen gesucht! :D



@Timbalu:
Ach ja, wegen der CSS-Sache bei Version 2.0.x: Nach deinem Beitrag hab ich beschlossen die CSS meines Templates einfach hardcoded zu hinterlegen - schien mir die sicherste Lösung zu sein. :mrgreen:
the island of stupid - come to where the monkey is...

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Admin-Backend: WYSIWYG und Vorschau stylen?

Post by yellowled » Mon Jan 25, 2016 9:56 pm

sph wrote:Ich kann gern Code posten, aber das trägt auch nicht dazu bei dass ich verstehe was da gerade passiert - und ihr habt sicher auch was anderes zu tun als die kaputten Templates anderer Leute zu fixen, oder? :wink:
Es soll ja auch dazu beitragen, dass ich verstehe, was da passiert, damit ich Dir erklären kann, warum es passiert, damit Du das dann auch weißt. Dafür ist dieses Forum da. Wenn ich dazu keine Zeit habe, gehe ich nicht ins Forum, ganz einfach. :wink:
sph wrote:Ich hatte noch Klassen und IDs in meinem CSS, die eben genau bei der Vorschau nicht mehr vorhanden waren - und daher nicht zum tragen kamen :oops:
Es ist doch immer wieder erstaunlich, wie viel leichter sich manche Probleme lösen lassen, wenn man den tatsächlichen Code vor den Nase hat. :D

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply