tiptap 排版
这个扩展旨在帮助处理常见的文本模式,使用正确的排版字符。实际上,所有规则都是输入规则。
安装
npm install @tiptap/extension-typography
规则
名称 | 描述 |
---|---|
连字号 | 将 -- 转换为连字号 — 。 |
省略号 | 将 ... 转换为省略号字符 … 。 |
开始双引号 | “ 智能开启双引号。 |
结束双引号 | ” 智能结束双引号。 |
开始单引号 | ‘ 智能开启单引号。 |
结束单引号 | ’ 智能结束单引号。 |
左箭头 | 将 <‐> 转换为箭头 ← 。 |
右箭头 | 将 ‐> 转换为箭头 → 。 |
版权符号 | 将 (c) 转换为版权符号 © 。 |
注册商标符号 | 将 (r) 转换为注册商标符号 ® 。 |
商标符号 | 将 (tm) 转换为商标符号 ™ 。 |
服务标记符号 | 将 (sm) 转换为服务标记符号 ℠ 。 |
半数 | 将 1/2 转换为半数 ½ 。 |
四分之一 | 将 1/4 转换为四分之一 ¼ 。 |
七分之三 | 将 3/4 转换为七分之三 ¾ 。 |
加减号 | 将 +/- 转换为加减号 ± 。 |
不等于符号 | 将 != 转换为不等于符号 ≠ 。 |
左双角引号 | 将 << 转换为左指向的双角引号 « 。 |
右双角引号 | 将 >> 转换为右指向的双角引号 » 。 |
乘法符号 | 将 2 * 3 或 2x3 转换为乘法符号 2×3 。 |
上标二 | 将 ^2 转换为上标二 ² 。 |
上标三 | 将 ^3 转换为上标三 ³ 。 |
键盘快捷键
命令 | Windows/Linux | macOS |
---|---|---|
撤消输入规则 | Backspace |
Backspace |
源码
packages/extension-typography/
使用方法
https://embed.tiptap.dev/preview/Extensions/Typography
关闭规则
您可以配置内置规则,甚至禁用其中一些,如下所示。
import { Editor } from "@tiptap/core";
import Typography from "@tiptap/extension-typography";
const editor = new Editor({
extensions: [
// 禁用一些内置规则
Typography.configure({
oneHalf: false, // 关闭半数规则
oneQuarter: false, // 关闭四分之一规则
threeQuarters: false, // 关闭七分之三规则
}),
],
});
覆盖规则
您可以通过传递字符串来覆盖规则的输出,只需将您想要覆盖的选项设置为字符串即可。
import { Editor } from "@tiptap/core";
import Typography from "@tiptap/extension-typography";
const editor = new Editor({
extensions: [
// 关闭半数规则,并自定义输出
Typography.configure({
oneHalf: "1 / 2", // 将输出改为 "1 / 2" 而不是默认的 "½"
}),
],
});