Afficher le HTML enrichi hors de l’éditeur avec des styles adaptatifs

Un article HTML publié avec un tableau, un bloc de code et une image

Enregistrer le HTML ne représente que la moitié du travail. Une page publiée a aussi besoin de styles de lecture, d’URL d’images durables et d’une mise en page adaptée au téléphone. Ce guide fournit un exemple HTML statique complet et une petite feuille de style, sans initialiser RichTextEditor sur la page de lecture.

Séparer les styles du contenu des commandes de l’éditeur

getHTMLCode() renvoie le balisage, pas le thème complet de votre application. Les titres, listes et tableaux peuvent changer d’apparence sous les règles de réinitialisation ou de typographie du site. Utilisez des styles de contenu pour la publication plutôt que de charger le thème de la barre d’outils pour afficher un article.

Téléchargez la feuille de style de lecture de départ. Ses sélecteurs sont limités à .rte-reader et ne modifient ni la navigation ni les autres articles. Adaptez polices, espacements et classes prises en charge à votre produit : c’est un point de départ, pas un moteur de rendu pour toutes les fonctions de l’éditeur.

Essayer un article publié complet

Servez la feuille de style et l’image depuis votre application, puis ouvrez la page via un serveur Web. L’exemple utilise un contenu de démonstration fiable. Pour des documents réels, insérez uniquement du HTML conforme à la politique de publication appliquée sur votre serveur.

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

Traiter le HTML enregistré comme une entrée

Vérifiez sur le serveur les droits d’accès et la taille du document, puis assainissez le HTML non fiable avant de l’afficher. Une chaîne ne devient pas fiable parce qu’elle est enregistrée en base de données. Utilisez un outil d’assainissement HTML maintenu, avec des règles explicites sur les éléments, attributs, styles et schémas d’URL.

Ne passez pas de chaînes enregistrées arbitraires à innerHTML ou au rendu HTML brut du framework. Une expression régulière qui supprime les balises de script n’est pas un outil d’assainissement HTML. Cette feuille de style n’assainit pas le contenu. Revérifiez la sortie après chaque transformation de publication, sans réintroduire des gestionnaires d’événements supprimés ni des URL dangereuses.

Garder les tableaux, images et blocs de code lisibles

Le conteneur .rte-table-scroll rend un grand tableau défilable sans changer sa sémantique. Ajoutez-le dans le gabarit de rendu pour les tableaux qui en ont besoin ; la feuille de style ne réécrit pas le HTML enregistré. Conservez légendes et en-têtes de colonnes et rendez la zone de défilement accessible au clavier.

Les images doivent avoir des URL durables accessibles aux lecteurs, un texte alternatif et des dimensions. L’exemple réduit les images sur les écrans étroits. Télécharger le HTML n’inclut pas automatiquement les images. Le code défile dans sa propre zone ; une étiquette de langage ne charge pas de coloration syntaxique.

Choisir une lecture statique ou un éditeur en lecture seule

Utilisez du HTML statique si les personnes doivent seulement lire un document publié. Si la même interface doit repasser en édition, consultez le guide de l’éditeur en lecture seule. Ne confondez pas mode du navigateur et autorisations du serveur.

Commentaires, suivi des modifications, équations, diagrammes et médias intégrés peuvent nécessiter une représentation de publication distincte ou un moteur de rendu spécialisé. Définissez ce qui sera publié avant de choisir les règles d’assainissement. Ne supprimez pas une classe propre à l’éditeur en supposant que tous les comportements interactifs seront conservés.

Vérifier le parcours de publication

  1. Comparez titres, listes, emphase et légendes de tableaux avec le document source.
  2. À 320px et 390px, vérifiez que les grands tableaux et le code défilent localement sans élargir toute la page.
  3. Vérifiez l’accès aux images pour les lecteurs prévus, pas uniquement pour l’auteur connecté.
  4. Confirmez que la feuille de style ne change ni la navigation du site ni les contenus voisins.
  5. Testez les règles d’assainissement et d’URL du serveur avec des entrées à refuser et des articles normaux.

Poursuivez avec la récupération du HTML, l’enregistrement automatique sur serveur, le stockage des images et le XSS stocké dans le texte enrichi.

À lire ensuite