富文本编辑器功能验收演示

固定 content_id=1，slug rich-text-editor-qa-demo。每次迭代发布后：后台打开编辑、前台打开详情，按章节逐项核对。

1. 基础排版

标题、段落与引用

普通段落，包含 粗体、斜体、下划线、删除线，以及 外链。

引用块：检查左边框、背景色与段落间距是否与前台一致。

列表与缩进

• 无序列表 — 编程
• 无序列表 — 数据科学
• 缩进子项 A
• 缩进子项 B

1. 有序步骤：插入代码块
2. 步骤：选择语言并应用（Python / SQL 等）
3. 步骤：保存后在详情页确认语法高亮

对齐、字号与颜色

居中段落（ql-align-center）

右对齐段落（ql-align-right）

红色文字 与 黄色高亮背景

大号文字 与行内代码 npm run build

2. 图片上传

以下为占位图（验收时可在后台替换为实际上传图片）：

3. 外部视频（iframe）

B 站 embed（工具栏「插入外部视频」）：

4. 代码块与语法高亮

工具栏：代码块 + 语言。保存后应带 data-language 属性。

Python

def greet(name: str) -> str:
    """示例函数"""
    return f"Hello, {name}!"

if __name__ == "__main__":
    print(greet("必学必会"))

JavaScript

export function fib(n) {
  let a = 0, b = 1;
  for (let i = 0; i < n; i++) [a, b] = [b, a + b];
  return a;
}

TypeScript

type User = { id: number; name: string };
const loadUser = async (id: number): Promise =>
  fetch(`/api/users/$${id}`).then(r => r.json());

SQL

SELECT c.content_id, c.content_title, c.content_slug
FROM x2_content c
WHERE c.content_status = 1
ORDER BY c.content_sequence DESC, c.content_id DESC
LIMIT 20;

Bash

#!/bin/bash
set -euo pipefail
curl -sf "https://bixuebihui.com/api/auth/oauth/providers" | head -c 200

JSON

{
  "editor": "react-quill",
  "highlight": "highlight.js",
  "math": "katex",
  "chem": ["smiles", "mol", "cdxml"]
}

5. 数学公式（∑ 工具栏 · KaTeX）

行间公式块

正文内 LaTeX（SSR 兼容）

行内公式 $T > 1$ 表示温度参数；Softmax 块级写法：

6. 化学结构（⬡ 工具栏）

SMILES — 乙醇