Mobil

Den mobilen Symbolleistenmodus aktivieren

Ein optionales Stylesheet, das den Editor für Smartphones und Touch-Geräte umgestaltet. Keine Änderungen am Markup des Editors – rein über CSS gesteuert und auf eine Media Query für schmale Viewports beschränkt, sodass Desktop-Layouts unverändert bleiben.

Live-Demo öffnen

Aktivieren

Fügen Sie einem beliebigen Editor-Container die Klasse rte-mobile hinzu und binden Sie rte_mobile.css ein:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/rte_mobile.css" />

<div id="editor" class="rte-mobile"></div>

Wer den ASP.NET Core Tag Helper verwendet, setzt einfach enable-mobile-toolbar="true" – er gibt den Link aus und fügt die Klasse für Sie hinzu.

<richtextbox asp-for="Body" toolbar="full"
             enable-mobile-toolbar="true" />

Was sich ändert

Tippziele mit 44×44 – erfüllt WCAG 2.5.6 Target Size.
Horizontal scrollende Symbolleiste – kein Umbruch, kein verlorener vertikaler Platz, mit einem ausblendenden Verlauf am Rand als Hinweis.
Fixierte Symbolleiste – bleibt über der Bildschirmtastatur angeheftet.
Dropdowns als Bottom Sheets – Menüs für Schriftart, Farbe und Einfügen erscheinen als von unten hereingleitende Bereiche, statt aus dem Bildschirm zu ragen.
Dialoge in voller Breite – Link, Bild, Ask AI: seitliche Ränder von 8px im sicheren Bereich.
Review-Seitenleiste von unten – die Leiste für Kommentare und Änderungsverfolgung gleitet von unten herein, nicht von rechts.
Schwebende Absatz-Symbolleiste deaktiviert – sie kam der iOS-Tastatur in die Quere.
Schriftgröße 16px im Inhalt – unterdrückt den automatischen Zoom von iOS beim Tippen in den Editor.

Alles ist eingegrenzt auf:

@media (max-width: 768px), (pointer: coarse) {
    .rte-mobile .rte-toolbar { /* ... */ }
    /* ... */
}

Die Klasse im Produktionscode stehen zu lassen, ist daher unschädlich – ein Desktop-Viewport übernimmt keine der mobilspezifischen Regeln.

Standard für die gesamte Website

In Admin-Apps, in denen jeder Editor vorrangig auf Smartphones genutzt wird, setzen Sie die Klasse einmal auf <body>:

<body class="rte-mobile">
    ...
</body>

Das wirkt sich auf jeden Editor der Seite aus; ein Attribut pro Instanz ist nicht nötig.