抠丁客 抠丁客
项目
编辑 (2024/6/19)

tiptap 排版

版本号 下载量

这个扩展旨在帮助处理常见的文本模式，使用正确的排版字符。实际上，所有规则都是输入规则。

安装

npm install @tiptap/extension-typography

规则

名称 描述
连字号 将 -- 转换为连字号 —。
省略号 将 ... 转换为省略号字符 …。
开始双引号 “ 智能开启双引号。
结束双引号 ” 智能结束双引号。
开始单引号 ‘ 智能开启单引号。
结束单引号 ’ 智能结束单引号。
左箭头 将 <&dash;> 转换为箭头 ←。
右箭头 将 &dash;> 转换为箭头 →。
版权符号 将 (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" 而不是默认的 "½"
    }),
  ],
});
在本文档中