React项目中Tiptap编辑器isActive检测underline失效问题求助

先确认基础配置是否正确 #

首先得确保你已经安装并注册了Tiptap官方的Underline扩展，很多时候失效是因为漏了这一步：

1. 安装扩展：

npm install @tiptap/extension-underline

2. 在编辑器实例中注册：

import Underline from '@tiptap/extension-underline';

const editor = useEditor({
  extensions: [
    // 这里放你的其他扩展（比如StarterKit）
    Underline,
  ],
  // 其他编辑器配置
});

正确调用isActive检测下划线 #

官方Underline扩展的注册名称是全小写的underline，你之前试的underLine、UnderLine都不对，正确写法应该是：

<Button variant={editor.isActive('underline') ? 'contained' : 'outlined'}>
  下划线
</Button>

备用方案：直接检测样式属性 #

如果上面的方法还是不行，可以尝试通过检测文本装饰属性来判断：

<Button variant={editor.isActive({ textDecoration: 'underline' }) ? 'contained' : 'outlined'}>
  下划线
</Button>

这种方式直接对应下划线在HTML中应用的样式属性，兼容性更强。

内容的提问来源于stack exchange，提问作者Gyurbácsony Gregtor