在使用 Tiptap 时，若发现有序列表无法正常工作，最常见的原因是安装了扩展包但未将其添加到编辑器的 extensions 数组中。

安装 @tiptap/extension-ordered-list 仅将依赖项引入项目目录，仍需显式告知编辑器实例启用该功能。此外，为确保列表正确渲染，通常还需包含 ListItem 扩展，它在使用 StarterKit 时已自动集成。若未使用 StarterKit，则必须手动引入 Document、Paragraph、Text、ListItem 等基础扩展。 以下是正确配置步骤：

1. 导入所需扩展

   import { useEditor, EditorContent } from '@tiptap/react';
   import StarterKit from '@tiptap/starter-kit';
   import OrderedList from '@tiptap/extension-ordered-list';
   
   // 若未使用 StarterKit，还需额外导入：
   // import ListItem from '@tiptap/extension-list-item';
   // import Paragraph from '@tiptap/extension-paragraph';
   // import Document from '@tiptap/extension-document';
   // import Text from '@tiptap/extension-text';

2. 在初始化编辑器时注册扩展 这是关键步骤。

   const MyEditor = () => {
     const editor = useEditor({
       extensions: [
         // 启用 StarterKit 并配置其有序列表行为
         StarterKit.configure({
           orderedList: {
             keepMarks: true,     // 保留格式（如粗体、斜体）
             keepAttributes: false, // 不保留自定义属性
           },
         }),
   
         // 若禁用了 StarterKit 内置的有序列表，或从零构建扩展，需单独添加：
         // OrderedList.configure({
         //   HTMLAttributes: {
         //     class: 'custom-ordered-list',
         //   },
         // }),
         // ListItem,
         // Paragraph,
         // Document,
         // Text,
         // BulletList, // 如需同时支持无序列表
       ],
       content: '<p>这是一个段落。</p><p>第二行内容。</p>',
     });
   
     if (!editor) return null;
   
     const toggleList = () => {
       editor.chain().focus().toggleOrderedList().run();
     };
   
     return (
       <div>
         <button
           onClick={toggleList}
           disabled={!editor.can().toggleOrderedList()}
           className="px-2 py-1 text-sm"
         >
           <svg width="16" height="16">
             <circle cx="4" cy="8" r="2" fill="currentColor"/>
             <circle cx="8" cy="8" r="2" fill="currentColor"/>
             <circle cx="12" cy="8" r="2" fill="currentColor"/>
             <line x1="2" y1="4" x2="14" y2="4" stroke="currentColor" strokeWidth="1.5" />
             <line x1="2" y1="12" x2="14" y2="12" stroke="currentColor" strokeWidth="1.5" />
           </svg>
         </button>
         <EditorContent editor={editor} />
       </div>
     );
   };
   
   export default MyEditor;

核心说明：

• import OrderedList：引入有序列表功能模块。
• StarterKit.configure({ orderedList: ... })：若使用 StarterKit，可直接通过配置调整默认行为。该套件已内置 OrderedList，无需重复添加。
• OrderedList.configure(...)：当不使用 StarterKit，或主动关闭其默认实现时，才需手动加入，并确保 ListItem、Paragraph 等基础扩展也一并注册。

排查建议：

• 检查浏览器开发者工具中的错误日志，关注与 Tiptap 相关的异常。
• 确认 ListItem 是否存在于扩展列表中，它是有序列表运作的基础。
• 可通过 console.log(editor.isActive('orderedList')) 验证当前光标是否处于有序列表状态。

只要将 OrderedList 正确注入 extensions 数组，即可实现按钮控制有序列表的切换功能。