Editor de texto rico somente leitura: visualizar e voltar a editar

RichTextEditor exibindo um documento formatado e sua barra de ferramentas completa

Use um editor de texto rico somente leitura em uma tela de revisão, um formulário enviado ou um documento temporariamente bloqueado. Mantenha o documento formatado visível e volte a permitir a edição na mesma instância quando sua aplicação autorizar.

Escolha o modo de visualização adequado

setReadOnly(true) altera o modo de interação do editor. Consulte o estado com getReadOnly() e reative a edição com setReadOnly(false). Não é necessário criar outro editor nem uma segunda cópia do documento.

Um artigo publicado é um caso diferente: exiba HTML devidamente sanitizado com os estilos de leitura da sua aplicação. Carregar o editor completo é útil quando a mesma tela também precisa de controles de edição. O modo somente leitura não sanitiza HTML nem substitui um sistema de controle de acesso.

Execute um exemplo completo de somente leitura

Disponibilize os arquivos do editor pela sua aplicação e abra esta página por um servidor web. O botão demonstra a troca de modo; não é uma verificação de permissão para produção. O status e o estado pressionado refletem o valor real da API, não um indicador separado da aplicação.

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

Separe o conteúdo salvo das permissões

getHTMLCode() continua lendo o documento no modo de visualização. Trocar de modo não salva conteúdo nem altera o banco de dados. Mantenha separados os fluxos normais de salvamento e validação.

Um usuário pode alterar o código do navegador ou chamar sua API diretamente. Autorize cada gravação no servidor, rejeite atualizações não permitidas e retorne um conflito quando a versão do documento estiver desatualizada. Mostre controles de edição apenas a quem tiver permissão. Trate o HTML carregado como entrada não confiável e aplique sua política de sanitização antes de publicar.

Integre sem recriar o editor

No React, Vue ou em outro framework de componentes, mantenha a instância em uma referência estável e altere seu modo quando as permissões ou o fluxo mudarem. Recriar o editor a cada troca pode descartar seleção, histórico de desfazer e conteúdo não salvo.

Se a aplicação carrega um documento de forma assíncrona, bloqueie a edição até que o documento autorizado tenha sido carregado. Não permita que uma resposta atrasada substitua um rascunho mais recente. Ao terminar um bloqueio temporário, restaure a edição apenas se o usuário ainda tiver permissão. Um controle geral de somente leitura não oferece permissões exclusivas para comentários, seções protegidas nem gerenciamento de bloqueios colaborativos.

Verifique o teclado e o comportamento no celular

  1. Carregue a página e confirme o status de somente leitura.
  2. Tente digitar, apagar e colar; o HTML a ser salvo deve permanecer inalterado.
  3. Ative o botão pelo teclado, edite uma palavra e volte ao modo de visualização. Confirme que o novo texto e a formatação foram mantidos.
  4. Teste tabelas longas, imagens e blocos de código em 320px e 390px. Mantenha o conteúdo excedente dentro da área do documento, sem alargar toda a página.
  5. Teste solicitações de salvamento não autorizadas no servidor. Uma interface bloqueada não prova que o endpoint recusa uma gravação.

Veja setReadOnly(), getReadOnly() e como obter o HTML. Continue com salvamento automático confiável no servidor, validação de formulários e upload de imagens.

Leia a seguir