Schriftart Einbinden für Dropdown im Editor - Hilfe!

Shopware 5 Programmierung
#1

Hallo Ihr lieben,
erst einmal Frohe Ostern Euch allen.

Aber jetzt geht’s um die Arbeit :wink:

Ich möchte gerne eine Schriftart so Implementieren, das diese in dem Texteditor im Dropdown Menü aus wählbar ist.

Es geht um die Schriftart:

  • Play-Regular.ttf
  • Play-Bold.ttf

Die Dateien sind sowohl über Google-Font, als auch Lokal als Dateien vorhanden.
Leider hat meine Suche kaum was Brauchbares ergeben, daher meine Frage.

** Welche Dateien muss ich erweitern?**
** Wo muss ich die Dateien ggf. Hinterlegen?**

#2

Ich Pushe das Thema einmal hoch, ist sehr dringend.
Da Shopware kein Support für die Community anbietet.

#3

Dafür gibt es ja auch die PE Version :slight_smile:
Wobei Shopware bei solchen Fragen generell kein Support macht (hat ja nix mit dem Shop selbst zu tun).

Auch was bezieht sich eigentlich deine Frage: Backend oder Frontend?

#4

Hallo @R4M,
also vor weg. Danke für Deine Antwort.

Also kein Mensch würde für so eine Banale Frage Tausende EURO hinblättern um das zu erfahren, Kundenservice steht bei SW wohl nicht so hoch im Kurs. Wenn wenigstens die Dokus passen würden, aber auch die sind ehr Grobgehalten und überaltert und damit defacto Nutzlos. Das Forum, naja ist zwar eine gute Anlaufstelle, aber hier bekommt man kaum klare Aussagen.

Da ist die Konkurrenz deutlich besser aufgestellt, hier sollte SW noch mal genau nacharbeiten. Entweder den Support etwas erweitern, oder die Dokus mal richtig erstellen.

Aber zu Deine Frage:
Im Texteditor im Backend, kann man neben der Vorlagen (H1-H6) auch die Schriftart und Größe auswählen. Die dann wiederum im Frontend ausgegeben wird, aktuell ist im Backend folgende Schriften Auswählbar:

SW-Schrift
SW-Schrift719×283 17 KB

Dass soll eben erweitert werden, oder eben Global via Less das alle Überschriften (H1-H6) als Play-Bold und der normal Text nur Play ausgegeben wird.

#5

Ah also Backend. Sorry da kann ich leider nicht nicht weiter helfen. Habe mich damit noch gar nicht befasst. Aber vielleicht hat ja ein anderer User eine Idee.

#6

Hallo,

Shopware verwendet als Editor TinyMCE - diesen müsstest Du ggfs. dann selbst erweitern:

Ob dies möglich ist in der älteren TinyMCE Version, die Shopware 5 verwendet, kann ich Dir leider nicht sagen.

Viele Grüße

#7

Hallo @SCOOPEX,
das Shopware TinyMCE verwendet war mir bekannt.
Das man hier diesen erweitern muss, das ist neu und danke für den Tipp.

Ich habe mir den Ordner angesehen bzw. heruntergeladen (engine/Library/TinyMce) und mal angesehen, leider konnte ich hier nichts finden. Du hast nicht zufällig auch den Tipp wie die Datei heißt oder?

#8

Hallo,

nein leider nicht - das Thema kam hier soweit mir bekannt noch nicht auf und habe mich selbst auch noch nicht damit beschäftigt bzw. auch keinen Bedarf.

Sorry

Viele Grüße

#9

Hi,

ich hab mal über das ganze geschaut. Leider hab ich noch keine Endlösung, aber zumindest schonmal einen Ansatz.

Wenn der Advanced Editor verwendet wird -
In den Datein:
/engine/Library/TinyMce/themes/advanced/editor_template.js
/engine/Library/TinyMce/themes/advanced/editor_template_src.js

Gibt es jeweils den Punkt „theme_advanced_fonts“.
Hier kannst du Fonts anlegen, welche dann auch im Backend angezeigt werden und das dementsprechende Attribut setzen. (Oswald=oswald). Dann wird ‚oswald‘ als Font-Family gesetzt und im Editor heißt die Font dann Oswald.
Klein Großschreibung ist hier wichtig.

Ist die Font im Frontend verfügbar, wird diese dann auch angezeigt.
Leider habe ich es noch nicht geschafft, dass diese Schriftart auch im Backend sauber gerendert wird.
Anscheinend kann man hier über die content.css vom Editor noch font-faces nachladen, dass ist mir jedoch noch nicht gelungen.

Vielleicht hilft dir das ja weiter. Hier noch der Link zu StackOverflow.

Grüße Alex

#10

Hallo Alex (@MrAle ),
vielen Dank für den Hinweis. Ich werde mir diesen mal übers wochenende anschauen :slight_smile:

#11

Okei, nun auch noch die Lösung fürs Backend.

Unter /themes/Backend/ExtJs/backend/index/header.tpl
habe ich im Block:
{block name=„backend/base/header/css“ append}

die Font importiert. Dadurch wirds dann auch im Backend sichtbar.

Screenshot 2021-04-11 103231
Screenshot 2021-04-11 1032311443×133 17.6 KB

Am Beispiel zu sehen mit Oswald und Indie Flower
Ist aber natürlich alles nicht Update sicher, dass muss man sich klar machen.
Falls es noch fragen gibt, gerne melden.

Gruß Alex