Rich-Text-Editor im Lesemodus: Inhalte anzeigen und wieder bearbeiten

RichTextEditor mit einem formatierten Dokument und vollständiger Werkzeugleiste

Ein schreibgeschützter Rich-Text-Editor eignet sich für Prüfseiten, bereits abgesendete Formulare oder vorübergehend gesperrte Dokumente. Das formatierte Dokument bleibt sichtbar; sobald Ihre Anwendung es erlaubt, aktivieren Sie die Bearbeitung an derselben Instanz wieder.

Den passenden Anzeigemodus wählen

setReadOnly(true) ändert den Interaktionsmodus des Editors. Lesen Sie den Zustand mit getReadOnly() aus und aktivieren Sie die Bearbeitung mit setReadOnly(false) wieder. Ein zweiter Editor oder eine Kopie des Dokuments ist nicht nötig.

Ein veröffentlichter Artikel ist ein anderer Anwendungsfall: Stellen Sie geeignet bereinigtes HTML mit den Lesestilen Ihrer Anwendung dar. Der vollständige Editor ist sinnvoll, wenn dieselbe Seite auch Bearbeitungsfunktionen benötigt. Der Lesemodus bereinigt kein HTML und ersetzt keine Zugriffskontrolle.

Ein vollständiges Beispiel ausführen

Stellen Sie die Editor-Dateien über Ihre Anwendung bereit und öffnen Sie diese Seite über einen Webserver. Die Schaltfläche demonstriert den Moduswechsel; sie prüft keine produktiven Zugriffsrechte. Status und gedrückter Zustand spiegeln den tatsächlichen API-Wert statt eines getrennten Anwendungsflags wider.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div style="max-width:100%;overflow-x:auto"><div id="editor"></div></div>
<button id="allow-editing" type="button" aria-pressed="false">Allow editing</button>
<p id="mode-status" role="status" aria-live="polite"></p>
<script>
const editor = new RichTextEditor("#editor", { toolbar: "full" });
// Trusted example content, not untrusted HTML from a request:
editor.setHTMLCode("<h2>Project notes</h2><p>Keep <strong>formatting</strong> while viewing.</p>");
editor.setReadOnly(true);
const toggle = document.getElementById("allow-editing");
const status = document.getElementById("mode-status");
function showMode() {
  const readOnly = editor.getReadOnly();
  toggle.setAttribute("aria-pressed", String(!readOnly));
  status.textContent = readOnly ? "Read-only. Text changes are locked." : "Editable.";
}
showMode();
// Demonstration only. A production app must enforce permissions on its server.
toggle.addEventListener("click", function () {
  editor.setReadOnly(!editor.getReadOnly());
  showMode();
  if (!editor.getReadOnly()) editor.focus();
});
</script>

Gespeicherte Inhalte und Berechtigungen trennen

getHTMLCode() liest das Dokument auch im Lesemodus. Ein Moduswechsel speichert nichts und ändert Ihre Datenbank nicht. Behalten Sie den normalen Ablauf für Speichern und Validieren unabhängig davon bei.

Benutzer können Browsercode ändern oder Ihre API direkt aufrufen. Prüfen Sie bei jedem serverseitigen Schreibzugriff die Berechtigung, lehnen Sie unzulässige Änderungen ab und melden Sie bei veralteten Dokumentversionen einen Konflikt. Zeigen Sie Bearbeitungsfunktionen nur berechtigten Personen. Behandeln Sie geladenes HTML als nicht vertrauenswürdige Eingabe und setzen Sie vor der Veröffentlichung Ihre Regeln zur Ausgabebereinigung durch.

Den Editor bei der Integration nicht neu erstellen

Halten Sie in React, Vue oder einem anderen Komponentenframework die Instanz in einer stabilen Referenz und ändern Sie ihren Modus bei Änderungen von Berechtigungen oder Arbeitsabläufen. Eine Neuerstellung bei jedem Wechsel kann Auswahl, Rückgängig-Verlauf und ungespeicherte Inhalte verwerfen.

Wenn Ihre Anwendung Dokumente asynchron lädt, sperren Sie die Bearbeitung, bis das autorisierte Dokument geladen ist. Eine verspätete Antwort darf keinen neueren Entwurf ersetzen. Aktivieren Sie die Bearbeitung nach einer temporären Sperre nur, wenn die Berechtigung weiterhin besteht. Ein allgemeiner Schreibschutz bietet weder reine Kommentarrechte noch geschützte Abschnitte oder die Verwaltung gemeinsamer Bearbeitungssperren.

Tastatur und mobile Darstellung prüfen

  1. Laden Sie die Seite und prüfen Sie den schreibgeschützten Status.
  2. Versuchen Sie zu tippen, zu löschen und einzufügen; das zu speichernde HTML muss unverändert bleiben.
  3. Betätigen Sie die Schaltfläche per Tastatur, bearbeiten Sie ein Wort und wechseln Sie zurück in den Lesemodus. Prüfen Sie, ob Text und Formatierung erhalten bleiben.
  4. Testen Sie lange Tabellen, Bilder und Codeblöcke bei 320px und 390px. Überbreite Inhalte sollen innerhalb des Dokumentbereichs scrollen, statt die ganze Seite zu verbreitern.
  5. Testen Sie unberechtigte Speicheranfragen auf dem Server. Eine gesperrte Browseroberfläche beweist nicht, dass Ihr Endpunkt einen Schreibzugriff ablehnt.

Siehe setReadOnly(), getReadOnly() und HTML auslesen. Lesen Sie weiter über zuverlässiges automatisches Speichern auf dem Server, Formularvalidierung und Bild-Uploads.

Weiterlesen