富文本综合测试文档


TinyMCE 富文本编辑器综合测试文档

本文档用于测试富文本编辑器的常见内容元素、排版能力、复制粘贴能力以及 HTML 内容解析能力。


一、基础文本格式

这是一个普通段落,用于测试富文本编辑器最基本的文字输入和段落排版功能。

这是一段包含 粗体文字斜体文字、 删除线文字、 下划线文字行内代码、 高亮文字 的测试内容。

粗体 + 斜体

© ® ™ § ¶ € ¥ £ $ ℃ ± × ÷ ≈ ≠ ≤ ≥ → ← ↑ ↓ ★ ☆ ♥ ♠ ♣ ♦


二、标题层级

三级标题

三级标题下面是一段普通正文,用于测试标题与正文之间的层级关系。

四级标题

四级标题下面是一段正文。

五级标题

五级标题下面是一段正文。

六级标题

六级标题通常用于较低级别的内容层次。


三、段落与换行

这是第一段文字。段落之间应该保持清晰的间距。

这是第二段文字。用于测试连续段落的渲染效果。

这是第三段文字。用于测试编辑器中的段落结构。

第一行文字。
第二行文字。
第三行文字。


四、文字对齐

左对齐

这是一段左对齐文字,用于测试默认文本对齐方式。

居中对齐

这是一段居中文字,用于测试文本居中效果。

右对齐

这是一段右对齐文字,用于测试文本右对齐效果。

两端对齐

这是一段两端对齐文字,用于测试富文本编辑器对长文本的排版效果。为了让两端对齐的效果更加明显,这里故意增加一些文字内容,使这一行拥有足够的长度。


五、文字颜色与字号

红色文字 蓝色文字 绿色文字 橙色文字 紫色文字

12px 小号文字 16px 普通文字 24px 大号文字 32px 超大文字

黄色背景高亮 蓝色背景高亮


六、链接

这是一个普通链接: MrDoc 官网

这是一个外部链接: Example.com

邮箱: test@example.com

URL: https://example.com/


七、引用

这是一个一级引用。

引用可以包含多行内容,用于测试 blockquote 的显示效果。

这是一段较长的引用内容。引用通常用于突出显示某段来自其他地方的文字,也可以用于测试编辑器对块级元素的处理能力。


八、无序列表

  • 苹果
  • 香蕉
  • 橙子
  • 葡萄
  • 西瓜

多级无序列表

  • 前端开发
    • HTML
    • CSS
    • JavaScript
    • TypeScript
  • 后端开发
    • Python
    • Django
    • Node.js
  • 数据库
    • MySQL
    • SQLite
    • PostgreSQL

九、有序列表

  1. 创建项目
  2. 安装依赖
  3. 编写代码
  4. 运行测试
  5. 发布版本

多级有序列表

  1. 项目准备
    1. 创建目录
    2. 初始化项目
    3. 安装依赖
  2. 开发阶段
    1. 编写前端
    2. 编写后端
    3. 编写测试
  3. 发布阶段
    1. 构建项目
    2. 上传服务器
    3. 验证功能

十、任务列表

  • 完成项目初始化
  • 完成数据库设计
  • 完成 API 开发
  • 完成前端页面
  • 完成基础测试
  • 发布正式版本

十一、图片

下面用于测试图片元素:

TinyMCE 测试图片

图片可以测试以下内容:

  • 图片插入
  • 图片缩放
  • 图片居中
  • 图片对齐
  • 图片替换
  • 图片删除
  • 图片链接
  • 图片说明文字
  • 图片复制粘贴

十二、表格

普通表格

编号 名称 类型 状态 更新时间
1 项目文档 文档 正常 2026-08-20
2 产品说明 文档 正常 2026-08-21
3 API 文档 技术文档 草稿 2026-08-22
4 测试文档 测试 已完成 2026-08-22

包含合并单元格的表格

模块 Web Mobile
状态 版本 状态 版本
文档阅读 正常 1.6.7 正常 1.6.7
文档编辑 正常 1.6.7 部分支持 1.6.7

十三、代码

行内代码

可以使用 console.log() 输出调试信息。

const message = "Hello, TinyMCE";

JavaScript

