TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by lck » Wed Oct 11, 2017 9:19 pm

In "modernen" Templates verwendet man ja gerne Schriftarten wie Open Sans, Roboto, Lato, Oswald usw.. Jetzt gibt es aber ein Problem mit dem Editor, der kennt diese Fonts noch nicht.
Hier mal 2 Bilder um das zu verdeutlichen wie das aussieht (Verwendet wurden für H1-H6 Font "Oswald" und für den Content-Bereich Font "Roboto") :
Font_TinyMCE4.jpg
Vorschau.jpg
Bei gewissen Schriftarten wie z.B. OpenSans-Regular, ist der Unterschied kaum zu erkennen, nicht so gravierend.

Nach etwas Suchen, habe ich eine funktionierende Lösung für das Problem gefunden und meine init-Datei (init_fontawesome.js, umbenannt zu init_fontawesome.lck.js) um diese Einträge am Ende der Datei erweitert:

Code: Select all

extended_valid_elements: 'span[*]', /* Diese Zeile gibt es schon, ohne Komma am Ende, das muss angefügt werden */
  
font_formats: "Oswald=Oswald,sans-serif;Roboto=Roboto,Arial,sans-serif;Andale Mono=andale mono,monospace;Arial=arial,helvetica,sans-serif;Arial Black=arial black,sans-serif;Book Antiqua=book antiqua,palatino,serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,palatino,serif;Helvetica=helvetica,arial,sans-serif;Impact=impact,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco,monospace;Times New Roman=times new roman,times,serif;Trebuchet MS=trebuchet ms,geneva,sans-serif;Verdana=verdana,geneva,sans-serif;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
  
content_css: "%CMSIMPLE_ROOT%templates/meintemplate/stylesheet.css,%CMSIMPLE_ROOT%templates/meintemplate/fonts/oswald/oswald.css,%CMSIMPLE_ROOT%templates/meintemplate/fonts/roboto/roboto.css",
  
fontsize_formats: '6pt 8pt 10pt 12pt 14pt 18pt 20pt 22pt 24pt 28pt 32pt 36pt' /* Optional, das muss nicht sein */
} /* Die Klammer gibt es schon */
Jetzt habe ich zwei Probleme, eigentlich drei:
1.) Ist das so richtig?
2.) Die Pfade bei content_css: Wie kann ich die allgemein gültig einfügen, so nach dem Schema $pth['folder']['template']?
3.) Dieses Code-Schnipsel müsste auch (irgendwie) mit dem Template ausgeliefert werden, zumindest dokumentiert werden, will man eine 1:1-Ansicht haben. Man könnte die Fonts in den root legen, aber irgendwie ist das auch nicht praktikabel :?

ODER es gibt eine andere Lösung?
You do not have the required permissions to view the files attached to this post.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by cmb » Wed Oct 11, 2017 10:02 pm

Ohne irgendwelche Anpassungen an den init_*.js Dateien, wird normalerweise das eigentliche Template-Stylesheet (stylesheet.css) vom TinyMCE erkannt; zusätzliche Stylesheets, die template.htm verlinkt, sieht der TinyMCE nicht. Da könnte es also sinnvoll sein, die Schriftarten-Stylesheets entweder direkt in stylesheet.css zu integrieren, oder per @import zu importieren (bin nicht sicher, ob das vom TinyMCE erkannt wird). Damit sollten zumindest die Schriftarten im TinyMCE richtig angezeigt werden; eventuell werden dann sogar die Auswahllisten korrekt befüllt.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by frase » Thu Oct 12, 2017 7:20 am

Christoph hat ja schon alles richtig beschrieben.

Ich mache es in letzter Zeit oft so:
Die Regeln für die Schriftarten lasse ich online minifizieren und setze sie dann (in einer Zeile) gleich an den Anfang von stylesheet.css.
Die Auswahllisten werden dann auch korrekt befüllt. Nur die Schriftgrößen werden wohl in pt angegeben, statt wie gewünscht in em oder rm.
Die Darstellung im Inhalt ist aber korrekt.

