WYSIWYG-Editor

Der WYSIWYG-Editor (What You See Is What You Get) ermöglicht die komfortable Bearbeitung von Textinhalten im OXID eShop Administrationsbereich — ohne HTML-Kenntnisse. Er basiert auf dem Open-Source-Editor Summernote und ist in allen Editionen (CE, PE, EE) enthalten.

Der WYSIWYG-Editor nutzt die Mediathek zur Einbindung von Medien in Textinhalte. Die Mediathek muss daher vor dem WYSIWYG-Editor aktiviert werden (siehe Installation).

Einsatzbereiche

Der Editor ist an allen Stellen im Administrationsbereich aktiv, an denen Textinhalte bearbeitet werden. Das umfasst unter anderem:

Lange Produktbeschreibungen (Artikel verwalten ‣ Artikel ‣ Erweitert)
CMS-Seiten (Kundeninformationen ‣ CMS-Seiten)
Lange Kategoriebeschreibungen (Artikel verwalten ‣ Kategorien)
Beschreibungen für Zahlungs- und Versandarten
E-Mail-Vorlagen (sofern textareabasiert)
Alle weiteren Admin-Detailseiten, die ein Textfeld für längere Inhalte verwenden

Abbildung: Der WYSIWYG-Editor in einer CMS-Seite (ohne Visual CMS).

Abbildung: Der WYSIWYG-Editor in einem Artikel-Langtext. In diesem Beispiel wurde die Toolbar durch das Examples Module angepasst (siehe Editor anpassen (ab Content & Medien Bundle 10) ).

Hint

Die Aktivierung des WYSIWYG-Editors erfolgt global für alle Admin-Textbereiche. Eine einzelne Stelle kann nicht separat aktiviert oder deaktiviert werden.

Note

Wenn Visual CMS (Professional und Enterprise Edition) aktiviert ist, übernimmt Visual CMS die Bearbeitung von CMS-Seiten mit seinem eigenen Widget-basierten Editor. Der WYSIWYG-Editor bleibt in diesem Fall für alle anderen Textbereiche (Produktbeschreibungen, Kategoriebeschreibungen usw.) weiterhin aktiv.

Editor anpassen (ab Content & Medien Bundle 10)

Ab WYSIWYG-Editor 7 (Content & Medien Bundle 10) kann der Editor durch Module angepasst werden. Zwei Twig-Blöcke stehen zur Verfügung, über die Module eigene Plugins laden und die Editor-Konfiguration verändern können.

Vorgehensweise

Erstellen Sie in Ihrem Modul eine Template-Erweiterung für den WYSIWYG-Editor. Die Datei muss im folgenden Verzeichnis Ihres Moduls liegen:

views/twig/extensions/modules/ddoewysiwyg/ddoewysiwyg.html.twig

Die Datei erweitert das Original-Template des WYSIWYG-Editors:

{% extends '@ddoewysiwyg/ddoewysiwyg.html.twig' %}

Eigene Summernote-Plugins laden

Über den Block ddoe_wysiwyg_plugins können Sie eigene Summernote-Plugins einbinden. Plugins sind JavaScript-Dateien, die dem Editor neue Funktionen hinzufügen (z. B. ein Print-Button, ein HTML-Cleaner oder ein branchen-spezifisches Werkzeug).

{% block ddoe_wysiwyg_plugins %}
    {{ parent() }}
    {{ script({ include: oViewConf.getModuleUrl('mein_modul', 'out/src/js/summernote-ext-print.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
    {{ script({ include: oViewConf.getModuleUrl('mein_modul', 'out/src/js/summernote-cleaner.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
{% endblock %}

Important

Rufen Sie {{ parent() }} auf, um die Standard-Plugins des Editors beizubehalten. Ohne {{ parent() }} werden die Original-Plugins durch Ihre ersetzt.

Editor-Optionen anpassen

Über den Block ddoe_wysiwyg_summernote_options können Sie die Konfiguration des Editors anpassen — zum Beispiel die Toolbar, die verfügbaren Schriftarten oder andere Summernote-Optionen.

{% block ddoe_wysiwyg_summernote_options %}
    {{ parent() }}
    Object.assign(summernoteOptions, {
        fontNames: [
            'Arial', 'Courier New', 'Eigene Schriftart'
        ],
        fontNamesIgnoreCheck: ['Eigene Schriftart'],
        addDefaultFonts: false,
        toolbar: [
            ['formatting', ['bold', 'italic']],
            ['font', ['fontname', 'fontsize']],
            ['misc', ['cleaner', 'print', 'codeview']]
        ],
    });
{% endblock %}

In diesem Beispiel wird die Toolbar auf drei Gruppen reduziert, die Schriftartenliste auf drei Einträge eingeschränkt und die Plugins cleaner und print aus dem Block ddoe_wysiwyg_plugins in der Toolbar verfügbar gemacht.

Das Ergebnis sieht im Administrationsbereich so aus:

Angepasste WYSIWYG-Toolbar durch das Examples Module

Abbildung: Die durch das Examples Module angepasste Toolbar — nur Bold, Italic, Schriftart, Schriftgröße, Cleaner, Print und Quellcode-Ansicht.

Hint

Die vollständige Liste der Summernote-Optionen finden Sie in der Summernote-Dokumentation.

Vollständiges Beispiel

Ein funktionierendes Beispiel, das zwei Plugins lädt und die Toolbar anpasst, finden Sie im OXID Examples Module (Branch b-7.5.x):

views/twig/extensions/modules/ddoewysiwyg/ddoewysiwyg.html.twig

Moduleinstellungen

Die Moduleinstellungen des WYSIWYG-Editors finden sich im OXID eShop Administrationsbereich unter Erweiterungen ‣ Module ‣ WYSIWYG Editor + Mediathek ‣ Einstell.