モバイルツールバーモードを有効にする

有効にする

エディターのコンテナーに rte-mobile クラスを追加し、rte_mobile.css を読み込みます。

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

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

ASP.NET Core のタグヘルパーを使う場合は、enable-mobile-toolbar="true" を設定するだけです。リンクを出力し、クラスも追加してくれます。

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

変わること

• 44×44 のタップ領域 — WCAG 2.5.6 のターゲットのサイズを満たします。
• 横スクロールするツールバー — 折り返さないので縦のスペースを失わず、端にはスクロールできることを示すフェードのグラデーションがあります。
• 固定表示のツールバー — 仮想キーボードの上に固定されたままになります。
• ボトムシートのドロップダウン — フォント、色、挿入のメニューは、画面外にはみ出さず、下からスライドするシートとして表示されます。
• 全幅のダイアログ — リンク、画像、Ask AI のダイアログは、左右に 8px のセーフエリアの余白を取って表示されます。
• 下から開くレビュードロワー — コメント／変更履歴のドロワーは、右からではなく下からスライドして開きます。
• フローティングの段落ツールバーは無効 — iOS のキーボードと干渉していたためです。
• 16px のコンテンツフォント — エディターをタップしたときの iOS の自動ズームを防ぎます。

すべては次の中に限定されています。

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

そのため、本番環境のコードでクラスを付けたままにしても問題ありません。デスクトップのビューポートでは、モバイル専用のルールは一切適用されません。

サイト全体の既定

すべてのエディターがスマートフォン優先の管理アプリでは、<body> にクラスを一度だけ付けます。

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

これはページ上のすべてのエディターに適用されるので、インスタンスごとの属性は必要ありません。