Mobile Toolbar Mode

Add class="rte-mobile" to any editor container and include rte_mobile.cssto 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 &mdash; or shrink the browser &mdash; to see 44&times;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>

Examples

Mobile Toolbar Mode

Example code