Das ist aber alles nicht optimal. Schriftart und Schriftgröße (auch Farbe und Hintergrundfarbe) sollten im Editor eigentlich gar nicht wählbar sein.
Denn das erzeugt inline-Styles und die wirken sich bei einigen Seitenbewertungen negativ aus.
Deshalb entferne ich diese Dinge auch oft aus den inits.

Der Redakteur, der letztendlich die Texte schreibt, sollte gar nicht auf die Idee kommen irgendeine Schriftart händisch einzustellen. Dazu sollten vom Template-Gestalter Klassen vorgesehen werden.

Da das nun auch wieder u.U. sehr aufwendig ist, für alle möglichen Fälle Definitionen festzulegen (p.klasse, span.klasse, div.klasse ...) manipuliere ich die init dann so, dass die im Template angelegten Klassen wieder alle angezeigt werden. Also .rot wird dann im Editor wieder angeboten.

Mir ist klar, dass das von vielen nicht so gewünscht wird (Holger, Manu) - mir gefällt das aber besser.

Der entsprechende Zusatz in der init:

Code: Select all

  style_formats_merge: true,
  style_formats: [{
      title: 'html5', items: [                        // einige html5-elemente hinzufügen
        { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
        { title: 'article', block: 'article', wrapper: true, merge_siblings: false },
        { title: 'hgroup', block: 'hgroup', wrapper: true },
        { title: 'aside', block: 'aside', wrapper: true },
        { title: 'figure', block: 'figure', wrapper: true }
        ]
    }],
    visualblocks_default_state: false,
    end_container_on_empty_block: true,
    importcss_selector_filter: /^(?!\.fa)/i,
    importcss_groups: [
        {
            title: 'Template-Styles',            // Template-Styles erscheint dann unter "Formate"
            filter: /^(?!\.fa)/i
        },
    ] 

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by lck » Thu Oct 12, 2017 8:37 am

cmb wrote:Da könnte es also sinnvoll sein, die Schriftarten-Stylesheets entweder direkt in stylesheet.css zu integrieren
Ja das dachte ich auch, deswegen zur Sicherheit der Test mit Open Sans-Regular direkt im stylesheet.css. Schau ich mir nochmal an, vermutlich habe ich irgendwo eine Bock geschossen.
frase wrote:Die Regeln für die Schriftarten lasse ich online minifizieren
Gib uns doch mal einen Link. Ich kenne momentan nur google-webfonts-helper, der ist nicht schlecht. Man kann aber nichts minifizieren, nur zwischen "Best support" und "Modern Browsers" wählen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage


lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by lck » Thu Oct 12, 2017 9:05 am

frase wrote:Suche nach "css compressor"
Da haben wir uns falsch verstanden, einen Kompressor habe ich selber ;) . Ich meinte, die Schriften nur auf eot und woff zu reduzieren. Machst du das manuell oder per Online-Tool.
lck wrote:Ich kenne momentan nur google-webfonts-helper, der ist nicht schlecht. Man kann aber nichts minifizieren, nur zwischen "Best support" und "Modern Browsers" wählen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by frase » Thu Oct 12, 2017 9:14 am

Sorry, ja falsch verstanden.

Manuell!

Entweder nimmst du gleich "modern Browsers", dann hast du sowieso nur woff + woff2 oder eben halt zur Sicherheit für alte IEs alles - und dann die überflüssigen (ttf und svg, die wirklich sehr groß sind) händisch entfernen.

Nachtrag:
Eine Überlegung ist es auf jeden Fall wert, ob man nicht immer gleich noch "latin-ext" mit anklickt.
Dann kannst du auch "Bjørn" richtig schreiben ;-)

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Post by lck » Thu Oct 12, 2017 9:27 am

frase wrote:Manuell!
Ich bisher auch. Gibt es wirklich kein Online- oder Freeware-Tool?
frase wrote:Eine Überlegung ist es auf jeden Fall wert, ob man nicht immer gleich noch "latin-ext" mit anklickt.
Dann kannst du auch "Bjørn" richtig schreiben
Danke für den Tipp, das wollte ich immer schon mal ;)
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply