Eigene Formate für Editor

Der hauseigene WYSIWYG-Editor von Shopware 6 ist der SW-Text-Editor. Über die Toolbar des SW-Text-Editors kannst Du problemlos Texte, wie z.B. die Produktbeschreibung formatieren. Du kannst Überschriften (h1-h6) einfügen, dem Text eine Farbe hinzufügen, ihn fett oder kursiv machen und vieles mehr.

Um aber einheitliche Produktbeschreibungen zu ermöglichen, wären es sinnvoll, schon vorgefertigte HTML-Elemente zusätzlich zur Verfügung zu stellen.

In unserem Bespiel soll ein 2 spaltiger DIV-Container eingebunden werden:

Die Option zum Einfügen des HTML-Code soll unter dem Button „Vorlage“ -> „Bild/Text“ verfügbar gemacht werden.

Der Einbau in die Toolbar des SW-Text-Editor:

1. Öffne im Verzeichnis deines Shopware-Shops die Datei: /vendor/shopware/administration/Resources/app/administration/src/app/component/form/sw-text-editor/index.js
2. Ca. ab Zeile 99 findest Du das Objekt buttonConfig. Im Array children des Types paragraph findest Du die Defintionen für die H1-H6 Überschriften und des Absatzes (p-Tag).
3. Füge innerhalb dieses Arrays folgenden Eintrag hinzu:



4. Wenn Du deine definierten CSS-Klassen im HTML im WYSIWYG-Editor visualisieren möchtest, dann kannst Du das in der Datei: /vendor/shopware/administration/Resources/app/administration/src/app/component/form/sw-text-editor/sw-text-editor.scss erledigen.
5. Um die Änderungen zu übernehmen, muss Du die im Verzeichnis /bin befindliche die Datei build-administration.sh ausführen.

Für das Einbinden von HTML gibt es verschiedene Typen. Welche Du nutzen kannst, findest Du unter diesem Link.