← Toda a documentação
Mobile

Ativar o modo de barra de ferramentas para mobile

Uma folha de estilo opcional que adapta o editor para celulares e dispositivos voltados ao toque. Nenhuma alteração na marcação do editor — tudo é feito por CSS, restrito a uma media query de viewport estreita, para que os layouts de desktop não mudem.

Como ativar

Adicione a classe rte-mobile a qualquer contêiner de editor e inclua 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>

Quem usa o Tag Helper do ASP.NET Core só precisa definir enable-mobile-toolbar="true" — ele gera o link e adiciona a classe para você.

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

O que muda

  • Áreas de toque de 44×44 — atende ao critério WCAG 2.5.6 Target Size.
  • Barra de ferramentas com rolagem horizontal — sem quebra de linha, sem perda de espaço vertical, com um gradiente esmaecido na borda indicando que há mais itens.
  • Barra de ferramentas fixa — permanece fixada acima do teclado virtual.
  • Menus suspensos em bottom sheet — os menus de fonte, cor e inserção abrem como painéis que deslizam de baixo para cima, em vez de ficarem cortados fora da tela.
  • Caixas de diálogo em largura total — link, imagem, Ask AI: margens de área segura de 8px nas laterais.
  • Painel de revisão a partir de baixo — o painel de comentários / controle de alterações desliza de baixo para cima, e não pela direita.
  • Barra de ferramentas flutuante de parágrafo desativada — ela entrava em conflito com o teclado do iOS.
  • Fonte de 16px no conteúdo — evita o zoom automático do iOS ao tocar no editor.

Tudo fica restrito a:

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

Por isso, deixar a classe no código de produção não causa problema — uma viewport de desktop não aplica nenhuma das regras específicas para mobile.

Padrão para o site inteiro

Em aplicações administrativas em que todos os editores são pensados primeiro para o celular, aplique a classe ao <body> uma única vez:

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

Isso se propaga para todos os editores da página; não é preciso um atributo por instância.