Page 1 of 1

TinyMCE4 - Schriftart (Web Fonts) hinzufügen

Posted: Wed Oct 11, 2017 9:19 pm
by lck
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?

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

Posted: Wed Oct 11, 2017 10:02 pm
by cmb
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.

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

Posted: Thu Oct 12, 2017 7:20 am
by frase
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
        },
    ] 

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

Posted: Thu Oct 12, 2017 8:37 am
by lck
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.

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

Posted: Thu Oct 12, 2017 8:49 am
by frase

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

Posted: Thu Oct 12, 2017 9:05 am
by lck
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.

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

Posted: Thu Oct 12, 2017 9:14 am
by frase
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 ;-)

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

Posted: Thu Oct 12, 2017 9:27 am
by lck
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 ;)