Exiba HTML de texto rico fora do editor com estilos responsivos

Salvar HTML é apenas metade do trabalho. Uma página publicada também precisa de estilos de leitura, URLs de imagens duráveis e um layout adequado ao celular. Este guia oferece um exemplo HTML estático completo e uma pequena folha de estilos, sem inicializar o RichTextEditor na página de leitura.

Separe os estilos do conteúdo dos controles do editor

getHTMLCode() retorna marcação, não o tema completo da aplicação. Títulos, listas e tabelas podem mudar de aparência quando as regras de redefinição ou tipografia do site são aplicadas. Use estilos de conteúdo na página publicada em vez de carregar o tema da barra do editor apenas para mostrar um artigo.

Baixe a folha de estilos inicial para leitura. Seus seletores ficam restritos a .rte-reader, sem alterar a navegação nem outros artigos. Adapte fontes, espaçamento e classes compatíveis ao seu produto: é um ponto de partida, não um renderizador para todos os recursos do editor.

Experimente um artigo publicado completo

Disponibilize a folha de estilos e a imagem pela aplicação e abra a página por um servidor web. O exemplo usa conteúdo de demonstração confiável. Para documentos reais, insira apenas HTML aprovado pela política de publicação aplicada no servidor da sua aplicação.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Published project notes</title>
  <link rel="stylesheet" href="/docs/reader.css">
  <style>body { margin: 0; padding: 24px; }</style>
</head>
<body>
<!-- Trusted demonstration HTML. Sanitize customer content on your server. -->
<article class="rte-reader">
  <h1>Project notes</h1>
  <p>A published document can keep <strong>emphasis</strong>, lists and links
     without loading an editor toolbar.</p>
  <ul><li>Keep reading styles scoped.</li><li>Use durable image URLs.</li></ul>
  <div class="rte-table-scroll" tabindex="0" role="region" aria-label="Project status table">
    <table>
      <caption>Project status</caption>
      <thead><tr><th scope="col">Task</th><th scope="col">Owner</th><th scope="col">Status</th></tr></thead>
      <tbody><tr><td>Publish the article</td><td>Content team</td><td>Ready for review</td></tr></tbody>
    </table>
  </div>
  <pre><code>const message = "A long code line should scroll inside its own block, without widening the entire page.";</code></pre>
  <figure>
    <img src="/images/editor-image.png" width="300" height="200" alt="A farm and green fields beneath a blue sky">
    <figcaption>Give each published image a stable URL and useful alternative text.</figcaption>
  </figure>
</article>
</body>
</html>

Trate o HTML salvo como entrada

Autorize o acesso ao documento, valide o tamanho e sanitize HTML não confiável no servidor antes de renderizar. Salvar uma string em um banco de dados não a torna confiável. Use uma biblioteca de sanitização HTML mantida, com regras explícitas para elementos, atributos, estilos e esquemas de URL.

Não envie strings armazenadas arbitrárias para innerHTML nem para a opção de renderização de HTML bruto do framework. Uma expressão regular que remove tags de script não é um sanitizador de HTML. Esta folha de estilos também não sanitiza conteúdo. Verifique novamente a saída após cada transformação de publicação e não reintroduza manipuladores de eventos removidos nem URLs inseguras.

Mantenha tabelas, imagens e código legíveis

O contêiner .rte-table-scroll permite rolar tabelas largas sem alterar sua semântica. Inclua-o no modelo de renderização para as tabelas que precisarem dele; a folha de estilos não reescreve o HTML salvo. Preserve legendas e cabeçalhos de coluna e permita que a região receba foco pelo teclado.

As imagens precisam de URLs duráveis e autorizadas para o leitor, texto alternativo e dimensões. O exemplo reduz imagens em telas estreitas. Baixar o arquivo HTML não inclui essas imagens automaticamente. Blocos de código rolam na própria área; indicar uma linguagem não carrega realce de sintaxe.

Escolha leitura estática ou um editor somente leitura

Use HTML estático quando as pessoas só precisarem ler um documento publicado. Se a mesma interface precisar voltar à edição, siga o guia do editor somente leitura. Não confunda a troca de modo no navegador com permissões no servidor.

Comentários, controle de alterações, equações, diagramas e mídia incorporada podem exigir outra representação de publicação ou um renderizador específico. Defina o que será publicado antes de escolher a política de sanitização. Não remova uma classe exclusiva do editor presumindo que todos os comportamentos interativos serão preservados.

Verifique o fluxo de publicação

1. Compare títulos, listas, ênfase e legendas de tabelas com o documento original.
2. Verifique 320px e 390px: tabelas largas e código devem rolar localmente, sem alargar toda a página.
3. Confirme que as imagens carregam para os leitores previstos, não apenas para o autor autenticado.
4. Verifique se a folha de estilos não altera a navegação nem o conteúdo vizinho.
5. Teste as políticas de sanitização e URL do servidor com entradas rejeitadas e artigos normais.

Continue com a obtenção do HTML, salvamento automático no servidor, armazenamento de imagens e XSS armazenado em texto rico.