告别内容删除烦恼：tiptap删除线功能让修订追踪更高效

在日常文档协作中，你是否遇到过这些问题：团队多人编辑时难以追踪修改痕迹？内容删除后无法恢复历史版本？需要清晰标记已删除文本却找不到合适工具？tiptap编辑器的删除线功能正是为解决这些痛点而生，它不仅能直观展示文本删除标记，还能与修订功能深度集成，让文档协作更流畅。读完本文，你将掌握删除线功能的实现方式、快捷键操作及高级应用技巧，轻松应对各类文档修订场景。

删除线功能核心实现解析

tiptap的删除线功能由extension-strike模块提供，该模块基于ProseMirror构建，通过Mark类型实现文本标记功能。核心代码定义在packages/extension-strike/src/strike.ts中，主要包含三个部分：解析规则、渲染逻辑和命令系统。

解析规则部分支持多种HTML标签和样式，包括<s>、<del>、<strike>标签以及text-decoration: line-through样式，确保从不同来源复制的删除线文本都能正确解析。渲染时默认使用<s>标签，并支持自定义HTML属性，方便开发者根据需求调整样式。

命令系统提供了三个核心方法：setStrike()、toggleStrike()和unsetStrike()，分别用于设置、切换和取消删除线格式。同时还支持键盘快捷键操作，默认使用Mod-Shift-s（Windows/Linux为Ctrl+Shift+S，Mac为Cmd+Shift+S），让用户可以快速操作。

快速上手：安装与基础使用

使用删除线功能前，需先安装扩展包。对于npm用户，可执行以下命令：

npm install @tiptap/extension-strike

yarn用户则使用：

yarn add @tiptap/extension-strike

安装完成后，在编辑器配置中添加该扩展：

import { Editor } from '@tiptap/core'
import Strike from '@tiptap/extension-strike'

new Editor({
  extensions: [
    Strike.configure({
      HTMLAttributes: {
        class: 'custom-strike'
      }
    })
  ],
  content: '<p>这是一段包含<s>删除线</s>的文本</p>'
})

上述代码中，通过configure方法可以自定义删除线的HTML属性，如添加自定义类名用于样式定制。编辑器初始化后，即可通过工具栏按钮或快捷键为选中文本添加删除线。

快捷键与操作技巧

掌握删除线的快捷键操作能显著提升工作效率。tiptap提供了多种操作方式：

• 键盘快捷键：选中文本后按下Ctrl+Shift+S(Windows/Linux)或Cmd+Shift+S(Mac)可快速切换删除线状态
• 命令调用：通过编辑器实例调用命令，如editor.commands.toggleStrike()
• 输入规则：输入~~文本~~后按空格或回车，会自动将文本转换为删除线格式
• 粘贴规则：从其他文档粘贴带删除线的文本时，会自动保留删除线格式

这些操作方式覆盖了不同使用场景，无论是快速标记还是批量处理都能应对自如。特别是输入规则，与Markdown语法兼容，让熟悉Markdown的用户可以无缝过渡。

版本演进与功能优化

删除线功能自tiptap 2.0版本起就已存在，经过多次迭代优化，目前最新版本（3.7.2）在稳定性和兼容性上有了显著提升。从packages/extension-strike/CHANGELOG.md可以看到，主要更新包括：

• 2.2.5版本：修复了Markdown快捷键中间允许空格的问题，确保只有内容的文本才能被正确转换为删除线
• 3.0.1版本：重构了构建系统，采用tsup替代原有构建工具，提升打包效率
• 3.6.0版本：优化了TypeScript类型定义，提供更完善的类型提示

这些更新使得删除线功能在各种使用场景下都更加稳定可靠，特别是对Markdown语法的支持，让内容导入导出更加灵活。

高级应用：与修订功能集成

删除线功能不仅可以单独使用，还能与tiptap的修订功能结合，实现更强大的文档协作能力。通过记录每次删除操作的作者、时间和内容，团队成员可以清晰地追踪文档修改历史。

实现这一功能需要结合extension-collaboration模块，当用户删除文本时，不仅添加删除线标记，还会在文档历史中记录这一操作。代码示例如下：

import { Editor } from '@tiptap/core'
import Strike from '@tiptap/extension-strike'
import Collaboration from '@tiptap/extension-collaboration'

new Editor({
  extensions: [
    Strike,
    Collaboration.configure({
      document: initialDoc,
      plugins: [
        // 配置修订历史插件
      ]
    })
  ],
  content: '<p>文档初始内容</p>'
})

这种集成方式特别适合多人协作的场景，如学术论文修订、法律文档审阅等需要严格追踪修改痕迹的场合。每个删除操作都会被记录在案，管理员可以随时查看谁删除了什么内容以及删除时间。

常见问题与解决方案

在使用删除线功能时，可能会遇到一些常见问题，以下是解决方案：

问题1：删除线样式不生效 检查是否正确安装并配置了extension-strike，确保在编辑器的extensions数组中包含该扩展。如果自定义了CSS，确认没有覆盖默认的删除线样式。

问题2：快捷键无响应 可能是快捷键冲突，可通过重新配置快捷键解决：

Strike.configure({
  addKeyboardShortcuts() {
    return {
      'Mod-Alt-s': () => this.editor.commands.toggleStrike(),
    }
  }
})

问题3：Markdown导入时删除线未被正确解析 确保同时加载了extension-markdown模块，该模块会处理~~文本~~格式的Markdown语法，将其转换为删除线标记。

总结与未来展望

tiptap的删除线功能通过简洁的API设计和灵活的扩展机制，为文档编辑提供了强大的文本删除标记能力。从基础的文本标记到高级的修订追踪，删除线功能都能满足不同场景的需求。随着tiptap的不断发展，未来删除线功能可能会增加更多高级特性，如自定义删除线颜色、添加删除注释等，进一步提升文档协作体验。

无论是个人使用还是团队协作，掌握tiptap删除线功能都能让文档编辑更加高效。建议结合官方文档packages/extension-strike/README.md深入学习，探索更多高级用法。如果你在使用过程中发现任何问题或有功能建议，欢迎通过项目仓库提交反馈，共同完善这一强大的编辑器工具。

现在就尝试在你的tiptap编辑器中集成删除线功能，体验更高效的文档修订流程吧！如需获取完整代码示例，可以访问项目仓库：https://gitcode.com/GitHub_Trending/ti/tiptap。