Erweiterung des Editors über das Plugins-Array
Der FDCE-Editor (Rich Text Editor) lässt sich modular über Plugins an deine Anforderungen anpassen. Die Aktivierung erfolgt bei der Initialisierung über die Eigenschaft plugins. Der Editor verwendet hierbei ein multidimensionales Array, um die Plugins nicht nur zu laden, sondern sie auch visuell in der Toolbar zu strukturieren.
Besonders komfortabel: Zusätzliche Stylesheets (CSS) und JavaScript-Dateien (Assets), die für die einzelnen Plugins benötigt werden, lädt der Editor im Hintergrund vollautomatisch nach.
Die Plugin-Struktur verstehen
Das plugins-Array erlaubt die Gruppierung von Funktionen, was sich direkt auf das Layout der Toolbar auswirkt:
- Verschachtelte Arrays (Gruppen): Plugins, die zusammen in einem Sub-Array stehen (z. B.
['table', 'image']), werden in der Toolbar visuell als Gruppe zusammengefasst (z. B. in einem gemeinsamen Dropdown oder einem abgegrenzten Bereich). - Einzelne Strings: Plugins, die als normaler Text-String übergeben werden (z. B.
'mentions'), stehen als eigenständige Funktion oder als Hintergrund-Dienst zur Verfügung.
📋 Vollständiges Integrationsbeispiel
Folgender Code zeigt die Einbindung der Kern-Dateien sowie eine erweiterte Initialisierung inklusive Auto-Save, Mentions und KI-Anbindung (Gemini):
<!-- 1. Core-Assets des Editors einbinden -->
<link rel="stylesheet" href="/assets/fdce/css/fdce.css">
<script src="/assets/fdce/fdce.js"></script>
<!-- 2. Editor initialisieren -->
<script>
fdce.init({
selector: '#mytextarea', // Welches HTML-Element soll ersetzt werden?
license_key: 'gpl', // Lizenztyp (z. B. Open-Source GPL)
language: 'de', // Lokalisierung auf Deutsch
// Plugin-Konfiguration und Toolbar-Gruppierung
plugins: [
[
'colorpicker',
'image',
'imageupload',
'table'
], // Gruppe 1: Medien & Tabellen
[
'code',
'emojis',
'ai',
'colorpicker'
], // Gruppe 2: Developer-Tools & Extras
'slashcommands', // Autocomplete via "/"
'floatingtoolbar', // Kontextmenü bei Textmarkierung
'autosave', // Automatische Entwurfssicherung
'mentions' // Nutzererwähnung via "@"
],
// Endpunkte für asynchrone Server-Anfragen (AJAX)
image_upload_url: '/admin/fdce-upload-image.php',
autosave_url: '/admin/fdce-autosave.php',
autosave_load_url: '/admin/fdce-autosave-load.php',
autosave_delete_url: '/admin/fdce-autosave-delete.php',
autosave_interval: 2500, // Speicher-Intervall in Millisekunden
page_id: <?= (int)$id ?>, // Dynamische ID aus PHP zur Zuordnung
mentions_url: '/admin/fdce-mentions.php',
// Spezifische Konfiguration für das KI-Plugin
ai: {
provider: 'gemini',
model: 'gemini-2.5-flash',
apiUrl: '/assets/fdce/plugins/ai/api/fdce-ai.php'
}
});
</script>💡 Details zu den erweiterten Schnittstellen:
- Autosave: Sichert alle 2500ms den aktuellen Textzustand im Hintergrund ab. Falls der Browser abstürzt, kann der Text über die Load-URL wiederhergestellt werden.
- Mentions & Slashcommands: Diese Plugins fangen Tastatureingaben (wie
@oder/) ab und öffnen interaktive Overlays, deren Daten dynamisch via AJAX nachgeladen werden. - AI Integration: Ermöglicht Textgenerierung und -korrektur direkt im Editor, indem Anfragen über die lokale API-Bridge an Google Gemini weitergeleitet werden.