富文本内容测试示例

以下是一份专为富文本编辑器、CMS 系统及评论系统设计的测试内容模板。该模板涵盖了标题层级、段落排版、列表嵌套、引用块、代码高亮、图片占位及表格等核心元素，可直接复制粘贴至编辑器中进行渲染效果与兼容性测试。

一、标题层级测试

二级标题示例

三级标题示例

四级标题示例

五级标题示例

二、段落排版测试

富文本编辑器是现代内容管理系统的核心组件，其稳定性与兼容性直接影响用户体验。本测试文档旨在全面验证编辑器对标准 HTML 元素及富文本格式的支持情况，确保内容在不同终端与平台上的呈现一致性。

在内容创作过程中，合理的排版与结构化表达至关重要。以下段落将展示编辑器对基础文本格式的支持能力，包括加粗、斜体、下划线及删除线等常见样式。这些样式不仅增强了文本的可读性，也为内容创作者提供了丰富的表达手段。

富文本编辑器（WYSIWYG Editor）允许用户以所见即所得的方式编辑文档，其底层通常基于 HTML 和 CSS 实现。主流编辑器包括 TinyMCE、Quill、CKEditor、TipTap 等，它们各自提供了不同的插件生态和扩展能力。

三、列表测试

无序列表

• 无序列表项一：用于列举并列信息，支持多层嵌套
• 无序列表项二：验证列表缩进与对齐效果
• 无序列表项三：测试列表与段落间距的合理性
• 嵌套子项 A：验证二级缩进
• 嵌套子项 B：验证三级缩进
• 嵌套子项 C：验证四级缩进

有序列表

1. 有序列表项一：验证数字序号的自动递增功能
2. 有序列表项二：测试列表项换行后的缩进保持
3. 有序列表项三：验证列表与引用块的嵌套兼容性
4. 嵌套有序项 A
5. 嵌套有序项 B

任务列表

• 标题层级渲染测试
• 段落排版测试
• 图片占位测试
• 代码高亮测试
• 表格渲染测试

四、引用块测试

重要提示：富文本编辑器在处理复杂嵌套结构时，需特别注意 HTML 标签的闭合与层级关系。建议在使用前进行充分的兼容性测试，避免因标签错误导致内容渲染异常。

这是一条多行引用块，用于测试引用样式在多行文本下的表现。引用块通常用于引用他人观点、添加注释或强调重要信息。

引用块中的样式：支持 斜体、加粗、超链接 等内联格式。

五、代码块测试

行内代码

使用 console.log() 方法可以在浏览器控制台输出调试信息。

JavaScript 代码块

// 富文本内容解析示例
function parseRichText(html) {
 const parser = new DOMParser();
 const doc = parser.parseFromString(html, 'text/html');
 return {
  title: doc.querySelector('h1')?.textContent,
  paragraphs: Array.from(doc.querySelectorAll('p')).map(p => p.textContent),
  images: Array.from(doc.querySelectorAll('img')).map(img => img.src)
 };
}
​
// 异步加载富文本内容
async function loadContent(url) {
 const response = await fetch(url);
 const data = await response.json();
 return parseRichText(data.content);
}

Python 代码块

# 富文本内容处理示例
from html.parser import HTMLParser
​
class RichTextParser(HTMLParser):
  def __init__(self):
    super().__init__()
    self.elements = []
  
  def handle_starttag(self, tag, attrs):
    self.elements.append(f"<{tag}>")
  
  def handle_data(self, data):
    self.elements.append(data.strip())
​
parser = RichTextParser()
parser.feed("<p>Hello <b>World</b></p>")
print(parser.elements)

SQL 代码块

SELECT content_id, title, summary, publish_time
FROM yjwl_content
WHERE status = '1' AND del_flag = '0'
ORDER BY publish_time DESC
LIMIT 18;

六、图片占位测试

单张图片

多图并排

图片列表

七、表格测试

基础表格

测试项目支持状态备注说明标题层级✅ 支持支持 H1-H6 六级标题列表嵌套✅ 支持支持无序/有序列表多层嵌套代码高亮✅ 支持支持 JavaScript/Python/SQL 等主流语言图片上传⏳ 待验证需测试本地上传与外链引用表格渲染✅ 支持支持单元格合并与对齐设置引用块✅ 支持支持多级引用与内联样式任务列表⏳ 待验证需测试勾选状态渲染

复杂表格

功能模块优先级状态负责人截止日期基础排版P0已完成张三2026-07-15代码高亮P1进行中李四2026-07-25图片上传P1待开始王五2026-08-05导出 PDFP2待开始赵六2026-08-15多语言P2待开始钱七2026-08-20

八、分割线测试

九、综合测试

将以上所有元素组合在一起，测试编辑器对混合内容的渲染能力：

段落 + 列表 + 引用 + 代码 + 图片 + 表格

示例引用：富文本编辑器的最终目标是让非技术用户也能轻松创建格式丰富的网页内容，同时保证输出内容的语义化和可访问性。

// 综合示例：将 Markdown 转换为富文本 HTML
const markdownToHtml = (md) => {
 return marked.parse(md, {
  breaks: true,
  gfm: true,
  headerIds: true,
  mangle: false
 });
};

十、超链接测试

• RuoYi-Vue-Plus 官方文档
• Markdown 语法参考
• Markdown Guide

以上内容已包含富文本编辑器测试所需的核心元素。在实际使用中，建议根据具体业务场景调整测试用例，重点关注编辑器在移动端、深色模式及无障碍访问等特殊场景下的表现。