Guppy Docs

Deutsch

English

Deutsch

English

Appearance

Markdown Editor Plugin ​

Zum Plugin

Das DmfMarkdownEditor Plugin ersetzt den Standard-WYSIWYG-Editor durch einen leistungsstarken Markdown-Editor für ausgewählte Inhaltsbereiche in der Shopware Administration. Mit Live-Vorschau, konfigurierbarer Toolbar und automatischer HTML-zu-Markdown-Konvertierung.

Inhalt dieser Seite:

Voraussetzungen ​

  • Shopware 6.7.0 oder höher
  • PHP 8.2 oder höher

Installation ​

bash
composer require dmf/sw6-plugin-markdown-editor
bin/console plugin:install --activate DmfMarkdownEditor
bin/build-js.sh
bin/console cache:clear

Features ​

  • Selektive Ersetzung: Nur bestimmte Inhaltsbereiche nutzen Markdown
  • Automatische Konvertierung: Bestehender HTML-Inhalt wird automatisch zu Markdown konvertiert
  • Live-Vorschau: Echtzeit-Rendering des Markdown-Inhalts
  • Konfigurierbare Toolbar: Wähle die benötigten Werkzeuge aus
  • GitHub Flavored Markdown: Tabellen, Task-Listen, Code-Blöcke
  • Button-Tool: Bootstrap-Buttons direkt im Editor erstellen
  • Twig-Filter: |markdown für die Storefront-Ausgabe
  • Dark/Light Mode: Passt sich dem Admin-Theme an

Unterstützte Inhaltsbereiche ​

Der Markdown-Editor wird automatisch für folgende Bereiche aktiviert:

InhaltsbereichAutomatisch aktiviert
ProduktbeschreibungJa
KategoriebeschreibungJa
HerstellerbeschreibungJa
CMS-Text-ElementJa
Custom Fields (HTML/Text-Editor)Ja
Eigene KomponentenVia use-markdown="true" Prop

Alle anderen Text-Editoren (z.B. Kundengruppen-Registrierungstext) verwenden weiterhin den Standard-WYSIWYG-Editor.

Konfiguration ​

Pfad: Einstellungen → Erweiterungen → DmfMarkdownEditor

Toolbar-Elemente ​

Wähle die anzuzeigenden Toolbar-Elemente:

ElementBeschreibung
boldFett (text)
italicKursiv (text)
underlineUnterstrichen
strikeThroughDurchgestrichen (text)
titleÜberschriften (H1-H6)
subTiefgestellt
supHochgestellt
quoteBlockzitat
unorderedListAufzählung
orderedListNummerierte Liste
taskAufgabenliste
linkLink einfügen
imageBild einfügen
tableTabelle einfügen
codeCode-Block
codeRowInline-Code
revokeRückgängig
nextWiederholen
previewVorschau umschalten
fullscreenVollbildmodus
catalogInhaltsverzeichnis
mermaidMermaid-Diagramme
katexMathematische Formeln

Editor-Einstellungen ​

EinstellungBeschreibungStandard
Editor-SpracheOberflächensprachede-DE
Vorschau beim StartVorschau-Panel beim Öffnen anzeigenfalse
ZeilennummernZeilennummern im Code anzeigentrue
MindesthöheMinimale Editor-Höhe in Pixel300

Vorschau-Themes ​

ThemeBeschreibung
githubGitHub-Stil (empfohlen)
vuepressVuePress-Dokumentationsstil
defaultStandard md-editor-v3 Stil
mk-cuteVerspielter Stil
smart-blueProfessionelles Blau
cyanosisCyan-Akzente

Code-Themes ​

ThemeBeschreibung
githubGitHub-Stil
atomAtom One Dark
a11yBarrierefreies Theme
gradientFarbverlauf
stackoverflowStack Overflow Stil

Button-Tool ​

Der Editor enthält ein spezielles Button-Tool zum Erstellen von Bootstrap-Buttons.

Syntax ​

markdown
[Button-Text](url){.btn .btn-primary}

Verfügbare Button-Varianten ​

VarianteKlassenBeschreibung
Primary.btn .btn-primaryPrimäre Aktion
Secondary.btn .btn-secondarySekundäre Aktion
Link.btn .btn-linkLink-Stil
Outline Primary.btn .btn-outline-primaryUmrandeter Primary
Outline Secondary.btn .btn-outline-secondaryUmrandeter Secondary
Ghost.btn .btn-ghostTransparenter Button

Verwendung ​

  1. Klicke auf das BTN-Icon in der Toolbar
  2. Wähle eine Button-Variante aus dem Dropdown
  3. Ersetze "Button Text" durch deinen Text
  4. Ersetze "url" durch deinen Ziel-Link

Storefront-Verwendung ​

Twig-Filter ​

Verwende den |markdown Filter, um Markdown als HTML zu rendern:

