Mostrar HTML enriquecido fuera del editor con estilos adaptables

Un artículo HTML publicado con una tabla, un bloque de código y una imagen

Guardar HTML es solo la mitad del trabajo. Una página publicada también necesita estilos de lectura, URL de imágenes duraderas y un diseño que se adapte al teléfono. Esta guía ofrece un ejemplo HTML estático completo y una pequeña hoja de estilos, sin inicializar RichTextEditor en la página de lectura.

Separar los estilos del contenido de los controles del editor

getHTMLCode() devuelve marcado, no el tema completo de la aplicación. Los encabezados, listas y tablas pueden verse distintos al aplicar las reglas de reinicio o tipografía del sitio. Usa estilos de contenido en la página publicada en lugar de cargar el tema de la barra del editor solo para mostrar un artículo.

Descarga la hoja de estilos inicial para lectura. Sus selectores se limitan a .rte-reader, por lo que no cambian la navegación ni otros artículos. Ajusta fuentes, espacios y clases admitidas a tu producto: es un punto de partida, no un renderizador para todas las funciones del editor.

Probar un artículo publicado completo

Sirve la hoja de estilos y la imagen desde tu aplicación y abre la página mediante un servidor web. El ejemplo utiliza contenido de demostración fiable. Para documentos reales, inserta solo HTML que haya superado la política de publicación del servidor de tu aplicación.

<!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>

Tratar el HTML guardado como entrada

Autoriza el acceso al documento, valida su tamaño y sanea el HTML no fiable en el servidor antes de mostrarlo. Guardar una cadena en una base de datos no la hace fiable. Usa una biblioteca de saneamiento HTML mantenida y una política explícita de elementos, atributos, estilos y esquemas de URL.

No pases cadenas almacenadas arbitrarias a innerHTML ni a la opción de HTML sin procesar del framework. Una expresión regular que elimina etiquetas de script no es un saneador de HTML. Esta hoja de estilos tampoco sanea contenido. Vuelve a comprobar la salida después de cada transformación de publicación y no reintroduzcas manejadores de eventos eliminados ni URL peligrosas.

Mantener legibles las tablas, imágenes y bloques de código

El contenedor .rte-table-scroll permite desplazar tablas anchas sin cambiar su semántica. Inclúyelo en la plantilla de renderizado para las tablas que lo necesiten; la hoja de estilos no reescribe el HTML guardado. Conserva títulos y encabezados de columnas y permite enfocar la región con el teclado.

Las imágenes necesitan URL duraderas y autorizadas para el lector, texto alternativo y dimensiones. El ejemplo reduce las imágenes en pantallas estrechas. Descargar el HTML no incluye las imágenes automáticamente. El código se desplaza dentro de su propia área; una etiqueta de lenguaje no carga resaltado de sintaxis.

Elegir lectura estática o un editor de solo lectura

Usa HTML estático cuando solo sea necesario leer un documento publicado. Si la misma interfaz debe volver a editar, sigue la guía del editor de solo lectura. No confundas el modo del navegador con los permisos del servidor.

Los comentarios, cambios registrados, ecuaciones, diagramas y medios incrustados pueden requerir una representación de publicación independiente o un renderizador específico. Decide qué publicar antes de elegir la política de saneamiento. No elimines una clase propia del editor suponiendo que conservarás todos los comportamientos interactivos.

Comprobar el flujo de publicación

  1. Compara encabezados, listas, énfasis y títulos de tablas con el documento original.
  2. Comprueba 320px y 390px: las tablas anchas y el código deben desplazarse localmente, sin ensanchar la página.
  3. Confirma que las imágenes se cargan para los lectores previstos, no solo para el autor con sesión iniciada.
  4. Verifica que la hoja de estilos no cambia la navegación ni el contenido vecino.
  5. Prueba las políticas de saneamiento y URL del servidor con entradas rechazadas y artículos normales.

Continúa con la obtención de HTML, el guardado automático en el servidor, el almacenamiento de imágenes y XSS almacenado en texto enriquecido.

Para seguir leyendo