Stellt den TinyMCE 8 Editor im CMS REDAXO bereit.
Moduleingabe
<textarea class="tiny-editor form-control" data-profile="full" name="REX_INPUT_VALUE[1]">REX_VALUE[1]</textarea>data-profile="full"definiert das gewünschte Profildata-lang="de"legt die Sprache für den Editor fest
Wählt man als profil
data-profile="default", erhält man den Editor in der Grundkonfiguration.
Modulausgabe
REX_VALUE[id=1 output=html]- Im individuellen Attribute-Feld:
{"class":"tiny-editor","data-profile":"full"} - Weitere Attribute kommagetrennt möglich
$mform = new MForm();
$mform->addTextAreaField(1,
array(
'label'=>'Text',
'class'=>'tiny-editor',
'data-profile'=>'full')
);
echo $mform->show();Zur Konfiguration eigener Profile bitte in das default Profil schauen und die TinyMCE 8 Doku beachten.
Bei der Aktualisierung von älteren Versionen (tinymce4, tinymce5, tinymce6) werden bestehende Profile automatisch migriert:
- Der GPL-Lizenzschlüssel wird automatisch hinzugefügt
- Das veraltete Template-Plugin wird automatisch entfernt
- Alle anderen Einstellungen bleiben erhalten
Wichtig für eigene/benutzerdefinierte Profile:
- Fügen Sie
license_key: 'gpl',am Anfang der Konfiguration hinzu - Entfernen Sie das
templatePlugin aus der Plugin-Liste und Toolbar - Prüfen Sie die Dark-Mode Konfiguration (siehe unten)
Ab TinyMCE 8 ist ein license_key in der Konfiguration erforderlich. Für Open-Source-Nutzung:
license_key: 'gpl',Dieser Schlüssel ist in allen Standard-Profilen bereits enthalten. Für eigene Profile muss dieser manuell hinzugefügt werden.
Für Dark-Mode Unterstützung folgenden Code in den Profilen verwenden:
skin: redaxo.theme.current === "dark" ? "oxide-dark" : "oxide",
content_css: redaxo.theme.current === "dark" ? "dark" : "default",Neu ab Version 8.0.0: Raster-Bilder werden automatisch über den Media Manager eingebunden.
Standardmäßig werden JPG, JPEG, PNG, GIF und WebP über den Media-Manager-Type tiny ausgeliefert:
/media/tiny/dateiname.jpg
Welche Dateitypen nutzen den Media Manager?
- ✅ Mit Media Manager: JPG, JPEG, PNG, GIF, WebP
- ❌ Direkter Pfad: SVG, TIFF, BMP, Videos, Audio-Dateien
Vorteile:
- Automatische Skalierung und Optimierung der Bilder
- Funktioniert in Unterordner-Installationen (keine absoluten Pfade mehr)
- Admin-Kontrolle über Bildeffekte (Größe, Kompression, etc.)
Media-Manager-Type einrichten:
Erstelle im REDAXO-Backend unter "Media Manager" einen neuen Type mit dem Namen tiny und füge die gewünschten Effekte hinzu (z. B. "Resize" mit max-width: 1200px).
Hinweis: Existiert der Type nicht, liefert der Media Manager automatisch das Original aus (kein Fehler).
In diesem Addon befinden sich Custom‑Plugins in custom_plugins/.
Neu: staging‑ordner build/ (empfohlen für CI / review) – der Workflow ist jetzt in zwei Phasen aufgeteilt:
- Staging:
build/vendor/tinymce(TinyMCE vendor) undbuild/plugins/<plugin>(custom plugins) - Sync: die Inhalte aus
build/werden nachassets/vendor/tinymceundassets/scripts/tinymce/pluginskopiert (runtime)
Empfohlen: pnpm (keine Verwendung von yarn erforderlich).
Schnellstart (im Addon‑Verzeichnis):
# Installiere Abhängigkeiten (root add-on)
pnpm install
# Optional: beim initialen Setup die Workspaces (custom_plugins) mitinstallieren
pnpm -w -r install
# Staging: kopiert tinymce vendor in build/vendor und baut custom_plugins in build/plugins
pnpm run build:staging
# Sync: kopiert die staging ergebnisse in die runtime assets (assets/vendor + assets/scripts)
pnpm run build:sync
# Alles in einem (staging + sync)
pnpm run build
# Build artefakte löschen
pnpm run clean-buildDer build:staging Task (intern):
pnpm run vendor:build→ kopiert TinyMCE vendor nachbuild/vendor/tinymcepnpm run plugins:build -- --staging→ baut/copyt custom_plugins nachbuild/plugins/<plugin>und schreibt notwendige plugin files ebenfalls nachbuild/vendor/tinymce/plugins/<plugin>
pnpm run build:sync kopiert die staging‑artefakte in die jeweiligen assets/ Ordner, damit der Addon‑Runtime Pfad unverändert bleibt.
Weitere Details / zusätzliche Änderungen:
- Die Build‑Pipeline kopiert den TinyMCE Vendor in
assets/vendor/tinymceund danach werden die custom plugin Artefakte sowohl nachassets/scripts/tinymce/plugins/<plugin>als auch kopiert inassets/vendor/tinymce/plugins/<plugin>damit TinyMCE die Plugins direkt über die normalenplugins-Pfadnamen verwenden kann (keineexternal_pluginsKonfiguration nötig). node_modulesist in.gitignoreaufgenommen (lokale Abhängigkeiten werden nicht committet).yarn.lockentfernt: Wir benutzenpnpmals bevorzugten Paketmanager für deterministische Workspaces; entferne aus dem Repo bitte alteyarn.lockDateien falls vorhanden.
Entfernte / nicht mehr benötigte Dateien:
- Visual Profile Builder (wurde auf Wunsch entfernt) — UI/Assets/Tests sind nicht mehr im Addon enthalten.
- Alte Tests/Prototypen für den Builder wurden gelöscht.
Empfohlene CI Integration:
- In CI (GitHub Actions)
pnpm install && pnpm run buildausführen und sicherstellen, dassassets/scripts/tinymce/pluginsundassets/vendor/tinymce/pluginsdie erwarteten Artefakte enthalten. Ein schneller Node‑Smoke‑Check kann automatisiert werden, um die wichtigsten Dateien nach dem Build zu prüfen. - Versucht, fehlende Builds mit
esbuildzu bündeln/minifizieren und inassets/scripts/tinymce/plugins/<plugin>/<plugin>.min.jszu schreiben. - Kopiert vorhandene Sprachdateien aus
langs/mit.
Wenn du weiterhin yarn benutzt, funktionieren die meisten plugin-Builds ebenfalls — empfohlen ist aber pnpm wegen deterministischer Workspaces und schnellem Install/CI-Verhalten.
Wichtig: Custom‑Plugin‑Artefakte werden unter assets/scripts/tinymce/plugins/<plugin> erstellt und zusätzlich in assets/vendor/tinymce/plugins/<plugin> abgelegt.
Das erlaubt, die Plugins direkt per plugins Konfiguration zu nutzen, ohne external_plugins anzugeben — weil die Build‑Pipeline die minifizierten Plugin‑Artefakte zusätzlich in assets/vendor/tinymce/plugins/<plugin> legt.
- AddOn: MIT LICENSE
- TinyMCE: GPL v2+ LICENSE (ab Version 8.0)
Friends Of REDAXO