← Toda la documentación
Móvil

Activar el modo de barra de herramientas móvil

Una hoja de estilos opcional que adapta el editor a teléfonos y dispositivos táctiles. Sin cambios en el marcado del editor: funciona solo con CSS, limitado por una media query de ventana estrecha para que los diseños de escritorio no cambien.

Actívalo

Añade la clase rte-mobile a cualquier contenedor del editor e incluye 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>

Si usas el Tag Helper de ASP.NET Core, solo tienes que establecer enable-mobile-toolbar="true": genera el enlace y añade la clase por ti.

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

Qué cambia

  • Áreas táctiles de 44×44: cumple WCAG 2.5.6, tamaño del objetivo.
  • Barra de herramientas con desplazamiento horizontal: sin saltos de línea ni espacio vertical perdido, con un degradado en el borde que indica que se puede desplazar.
  • Barra de herramientas fija: se queda anclada encima del teclado virtual.
  • Listas desplegables como hojas inferiores: los menús de fuente, color e inserción se abren como hojas que suben desde abajo en lugar de cortarse fuera de la pantalla.
  • Cuadros de diálogo a todo el ancho: enlace, imagen, Ask AI; márgenes de área segura de 8px a los lados.
  • Panel de revisión desde abajo: el panel de comentarios y control de cambios sube desde abajo, no desde la derecha.
  • Barra de herramientas flotante de párrafos desactivada: chocaba con el teclado de iOS.
  • Fuente del contenido de 16px: evita el zoom automático de iOS al tocar el editor.

Todo queda limitado dentro de:

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

Así que dejar la clase puesta en el código de producción no hace ningún daño: una ventana de escritorio no aplica ninguna de las reglas específicas de móvil.

Valor predeterminado para todo el sitio

En aplicaciones de administración donde todos los editores se piensan primero para el teléfono, aplica la clase a <body> una sola vez:

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

Se aplica en cascada a todos los editores de la página; no hace falta ningún atributo por instancia.