只读富文本编辑器：查看内容并恢复编辑

RichTextEditor 显示格式化文档及完整工具栏

在审阅页面、已提交的表单或暂时锁定的文档中使用只读富文本编辑器。保持格式化文档可见，并在应用允许时使用同一个实例恢复编辑。

选择适合的查看模式

setReadOnly(true) 会改变编辑器的交互模式。通过 getReadOnly() 读取状态，通过 setReadOnly(false) 恢复编辑。无需创建第二个编辑器或复制文档。

普通的已发布文章属于另一种场景：应使用应用的阅读样式显示经过适当净化的 HTML。当同一个页面还需要编辑控件时，加载完整编辑器才有意义。只读模式不会净化 HTML，也不会将编辑器变成访问控制系统。

运行完整的只读示例

从应用中提供编辑器资源，并通过 Web 服务器打开此页面。按钮用于演示模式切换，并非生产环境的权限检查。状态提示和按下状态反映实际 API 值，而不是另外维护的应用标记。

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

区分保存内容与访问权限

在查看模式下，getHTMLCode() 仍可读取文档。切换模式不是保存操作，也不会修改数据库。请独立维护正常的保存和验证流程。

用户可以修改浏览器代码或直接调用 API。每次服务器写入都必须验证权限，拒绝未经授权的更新，并在文档版本过期时返回冲突。只向具有权限的用户显示编辑控件。将加载的 HTML 视为不可信输入，并在发布之前执行输出净化策略。

集成时不要重新创建编辑器

在 React、Vue 或其他组件框架中，用稳定引用保存实例，并在权限或工作流状态改变时切换模式。每次模式变化都重建编辑器，可能导致选区、撤销状态和未保存内容丢失。

如果应用异步加载文档，应在已获授权的文档加载完成之前保持锁定。不要让较晚返回的响应替换更新的草稿。临时锁定结束后，只有用户仍具有权限时才恢复编辑。普通的只读开关不提供仅评论权限、受保护区域或协作锁管理。

检查键盘和手机端行为

  1. 加载页面，确认状态为只读。
  2. 尝试输入、删除和粘贴；保存的 HTML 应保持不变。
  3. 通过键盘激活按钮，编辑一个词，再切回查看模式。确认新文字和格式仍然保留。
  4. 在 320px 和 390px 下测试长表格、图片和代码块。让溢出发生在文档区域内部，而不是撑宽整个页面。
  5. 在服务器上测试未经授权的保存请求。浏览器界面被锁定，并不能证明接口会拒绝写入。

参阅 setReadOnly()、getReadOnly() 和获取 HTML。继续阅读可靠的服务器自动保存、表单验证和图片上传。

延伸阅读