{"id":1391,"date":"2023-11-06T15:46:14","date_gmt":"2023-11-06T14:46:14","guid":{"rendered":"https:\/\/wiki.ad-libitum.info\/?page_id=1391"},"modified":"2023-11-06T15:54:37","modified_gmt":"2023-11-06T14:54:37","slug":"eigene-formate-fuer-editor","status":"publish","type":"page","link":"https:\/\/wiki.ad-libitum.info\/?page_id=1391","title":{"rendered":"Eigene Formate f\u00fcr Editor"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"290\" src=\"https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/editor.png\" alt=\"\" class=\"wp-image-1392\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Der hauseigene WYSIWYG-Editor von Shopware 6 ist der SW-Text-Editor. \u00dcber die Toolbar des SW-Text-Editors kannst Du problemlos Texte, wie z.B. die Produktbeschreibung formatieren. Du kannst \u00dcberschriften (h1-h6) einf\u00fcgen, dem Text eine Farbe hinzuf\u00fcgen, ihn fett oder kursiv machen und vieles mehr.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um aber einheitliche Produktbeschreibungen zu erm\u00f6glichen, w\u00e4ren es sinnvoll, schon vorgefertigte HTML-Elemente zus\u00e4tzlich zur Verf\u00fcgung zu stellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In unserem Bespiel soll ein 2 spaltiger DIV-Container eingebunden werden:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"103\" src=\"https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/Bild_2023-11-06_154105011.png\" alt=\"\" class=\"wp-image-1393\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"own-left\"><\/div><code><div class=\"own-product-column\"><div class=\"own-right\"><\/div><\/div><\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Option zum Einf\u00fcgen des HTML-Code soll unter dem Button \u201eVorlage\u201c -&gt; \u201eBild\/Text\u201c verf\u00fcgbar gemacht werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Einbau in die Toolbar des SW-Text-Editor:<\/p>\n\n\n\n<ol>\n<li>\u00d6ffne im Verzeichnis deines Shopware-Shops die Datei: <code>\/vendor\/shopware\/administration\/Resources\/app\/administration\/src\/app\/component\/form\/sw-text-editor\/index.js<\/code><\/li>\n<li>Ca. ab Zeile 99 findest Du das Objekt <code>buttonConfig<\/code>. Im Array <code>children<\/code> des Types <code>paragraph<\/code> findest Du die Defintionen f\u00fcr die H1-H6 \u00dcberschriften und des Absatzes (p-Tag).<\/li>\n<li>F\u00fcge innerhalb dieses Arrays folgenden Eintrag hinzu:<\/li>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"959\" height=\"104\" src=\"https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/Bild_2023-11-06_154441111.png\" alt=\"\" class=\"wp-image-1394\" srcset=\"https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/Bild_2023-11-06_154441111.png 959w, https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/Bild_2023-11-06_154441111-300x33.png 300w, https:\/\/wiki.ad-libitum.info\/wp-content\/uploads\/Bild_2023-11-06_154441111-768x83.png 768w\" sizes=\"auto, (max-width: 959px) 100vw, 959px\" \/><\/figure><\/li>\n<li>Wenn Du deine definierten CSS-Klassen im HTML im WYSIWYG-Editor visualisieren m\u00f6chtest, dann kannst Du das in der Datei: <code>\/vendor\/shopware\/administration\/Resources\/app\/administration\/src\/app\/component\/form\/sw-text-editor\/sw-text-editor.scss<\/code> erledigen.<\/li>\n<li>Um die \u00c4nderungen zu \u00fcbernehmen, muss Du die im Verzeichnis <code>\/bin<\/code> befindliche die Datei <code>build-administration.sh<\/code> ausf\u00fchren.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr das Einbinden von HTML gibt es verschiedene Typen. Welche Du nutzen kannst, findest Du unter diesem <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/execCommand#commands\" rel=\"noopener\">Link<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der hauseigene WYSIWYG-Editor von Shopware 6 ist der SW-Text-Editor. \u00dcber die Toolbar des SW-Text-Editors kannst Du problemlos Texte, wie z.B. die Produktbeschreibung formatieren. Du kannst \u00dcberschriften (h1-h6) einf\u00fcgen, dem Text eine Farbe hinzuf\u00fcgen, ihn fett oder kursiv machen und vieles mehr. Um aber einheitliche Produktbeschreibungen zu erm\u00f6glichen, w\u00e4ren es sinnvoll, schon vorgefertigte HTML-Elemente zus\u00e4tzlich zur [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1391","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/1391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1391"}],"version-history":[{"count":0,"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=\/wp\/v2\/pages\/1391\/revisions"}],"wp:attachment":[{"href":"https:\/\/wiki.ad-libitum.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}