twig
{# In Produkt-Templates #}
{{ product.description|markdown }}

{# In Custom Fields #}
{{ product.translated.customFields.my_markdown_field|markdown }}

{# Als Funktion #}
{{ render_markdown(someVariable) }}

PHP-Service ​

php
use Dmf\MarkdownEditor\Service\MarkdownRendererService;

class MyService
{
    public function __construct(
        private readonly MarkdownRendererService $markdownRenderer
    ) {}

    public function convertMarkdown(string $markdown): string
    {
        return $this->markdownRenderer->render($markdown);
    }
}

Markdown für eigene Komponenten ​

Via use-markdown Prop ​

Aktiviere Markdown für einen bestehenden sw-text-editor:

twig
<sw-text-editor
    :value="myContent"
    :use-markdown="true"
    @update:value="onContentChange"
/>

Direkte Komponenten-Verwendung ​

twig
<dmf-markdown-editor
    v-model="myContent"
    label="Beschreibung"
    placeholder="Markdown eingeben..."
    preview-theme="github"
/>

Komponenten-Props ​

PropTypStandardBeschreibung
modelValueString''v-model Binding
labelString''Feld-Label
placeholderString''Platzhaltertext
disabledBooleanfalseEditor deaktivieren
previewThemeStringnullVorschau-Theme überschreiben
codeThemeStringnullCode-Theme überschreiben
toolbarItemsArraynullToolbar-Elemente überschreiben

Markdown-Syntax-Referenz ​

Grundformatierung ​

markdown
**fett** oder __fett__
*kursiv* oder _kursiv_
~~durchgestrichen~~
`inline code`

Überschriften ​

markdown
# H1
## H2
### H3
#### H4
##### H5
###### H6

Listen ​

markdown
- Aufzählungspunkt
- Weiterer Punkt

1. Nummerierter Punkt
2. Weiterer Punkt

- [x] Aufgabe erledigt
- [ ] Aufgabe offen
markdown
[Link-Text](https://example.com)
![Alt-Text](bild.jpg)

Buttons ​

markdown
[Primary Button](https://example.com){.btn .btn-primary}
[Secondary Button](/seite){.btn .btn-secondary}
[Link Button](#anker){.btn .btn-link}

Code-Blöcke ​

markdown
```javascript
const hello = 'world';
```

Tabellen ​

markdown
| Spalte 1 | Spalte 2 |
|----------|----------|
| Zelle 1  | Zelle 2  |

Blockzitate ​

markdown
> Dies ist ein Zitat
> Mehrere Zeilen

Gestylter Text ​

Füge CSS-Klassen zu Block-Elementen hinzu:

markdown
## Headline {.font-lining}

Dieser Text ist gestylt {.text-sm}

Automatische HTML-zu-Markdown-Konvertierung ​

Beim Öffnen von Inhalten, die zuvor als HTML gespeichert wurden, konvertiert das Plugin diese automatisch zu Markdown.

Features:

  • Erkennt strukturelle HTML-Tags (p, div, h1-h6, ul, ol, table, etc.)
  • Erhält Shopware Data-Mapping-Syntax {<!-- -->{ product.name }<!-- -->}
  • Konvertiert Button-Links mit CSS-Klassen
  • Bereinigt leere Absätze und überschüssige Leerzeichen

Toolbar anpassen ​

Via Plugin-Konfiguration (empfohlen) ​

  1. Gehe zu Einstellungen → Erweiterungen → DmfMarkdownEditor
  2. Wähle/abwähle Toolbar-Elemente
  3. Speichere die Konfiguration

Via Komponenten-Props ​

twig
<dmf-markdown-editor
    v-model="content"
    :toolbar-items="['bold', 'italic', 'link', 'preview']"
/>

Toolbar-Trennzeichen ​

  • - fügt einen visuellen Trenner ein
  • = richtet alle folgenden Elemente rechts aus
javascript
['bold', 'italic', '-', 'link', '=', 'fullscreen']
//  links      | sep | links | rechts ausrichten | rechts

Troubleshooting ​

Editor lädt nicht ​

  1. NPM-Abhängigkeiten installieren: bin/build-js.sh
  2. Admin neu bauen: bin/build-administration.sh
  3. Cache leeren: bin/console cache:clear

Toolbar-Elemente werden nicht angezeigt ​

  1. Prüfe die Plugin-Konfiguration im Admin
  2. Stelle sicher, dass die Elemente ausgewählt sind
  3. Browser-Cache leeren

Markdown wird in der Storefront nicht gerendert ​

  1. Verwende den |markdown Filter: {<!-- -->{ content|markdown }<!-- -->}
  2. Stelle sicher, dass der Inhalt tatsächlich Markdown ist, nicht HTML

WYSIWYG-Editor erscheint statt Markdown ​

Der Markdown-Editor erscheint nur für unterstützte Inhaltsbereiche. Für eigene Text-Editoren füge das use-markdown="true" Prop hinzu.

HTML-Inhalt wird nicht konvertiert ​

Die automatische HTML-zu-Markdown-Konvertierung erfolgt nur beim initialen Laden. Bei gemischtem Inhalt muss dieser eventuell manuell bereinigt oder neu gespeichert werden.

Copyright © 2025-heute digital.manufaktur GmbH