DmfMarkdownEditor

DmfMarkdownEditor ersetzt den Standard-WYSIWYG-Editor in bestimmten Admin-Content-Bereichen durch einen vollwertigen Markdown-Editor (basierend auf md-editor-v3). Bestehende HTML-Inhalte werden beim Öffnen automatisch in Markdown konvertiert; in der Storefront stellt das Plugin einen |markdown-Twig-Filter bereit.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-markdown-editor
Plugin-Klasse	Dmf\MarkdownEditor\DmfMarkdownEditor
Version	1.0.0
Lizenz	MIT
Shopware	~6.7.0
PHP-Dependency	league/commonmark: ^2.4

Installation

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

Aktivierte Bereiche

Der Markdown-Editor übernimmt selektiv: andere Editor-Stellen (z. B. Kundengruppen-Registrierungs-Intro) bleiben beim Standard-WYSIWYG.

Bereich	Aktiviert
Produktbeschreibung	Ja
Kategoriebeschreibung	Ja
Hersteller-Beschreibung	Ja
CMS-Text-Element	Ja
Custom-Fields (HTML/Text-Editor-Typ)	Ja
Eigene Komponenten	über use-markdown="true"-Prop

Konfiguration

Im Admin unter Einstellungen → Erweiterungen → DmfMarkdownEditor.

Toolbar-Konfiguration

toolbarItems (multi-select). Reihenfolge per Drag-and-drop. Default: bold, underline, italic, strikeThrough, title, unorderedList, orderedList, link, image, table, revoke, next, preview, pageFullscreen.

Verfügbare Items: bold, italic, underline, strikeThrough, title, sub, sup, quote, unorderedList, orderedList, task, link, image, table, code, codeRow, revoke, next, preview, htmlPreview, pageFullscreen, fullscreen, catalog, mermaid, katex.

Editor-Einstellungen

Feld	Typ	Default	Wirkung
previewTheme	single-select	github	Vorschau-Theme: github, vuepress, default, mk-cute, smart-blue, cyanosis.
editorLanguage	single-select	de-DE	Editor-UI-Sprache (en-US oder de-DE).
showPreviewOnStart	bool	false	Vorschau-Panel beim Öffnen einblenden.
showCodeRowNum	bool	true	Zeilennummern in Code-Blöcken.

Custom-Toolbar: Button-Tool

Der Editor bringt ein eigenes Button-Tool mit, das Bootstrap-Button-Links direkt in Markdown einfügt.

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

Gerendert:

<a href="url" class="btn btn-primary">Button-Text</a>

Verfügbare Button-Varianten:

Variante	Klassen
Primary	.btn .btn-primary
Secondary	.btn .btn-secondary
Link	.btn .btn-link
Outline Primary	.btn .btn-outline-primary
Outline Secondary	.btn .btn-outline-secondary
Ghost	.btn .btn-ghost

CommonMark-Attributes

Die Klassen-Syntax wird über die CommonMark Attributes Extension geparst. Stelle sicher, dass dein Theme die Bootstrap-Button-Styles bereitstellt.

Auto-HTML→Markdown-Konvertierung

Beim ersten Öffnen wandelt das Plugin bestehende HTML-Inhalte automatisch in Markdown:

• Erkennt strukturelle Tags (p, div, h1–h6, ul, ol, table, …).
• Bewahrt Shopware-Data-Mapping-Syntax {{ product.name }}.
• Konvertiert Button-Links inkl. CSS-Klassen.
• Säubert leere Absätze und übermäßige Whitespaces.

Nur initial

Die Konvertierung läuft nur beim erstmaligen Laden eines Inhalts. Mischinhalte erfordern manuelle Nacharbeit oder ein Re-Save.

Verwendung

Admin (automatisch)

Nach Installation übernehmen die unterstützten Bereiche den Markdown-Editor automatisch.

Admin (manuelle Komponente)

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

Markdown für Custom-Text-Editoren aktivieren

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

Storefront (Twig-Filter)

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

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

{# Funktionsform #}
{{ render_markdown(someVariable) }}

Backend-API

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);
    }
}

Komponenten-Props (<dmf-markdown-editor>)

Prop	Typ	Default	Beschreibung
modelValue	String	''	v-model-Bindung
label	String	''	Feldbeschriftung
placeholder	String	''	Placeholder
disabled	Boolean	false	Editor deaktivieren
error	Object	null	Validierungs-Fehler-Objekt
previewTheme	String	null	Override
codeTheme	String	null	Override
toolbarItems	Array	null	Override

Fehlerbehebung

• Editor lädt nicht: bin/build-js.sh, dann bin/build-administration.sh, dann cache:clear.
• Toolbar-Items fehlen: Plugin-Konfig prüfen, Browser-Cache leeren.
• Markdown wird in der Storefront nicht gerendert: |markdown-Filter setzen, sicherstellen, dass der Inhalt tatsächlich Markdown ist.
• WYSIWYG erscheint statt Markdown: :use-markdown="true" an sw-text-editor setzen, falls außerhalb der Standard-Bereiche.