Mobile Toolbar Mode
Add class="rte-mobile" to any editor container and include rte_mobile.css to opt into a mobile-first layout:
44×44 tap targets (WCAG 2.5.5), horizontally-scrolling toolbar (no wrap), sticky header so the virtual keyboard can’t hide it,
bottom-sheet mounting for dropdowns / dialogs / review drawer, 16px content font (suppresses iOS auto-zoom), and the floating paragraph
toolbar disabled (it fights the iOS keyboard). Scoped behind a narrow-viewport media query so desktop layouts stay unchanged.
Open this page on a phone — or shrink the browser — to see 44×44 tap targets, a horizontally scrolling toolbar, and bottom-sheet dropdowns.
Example code
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="/richtexteditor/rte_mobile.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script>
<style>
.device-frame {
border: 10px solid #0f172a; border-radius: 40px; background: #fff;
box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.25);
width: 360px; max-width: 100%; height: 560px;
padding: 14px 10px 22px; overflow: hidden; margin: 0 auto;
}
.device-frame .rte-mobile { height: 100%; }
</style>
<div class="device-frame">
<div id="mob_editor" class="rte-mobile">
<p>Open this page on a phone — or shrink the browser — to see 44×44 tap targets, a horizontally scrolling toolbar, and bottom-sheet dropdowns.</p>
</div>
</div>
<script>
var mobcfg = { toolbar: "full" };
var mobEditor = new RichTextEditor("#mob_editor", mobcfg);
</script>