在编辑器之外展示富文本 HTML：响应式内容样式指南

包含表格、代码块和图片的已发布 HTML 文章

保存 HTML 只是流程的一半。发布页面还需要阅读样式、稳定的图片地址和适合手机的布局。本指南提供完整的静态 HTML 示例和小型样式表；阅读页面无需初始化 RichTextEditor。

将内容样式与编辑器控件分开

getHTMLCode() 返回的是标记，而非整个应用主题。网站的重置样式或排版规则可能改变标题、列表和表格的外观。发布页应使用内容样式，不要为了显示文章而加载编辑器的工具栏主题。

下载阅读页入门样式表。其选择器限定在 .rte-reader 内，不会重设导航或其他文章的样式。请按产品需求调整字体、间距和支持的类名；它是起点，并非覆盖所有编辑器功能的渲染器。

试用完整的文章发布示例

从应用中提供样式表和图片，然后通过 Web 服务器打开此页面。示例使用可信的演示内容。处理真实文档时，只插入通过应用服务器端发布策略检查的 HTML。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Published project notes</title>
  <link rel="stylesheet" href="/docs/reader.css">
  <style>body { margin: 0; padding: 24px; }</style>
</head>
<body>
<!-- Trusted demonstration HTML. Sanitize customer content on your server. -->
<article class="rte-reader">
  <h1>Project notes</h1>
  <p>A published document can keep <strong>emphasis</strong>, lists and links
     without loading an editor toolbar.</p>
  <ul><li>Keep reading styles scoped.</li><li>Use durable image URLs.</li></ul>
  <div class="rte-table-scroll" tabindex="0" role="region" aria-label="Project status table">
    <table>
      <caption>Project status</caption>
      <thead><tr><th scope="col">Task</th><th scope="col">Owner</th><th scope="col">Status</th></tr></thead>
      <tbody><tr><td>Publish the article</td><td>Content team</td><td>Ready for review</td></tr></tbody>
    </table>
  </div>
  <pre><code>const message = "A long code line should scroll inside its own block, without widening the entire page.";</code></pre>
  <figure>
    <img src="/images/editor-image.png" width="300" height="200" alt="A farm and green fields beneath a blue sky">
    <figcaption>Give each published image a stable URL and useful alternative text.</figcaption>
  </figure>
</article>
</body>
</html>

将保存的 HTML 视为输入，而非安全证明

渲染前应在服务器上验证文档访问权限、内容大小，并净化不可信 HTML。字符串存入数据库并不会使其可信。请使用持续维护的 HTML 净化库，并明确允许的元素、属性、样式和 URL 协议。

不要将任意存储的字符串直接传给 innerHTML 或框架的原始 HTML 渲染接口。删除脚本标签的正则表达式不是 HTML 净化器。本样式表不会净化内容。执行发布转换后，应再次验证输出，不要重新引入已删除的事件处理器或不安全地址。

让表格、图片和代码保持易读

.rte-table-scroll 包装区域让宽表格局部滚动，同时保留表格语义。对需要该行为的表格，在渲染模板中加入此区域；样式表不会重写保存的 HTML。保留表格标题和列标题，并让滚动区域可通过键盘聚焦。

图片应使用稳定、对读者有权限的地址，并提供替代文本和尺寸。示例会在窄屏上缩小图片。下载 HTML 文件不会自动打包其中的图片。代码块会在自身区域内滚动；语言标签本身不会加载语法高亮。

选择静态阅读页还是只读编辑器

读者只需阅读已发布文档时，可使用静态 HTML。如果同一界面需要恢复编辑，请参阅只读编辑器指南。不要混淆浏览器模式切换与服务器权限。

评论、修订、公式、图表和嵌入媒体可能需要独立的发布表示或专门的渲染器。在选择净化策略之前，先确定要发布哪些内容。不要删除编辑器专用类名后，就认为交互行为都会保留。

检查发布流程

  1. 对照源文档检查标题、列表、强调格式和表格标题。
  2. 检查 320px 和 390px：宽表格和代码应局部滚动，不应撑宽整个页面。
  3. 确认目标读者能加载图片，而不只是已登录的作者可以加载。
  4. 验证加载样式表不会改变网站导航或相邻内容。
  5. 使用应被拒绝的输入和正常文章共同测试服务器净化与 URL 策略。

继续阅读获取编辑器 HTML、服务器自动保存、图片存储和富文本中的存储型 XSS。

延伸阅读