Éditeur de texte enrichi en lecture seule : consulter puis reprendre la modification

Utilisez un éditeur de texte enrichi en lecture seule pour un écran de révision, un formulaire envoyé ou un document temporairement verrouillé. Gardez le document mis en forme visible, puis réactivez la modification sur la même instance lorsque votre application le permet.

Choisir le bon mode de consultation

setReadOnly(true) change le mode d’interaction de l’éditeur. Lisez son état avec getReadOnly() et réactivez la modification avec setReadOnly(false). Aucun second éditeur ni copie du document n’est nécessaire.

Un article publié relève d’un autre usage : affichez du HTML correctement assaini avec les styles de lecture de votre application. Charger l’éditeur complet est utile si le même écran doit aussi permettre la modification. La lecture seule n’assainit pas le HTML et ne constitue pas un système de contrôle d’accès.

Exécuter un exemple complet en lecture seule

Servez les fichiers de l’éditeur depuis votre application et ouvrez cette page via un serveur Web. Le bouton montre comment changer de mode ; ce n’est pas un contrôle d’autorisation pour la production. Le message d’état et l’état enfoncé reflètent la valeur réelle de l’API, plutôt qu’un indicateur applicatif distinct.

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

Séparer le contenu enregistré des autorisations

getHTMLCode() permet toujours de lire le document en mode consultation. Changer de mode n’enregistre rien et ne modifie pas votre base de données. Gardez vos procédures normales d’enregistrement et de validation séparées.

Un utilisateur peut modifier le code du navigateur ou appeler directement votre API. Vérifiez les autorisations à chaque écriture côté serveur, refusez les mises à jour non autorisées et renvoyez un conflit si la version du document est périmée. Ne montrez les commandes d’édition qu’aux personnes autorisées. Traitez le HTML chargé comme une entrée non fiable et appliquez votre politique d’assainissement avant publication.

Intégrer sans recréer l’éditeur

Dans React, Vue ou un autre framework de composants, conservez l’instance dans une référence stable et changez son mode lorsque les droits ou le processus évoluent. Recréer l’éditeur à chaque changement risque de perdre la sélection, l’historique d’annulation et le contenu non enregistré.

Si votre application charge le document de manière asynchrone, maintenez la modification verrouillée jusqu’au chargement du document autorisé. Une réponse tardive ne doit pas remplacer un brouillon plus récent. À la fin d’un verrouillage temporaire, ne réactivez l’édition que si l’utilisateur conserve ses droits. Un simple mode lecture seule ne fournit ni droits de commentaire seuls, ni sections protégées, ni gestion des verrous collaboratifs.

Vérifier le clavier et l’affichage mobile

1. Chargez la page et vérifiez que l’état indique la lecture seule.
2. Essayez de saisir, supprimer et coller du texte ; le HTML à enregistrer doit rester inchangé.
3. Activez le bouton au clavier, modifiez un mot et revenez à la consultation. Vérifiez que le texte et sa mise en forme sont conservés.
4. Testez les grands tableaux, images et blocs de code à 320px et 390px. Le débordement doit rester dans la zone du document sans élargir toute la page.
5. Testez des demandes d’enregistrement non autorisées sur le serveur. Une interface verrouillée ne prouve pas que le point d’accès refuse l’écriture.

Consulter les API associées

Consultez setReadOnly(), getReadOnly() et la récupération du HTML. Poursuivez avec l’enregistrement automatique fiable sur serveur, la validation de formulaires et l’envoi d’images.