Editor de texto enriquecido de solo lectura: consultar y volver a editar

RichTextEditor con un documento con formato y su barra de herramientas completa

Usa un editor de texto enriquecido de solo lectura en una pantalla de revisión, un formulario enviado o un documento bloqueado temporalmente. Mantén visible el documento con formato y vuelve a permitir la edición en la misma instancia cuando tu aplicación lo autorice.

Elegir el modo de visualización adecuado

setReadOnly(true) cambia el modo de interacción del editor. Consulta el estado con getReadOnly() y vuelve a permitir la edición con setReadOnly(false). No necesitas un segundo editor ni otra copia del documento.

Un artículo publicado es un caso distinto: muestra HTML debidamente saneado con los estilos de lectura de tu aplicación. Cargar el editor completo es útil si la misma pantalla también necesita controles de edición. El modo de solo lectura no sanea el HTML ni sustituye un sistema de control de acceso.

Ejecutar un ejemplo completo de solo lectura

Sirve los archivos del editor desde tu aplicación y abre esta página mediante un servidor web. El botón demuestra el cambio de modo; no comprueba permisos de producción. El mensaje y el estado pulsado reflejan el valor real de la API, no una variable independiente de la aplicación.

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

Separar el contenido guardado de los permisos

getHTMLCode() sigue permitiendo leer el documento en modo de visualización. Cambiar de modo no guarda contenido ni modifica la base de datos. Mantén separados tus procesos habituales de guardado y validación.

Un usuario puede modificar el código del navegador o llamar directamente a tu API. Autoriza cada escritura del servidor, rechaza las actualizaciones no permitidas y devuelve un conflicto cuando la versión del documento esté desactualizada. Muestra los controles de edición solo a quienes tengan permiso. Trata el HTML cargado como entrada no fiable y aplica tu política de saneamiento antes de publicarlo.

Integrar sin volver a crear el editor

En React, Vue u otro framework de componentes, conserva la instancia en una referencia estable y cambia su modo cuando cambien los permisos o el estado del proceso. Volver a crear el editor con cada cambio puede eliminar la selección, el historial de deshacer y el contenido sin guardar.

Si tu aplicación carga el documento de forma asíncrona, bloquea la edición hasta que se haya cargado el documento autorizado. No permitas que una respuesta tardía sustituya un borrador más reciente. Cuando termine un bloqueo temporal, restablece la edición solo si el usuario sigue teniendo permiso. Un interruptor general de solo lectura no proporciona permisos exclusivos para comentarios, secciones protegidas ni gestión de bloqueos colaborativos.

Comprobar el teclado y la vista móvil

  1. Carga la página y confirma que el estado indica solo lectura.
  2. Intenta escribir, borrar y pegar; el HTML que se guardaría debe permanecer igual.
  3. Activa el botón con el teclado, edita una palabra y vuelve al modo de visualización. Comprueba que el texto nuevo y el formato se conservan.
  4. Prueba tablas largas, imágenes y bloques de código a 320px y 390px. Mantén el desbordamiento dentro del documento sin ensanchar toda la página.
  5. Prueba solicitudes de guardado no autorizadas en el servidor. Una interfaz bloqueada no demuestra que el endpoint rechace una escritura.

Consulta setReadOnly(), getReadOnly() y la obtención de HTML. Continúa con el guardado automático fiable en el servidor, la validación de formularios y la carga de imágenes.

Para seguir leyendo