Rich-Text-HTML außerhalb des Editors mit responsiven Inhaltsstilen anzeigen

Ein veröffentlichter HTML-Artikel mit Tabelle, Codeblock und Bild

HTML zu speichern ist nur die halbe Aufgabe. Eine veröffentlichte Seite braucht auch Lesestile, dauerhafte Bild-URLs und ein Layout für Smartphones. Diese Anleitung liefert ein vollständiges statisches HTML-Beispiel und ein kleines Stylesheet. Die Leseseite initialisiert RichTextEditor nicht.

Inhaltsstile von Editor-Steuerelementen trennen

getHTMLCode() liefert Markup, nicht das gesamte Design Ihrer Anwendung. Überschriften, Listen und Tabellen können anders aussehen, sobald die Reset- oder Typografieregeln Ihrer Website greifen. Nutzen Sie Inhaltsstile für die Veröffentlichung, statt nur zum Anzeigen eines Artikels das Werkzeugleisten-Design des Editors zu laden.

Laden Sie das Starter-Stylesheet für Leseseiten herunter. Seine Selektoren sind auf .rte-reader begrenzt und gestalten weder Navigation noch andere Artikel um. Passen Sie Schriften, Abstände und unterstützte Klassen an Ihr Produkt an. Dies ist ein Ausgangspunkt, kein Renderer für jede Editorfunktion.

Einen vollständigen veröffentlichten Artikel ausprobieren

Stellen Sie Stylesheet und Bild über Ihre Anwendung bereit und öffnen Sie die Seite über einen Webserver. Das Beispiel nutzt vertrauenswürdige Demonstrationsinhalte. Bei echten Dokumenten fügen Sie nur HTML ein, das die serverseitigen Veröffentlichungsregeln Ihrer Anwendung erfüllt.

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

Gespeichertes HTML weiterhin als Eingabe behandeln

Prüfen Sie auf dem Server Dokumentzugriff und Größe und bereinigen Sie nicht vertrauenswürdiges HTML vor der Darstellung. Das Speichern in einer Datenbank macht eine Zeichenfolge nicht vertrauenswürdig. Verwenden Sie einen gepflegten HTML-Sanitizer mit ausdrücklichen Regeln für Elemente, Attribute, Stile und URL-Schemata.

Übergeben Sie beliebige gespeicherte Zeichenfolgen nicht direkt an innerHTML oder die Raw-HTML-Ausgabe Ihres Frameworks. Ein regulärer Ausdruck zum Entfernen von Script-Tags ist kein HTML-Sanitizer. Auch dieses Stylesheet bereinigt keine Inhalte. Prüfen Sie die Ausgabe nach jeder Veröffentlichungstransformation erneut und fügen Sie entfernte Ereignishandler oder unsichere URLs nicht wieder ein.

Tabellen, Bilder und Code lesbar halten

Der Wrapper .rte-table-scroll macht breite Tabellen scrollbar, ohne ihre Tabellensemantik zu verändern. Ergänzen Sie ihn in der Darstellungsvorlage für Tabellen, die ihn benötigen; das Stylesheet schreibt gespeichertes HTML nicht um. Erhalten Sie Beschriftungen und Spaltenüberschriften und machen Sie den Scrollbereich per Tastatur fokussierbar.

Bilder benötigen dauerhafte, für die Leser zugängliche URLs, Alternativtext und Abmessungen. Das Beispiel verkleinert Bilder auf schmalen Bildschirmen. Eine heruntergeladene HTML-Datei enthält diese Bilder nicht automatisch. Codeblöcke scrollen in ihrem eigenen Bereich; eine Sprachangabe allein lädt keine Syntaxhervorhebung.

Statische Anzeige oder schreibgeschützten Editor wählen

Nutzen Sie statisches HTML, wenn Leser ein veröffentlichtes Dokument nur ansehen sollen. Muss dieselbe Oberfläche wieder in die Bearbeitung wechseln, folgen Sie der Anleitung zum schreibgeschützten Editor. Verwechseln Sie einen Browsermodus nicht mit Serverberechtigungen.

Kommentare, Änderungsverfolgung, Formeln, Diagramme und eingebettete Medien können eine eigene Veröffentlichungsdarstellung oder einen speziellen Renderer benötigen. Entscheiden Sie vor der Auswahl der Bereinigungsregeln, welche Inhalte Sie veröffentlichen möchten. Entfernen Sie keine editorspezifische Klasse in der Annahme, dass jede Interaktion erhalten bleibt.

Den Veröffentlichungsablauf prüfen

  1. Vergleichen Sie Überschriften, Listen, Hervorhebungen und Tabellenbeschriftungen mit dem Quelldokument.
  2. Prüfen Sie 320px und 390px: Breite Tabellen und Code müssen lokal scrollen, ohne die gesamte Seite zu verbreitern.
  3. Prüfen Sie, ob Bilder für die vorgesehenen Leser laden und nicht nur für den angemeldeten Autor.
  4. Stellen Sie sicher, dass das Stylesheet weder Seitennavigation noch benachbarte Inhalte verändert.
  5. Testen Sie Sanitizer und URL-Regeln mit abzuweisenden Eingaben und normalen Artikeln.

Weiterführend: Editor-HTML auslesen, automatisches Speichern auf dem Server, Bildspeicherung und gespeichertes XSS in Rich Text.

Weiterlesen