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

富文本编辑器全功能验收页（ID=1）：排版、图片、视频、代码高亮、KaTeX 公式、化学结构块。每次发版人工核对。

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

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

1. 基础排版

标题、段落与引用

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

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

列表与缩进

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

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

对齐、字号与颜色

居中段落（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）

行间公式块

E=mc^2

\int_0^1 x^2 \, dx = \frac{1}{3}

\mathcal{L} = \alpha \cdot \mathcal{L}_{CE} + (1-\alpha) \cdot T^2 \cdot \mathcal{L}_{KL}

正文内 LaTeX（SSR 兼容）

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

\sigma(z_i/T) = \frac{e^{z_i/T}}{\sum_j e^{z_j/T}}

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

SMILES — 乙醇

乙醇（Ethanol）

SMILES — 苯

苯（Benzene）

MOL 文件（V2000）

乙醇 MOL 结构

CDXML（ChemDraw 原文存贮）

ChemDraw CDXML 已保存；建议导出为 SMILES 或 MOL 以获得结构预览。

查看 CDXML 源码

<CDXML Creator=

7. 人工验收清单

后台编辑：内容管理 → ID=1 → 各块在编辑器内可识别、可修改
应用语言：改代码块语言后不跳动、有彩色高亮
前台 SSR：/content/rich-text-editor-qa-demo 公式/化学/代码/视频正常
保存回归：改一段文字保存后，前台与后台一致

最后更新：由 Flyway V59 种子写入，迭代时可直接改库中正文或重新执行迁移脚本。