function hello(name) {
    const message = `Hello, ${name}!`;
    console.log(message);
}

hello("TinyMCE");

Python

def hello(name):
    message = f"Hello, {name}!"
    print(message)

hello("TinyMCE")

HTML

<div class="container">
    <h1>Hello TinyMCE</h1>
    <p>This is a test document.</p>
</div>

JSON

{
    "name": "TinyMCE",
    "version": "1.0.0",
    "enabled": true,
    "features": [
        "text",
        "image",
        "table",
        "code"
    ]
}

十四、预格式化文本

这是一段预格式化文本。
空格应该被保留。
    这一行前面有缩进。
        这一行拥有更多缩进。

function test() {
    return "Hello TinyMCE";
}

十五、上下标

化学公式: H2O、 CO2

数学表达式: x2 + y2 = z2

E = mc2

下标测试: a1 + a2 + a3 = a4

上标测试: 100 101 102 103 104


十六、特殊字符

常见 HTML 特殊字符: < > & " '

常见数学符号: ∞ ∑ ∏ √ ∫ ∂ ∆ α β γ θ λ μ π σ ω

箭头: ← → ↑ ↓ ↔ ⇒ ⇐ ⇑ ⇓

货币: ¥ $ € £ ₽ ₩ ₹

其他: © ® ™ ℃ №


十七、字体样式组合

粗体 + 斜体 + 下划线 + 红色

大字号 + 蓝色 + 黄色背景


十八、长文本测试

这一部分用于测试长文本连续输入、自动换行、复制粘贴以及编辑器在较长内容下的表现。知识库系统通常需要处理大量连续文本。用户可能一次性粘贴数千字甚至数万字的内容,因此编辑器不仅需要正确显示文本,还需要保证光标定位、撤销重做、复制粘贴以及内容保存等功能正常工作。

当文本长度增加以后,还可以观察编辑器是否出现明显的性能下降,例如输入延迟、滚动卡顿、光标跳动、图片加载异常以及页面布局抖动等问题。

这是一段用于重复测试的长文本。富文本编辑器在实际使用过程中,可能同时包含标题、列表、表格、图片、代码块和链接,因此单独测试某一种元素并不能完全代表真实使用场景。


十九、混合内容测试

产品介绍

MrDoc 是一个面向个人和团队的知识文档管理系统。

它可以用于:

  1. 编写产品文档
  2. 管理技术文档
  3. 创建知识库
  4. 编写 API 文档
  5. 管理团队内部资料

同时支持:

  • Markdown
  • 富文本
  • 图片
  • 表格
  • 代码
  • 文档目录
  • 知识库搜索

提示: 实际支持的功能取决于具体版本和编辑器配置。


二十、嵌套混合内容

注意事项

在实际文档中,一段引用内部也可能包含:

  • 粗体文字
  • 斜体文字
  • 代码
  • 链接

甚至可以包含一个小列表:

  1. 第一项
  2. 第二项
  3. 第三项

二十一、编辑器边界测试

只有粗体

只有斜体

只有删除线

只有代码

粗体中包含 代码

斜体中包含 粗体

链接文字

一个非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的连续文本,用于测试编辑器在没有明显空格的位置是否能够正常换行。


二十二、空内容与段落测试

第一段。

第二段。

 

第三段。

第四段。


二十三、综合场景

项目发布说明

版本:1.6.7
发布日期:2026-08-22
状态:正式发布

本次版本主要包含以下更新:

  1. 优化文档编辑器性能。
  2. 修复图片上传问题。
  3. 增强表格编辑能力。
  4. 优化移动端阅读体验。
  5. 增加 AI 知识库问答能力。

升级建议: 升级前请做好数据备份。

主要变化

模块 变化 影响
编辑器 性能优化 正面
图片 上传优化 正面
表格 编辑能力增强 正面
AI 增加知识库问答 正面

示例代码

def search_documents(keyword):
    """
    根据关键词搜索文档。
    """
    results = Document.objects.filter(
        name__icontains=keyword
    )
    return results

最后说明

感谢使用本系统。

如发现问题,请及时反馈。

测试结束。


呵呵哒 2026年8月22日 17:10 收藏文档
AI