@tiptap/vue-2 知识点笔记-04commands commands 是 @tiptap/vue-2 编辑器的

13 commands

{
  commands: {
    addColumnAfter,
    addColumnBefore,
    addImage,
    addRowAfter,
    addRowBefore,
    blur,
    clearContent,
    clearNodes,
    command,
    createParagraphNear,
    cut,
    deleteColumn,
    deleteCurrentNode,
    deleteNode,
    deleteRange,
    deleteRow,
    deleteSelection,
    deleteTable,
    enter,
    exitCode,
    extendMarkRange,
    first,
    fixTables,
    focus,
    forEach,
    goToNextCell,
    goToPreviousCell,
    indent,
    insertContent,
    insertContentAt,
    insertDrawIo,
    insertTable,
    joinBackward,
    joinDown,
    joinForward,
    joinItemBackward,
    joinItemForward,
    joinTextblockBackward,
    joinTextblockForward,
    joinUp,
    keyboardShortcut,
    lift,
    liftEmptyBlock,
    liftListItem,
    mergeCells,
    mergeOrSplit,
    newlineInCode,
    outdent,
    redo,
    removeEmptyTextStyle,
    resetAttributes,
    scrollIntoView,
    selectAll,
    selectNodeBackward,
    selectNodeForward,
    selectParentNode,
    selectTextblockEnd,
    selectTextblockStart,
    setBlockquote,
    setBold,
    setCellAttribute,
    setCellSelection,
    setCode,
    setCodeBlock,
    setColor,
    setContent,
    setFile,
    setFontSize,
    setHardBreak,
    setHeading,
    setHighlight,
    setHorizontalRule,
    setImage,
    setItalic,
    setLink,
    setMark,
    setMedia,
    setMeta,
    setNode,
    setNodeSelection,
    setParagraph,
    setStrike,
    setTextAlign,
    setTextSelection,
    sinkListItem,
    splitBlock,
    splitCell,
    splitListItem,
    toggleBlockquote,
    toggleBold,
    toggleBulletList,
    toggleCode,
    toggleCodeBlock,
    toggleHeaderCell,
    toggleHeaderColumn,
    toggleHeaderRow,
    toggleHeading,
    toggleHighlight,
    toggleItalic,
    toggleLink,
    toggleList,
    toggleMark,
    toggleNode,
    toggleOrderedList,
    toggleStrike,
    toggleTaskList,
    toggleTextAlign,
    toggleWrap,
    undo,
    undoInputRule,
    unsetAllMarks,
    unsetBlockquote,
    unsetBold,
    unsetCode,
    unsetColor,
    unsetFontSize,
    unsetHighlight,
    unsetItalic,
    unsetLink,
    unsetMark,
    unsetStrike,
    unsetTextAlign,
    update,
    updateAttributes,
    wrapIn,
    wrapInList,
  },
}

commands 是 @tiptap/vue-2 编辑器的核心命令集合，封装了所有编辑操作（如格式化、内容插入、节点操作等），是与编辑器交互的主要方式。以下是所有命令的分类解释及使用示例：

13.1 一、表格操作命令

用于表格的创建、修改和删除，依赖 Table 扩展。

commands.addColumnAfter
- 类型：
- 功能描述：在当前列后添加新列
- 使用示例：
```
// 在当前表格列后添加一列 
editor.commands.addColumnAfter();
```
commands.addColumnBefore
- 类型：
- 功能描述：在当前列前添加新列
- 使用示例：
```
// 在当前表格列前添加一列 
editor.commands.addColumnBefore();
```
commands.addRowAfter
- 类型：
- 功能描述：在当前行后添加新行
- 使用示例：
```
// 在当前表格行后添加一行 
editor.commands.addRowAfter();
```
commands.addRowBefore
- 类型：
- 功能描述：在当前行前添加新行
- 使用示例：
```
// 在当前表格行前添加一行 
editor.commands.addRowBefore();
```
commands.deleteColumn
- 类型：
- 功能描述：删除当前列
- 使用示例：
```
// 删除当前表格列 
editor.commands.deleteColumn();
```
commands.deleteRow
- 类型：
- 功能描述：删除当前行
- 使用示例：
```
// 删除当前表格行 
editor.commands.deleteRow();
```
commands.deleteTable
- 类型：
- 功能描述：删除整个表格
- 使用示例：
```
// 删除当前表格 
editor.commands.deleteTable();
```
commands.fixTables
- 类型：
- 功能描述：修复表格结构（如合并/拆分异常的单元格）
- 使用示例：
```
// 修复表格布局错误 
editor.commands.fixTables();
```
commands.goToNextCell
- 类型：
- 功能描述：光标移动到下一个单元格
- 使用示例：
```
// 移动到右侧单元格 
editor.commands.goToNextCell();
```
commands.goToPreviousCell
- 类型：
- 功能描述：光标移动到上一个单元格
- 使用示例：
```
// 移动到左侧单元格 
editor.commands.goToPreviousCell();
```
commands.mergeCells
- 类型：
- 功能描述：合并选中的单元格
- 使用示例：
```
// 合并当前选中的单元格 
editor.commands.mergeCells();
```
commands.mergeOrSplit
- 类型：
- 功能描述：合并或拆分单元格（智能判断操作）
- 使用示例：
```
// 合并/拆分当前单元格 
editor.commands.mergeOrSplit();
```
commands.setCellAttribute
- 类型：
- 功能描述：设置表格单元格属性（如背景色、对齐方式）
- 使用示例：
```
// 设置当前单元格背景色为红色 
editor.commands.setCellAttribute('backgroundColor', '#ff0000'); 
```

commands.setCellSelection

类型：
功能描述：选中指定单元格范围

使用示例：

// 选中从(0,0)到(1,1)的单元格 
editor.commands.setCellSelection({ 
  from: { row: 0, col: 0 }, 
  to: { row: 1, col: 1 } 
});

commands.splitCell
- 类型：
- 功能描述：拆分当前单元格
- 使用示例：
```
// 拆分当前单元格为2行2列 
editor.commands.splitCell(2, 2);
```
commands.toggleHeaderCell
- 类型：
- 功能描述：切换单元格为表头/普通单元格
- 使用示例：
```
// 切换当前单元格为表头 
editor.commands.toggleHeaderCell();
```
commands.toggleHeaderColumn
- 类型：
- 功能描述：切换当前列为表头列
- 使用示例：
```
// 切换当前列为表头列 
editor.commands.toggleHeaderColumn();
```
commands.toggleHeaderRow
- 类型：
- 功能描述：切换当前行为表头行
- 使用示例：
```
// 切换当前行为表头行 
editor.commands.toggleHeaderRow();
```

commands.insertTable

类型：
功能描述：插入新表格

使用示例：

// 插入3行3列的表格 
editor.commands.insertTable({ 
  rows: 3, 
  cols: 3, 
  withHeaderRow: true 
});

13.2 二、内容编辑命令

用于文本输入、删除、选择等基础操作。

commands.blur
- 类型：
- 功能描述：使编辑器失焦
- 使用示例：
```
// 编辑器失焦 
editor.commands.blur();
```
commands.clearContent
- 类型：
- 功能描述：清空编辑器内容
- 使用示例：
```
// 清空所有内容 
editor.commands.clearContent();
```
commands.clearNodes
- 类型：
- 功能描述：清除当前节点的格式
- 使用示例：
```
// 清除当前节点的所有格式 
editor.commands.clearNodes();
```
commands.createParagraphNear
- 类型：
- 功能描述：在当前节点附近创建段落
- 使用示例：
```
// 在当前节点前创建段落 
editor.commands.createParagraphNear('before');
```
commands.cut
- 类型：
- 功能描述：剪切选中内容到剪贴板
- 使用示例：
```
// 剪切选区内的内容 
editor.commands.cut();
```
commands.deleteCurrentNode
- 类型：
- 功能描述：删除当前节点
- 使用示例：
```
// 删除光标所在的节点 
editor.commands.deleteCurrentNode();
```

commands.deleteNode

类型：
功能描述：删除指定节点

使用示例：

// 删除指定位置的节点（pos为节点起始位置） 
editor.commands.deleteNode(pos);

commands.deleteRange

类型：
功能描述：删除指定范围的内容

使用示例：

// 删除从10到20位置的内容 
editor.commands.deleteRange({ from: 10, to: 20 });

commands.deleteSelection
- 类型：
- 功能描述：删除选中的内容
- 使用示例：
```
// 删除当前选区内容 
editor.commands.deleteSelection();
```
commands.enter
- 类型：
- 功能描述：模拟回车键（换行）
- 使用示例：
```
// 在当前位置插入换行 
editor.commands.enter(); 
```
commands.exitCode
- 类型：
- 功能描述：退出代码块编辑模式
- 使用示例：
```
// 退出代码块 
editor.commands.exitCode();
```
commands.focus
- 类型：
- 功能描述：使编辑器聚焦
- 使用示例：
```
// 聚焦编辑器 
editor.commands.focus();
```
commands.indent
- 类型：
- 功能描述：增加当前节点缩进
- 使用示例：
```
// 增加缩进 
editor.commands.indent();
```

commands.insertContent

类型：
功能描述：在当前位置插入内容

使用示例：

// 插入HTML内容 
editor.commands.insertContent('<p>新内容</p>'); 
// 插入文本 
editor.commands.insertContent('纯文本');

commands.insertContentAt
- 类型：
- 功能描述：在指定位置插入内容
- 使用示例：
```
// 在位置20插入内容 
editor.commands.insertContentAt(20, '<h2>标题</h2>');
```
commands.joinBackward
- 类型：
- 功能描述：与前一个节点合并
- 使用示例：
```
// 与前面的节点合并 
editor.commands.joinBackward();
```
commands.joinDown
- 类型：
- 功能描述：与下方节点合并
- 使用示例：
```
// 与下方节点合并 
editor.commands.joinDown();
```
commands.joinForward
- 类型：
- 功能描述：与后一个节点合并
- 使用示例：
```
// 与后面的节点合并 
editor.commands.joinForward();
```
commands.joinItemBackward
- 类型：
- 功能描述：列表项与前一项合并
- 使用示例：
```
// 列表项与前一项合并 
editor.commands.joinItemBackward();
```
commands.joinItemForward
- 类型：
- 功能描述：列表项与后一项合并
- 使用示例：
```
// 列表项与后一项合并 
editor.commands.joinItemForward();
```
commands.joinTextblockBackward
- 类型：
- 功能描述：文本块与前一个文本块合并
- 使用示例：
```
// 文本块与前面合并 
editor.commands.joinTextblockBackward();
```
commands.joinTextblockForward
- 类型：
- 功能描述：文本块与后一个文本块合并
- 使用示例：
```
// 文本块与后面合并 
editor.commands.joinTextblockForward();
```
commands.joinUp
- 类型：
- 功能描述：与上方节点合并
- 使用示例：
```
// 与上方节点合并 
editor.commands.joinUp();
```
commands.lift
- 类型：
- 功能描述：提升节点层级（减少嵌套）
- 使用示例：
```
// 提升当前节点层级 
editor.commands.lift(); 
```
commands.liftEmptyBlock
- 类型：
- 功能描述：提升空块节点层级
- 使用示例：
```
// 提升空块节点 
editor.commands.liftEmptyBlock();
```
commands.liftListItem
- 类型：
- 功能描述：提升列表项层级
- 使用示例：
```
// 提升当前列表项 
editor.commands.liftListItem();
```
commands.newlineInCode
- 类型：
- 功能描述：在代码块中插入换行
- 使用示例：
```
// 代码块内换行 
editor.commands.newlineInCode();
```
commands.outdent
- 类型：
- 功能描述：减少当前节点缩进
- 使用示例：
```
// 减少缩进 
editor.commands.outdent();
```
commands.removeEmptyTextStyle
- 类型：
- 功能描述：移除空文本的样式
- 使用示例：
```
// 清理空文本的样式 
editor.commands.removeEmptyTextStyle();
```
commands.resetAttributes
- 类型：
- 功能描述：重置节点属性为默认值
- 使用示例：
```
// 重置当前节点的所有属性 
editor.commands.resetAttributes();
```
commands.scrollIntoView
- 类型：
- 功能描述：滚动使当前节点可见
- 使用示例：
```
// 滚动到当前节点 
editor.commands.scrollIntoView();
```
commands.selectAll
- 类型：
- 功能描述：选中所有内容
- 使用示例：
```
// 全选 
editor.commands.selectAll();
```
commands.selectNodeBackward
- 类型：
- 功能描述：向后选中节点
- 使用示例：
```
// 向后选中一个节点 
editor.commands.selectNodeBackward();
```
commands.selectNodeForward
- 类型：
- 功能描述：向前选中节点
- 使用示例：
```
// 向前选中一个节点 
editor.commands.selectNodeForward();
```
commands.selectParentNode
- 类型：
- 功能描述：选中父节点
- 使用示例：
```
// 选中当前节点的父节点 
editor.commands.selectParentNode();
```
commands.selectTextblockEnd
- 类型：
- 功能描述：选中到文本块末尾
- 使用示例：
```
// 选中从当前位置到文本块末尾 
editor.commands.selectTextblockEnd();
```
commands.selectTextblockStart
- 类型：
- 功能描述：选中到文本块开头
- 使用示例：
```
// 选中从当前位置到文本块开头 
editor.commands.selectTextblockStart();
```
commands.setContent
- 类型：
- 功能描述：设置编辑器全部内容
- 使用示例：
```
// 设置HTML内容 
editor.commands.setContent('<h1>标题</h1><p>内容</p>');
```
commands.setNodeSelection
- 类型：
- 功能描述：选中指定节点
- 使用示例：
```
// 选中位置10开始的节点 
editor.commands.setNodeSelection(10);
```

commands.setTextSelection

类型：
功能描述：选中指定文本范围

使用示例：

// 选中从5到15的文本 
editor.commands.setTextSelection({ from: 5, to: 15 });

commands.sinkListItem
- 类型：
- 功能描述：降低列表项层级（增加嵌套）
- 使用示例：
```
// 降低当前列表项层级 
editor.commands.sinkListItem();
```
commands.splitBlock
- 类型：
- 功能描述：拆分当前块节点
- 使用示例：
```
// 拆分当前块节点 
editor.commands.splitBlock();
```
commands.splitListItem
- 类型：
- 功能描述：拆分列表项
- 使用示例：
```
// 拆分当前列表项 
editor.commands.splitListItem();
```
commands.update
- 类型：
- 功能描述：强制更新编辑器
- 使用示例：
```
// 强制刷新编辑器 
editor.commands.update();
```

commands.updateAttributes

类型：
功能描述：更新节点属性

使用示例：

// 更新当前标题节点的级别 
editor.commands.updateAttributes('heading', { level: 2 });

commands.wrapIn
- 类型：
- 功能描述：将当前节点包裹到指定节点中
- 使用示例：
```
// 将当前节点包裹到块引用中 
editor.commands.wrapIn('blockquote');
```
commands.wrapInList
- 类型：
- 功能描述：将当前节点包裹到列表中
- 使用示例：
```
// 包裹到无序列表中 
editor.commands.wrapInList('bulletList'); 
```

13.3 三、格式设置命令

用于文本和节点的格式化（加粗、对齐等）。

commands.extendMarkRange
- 类型：
- 功能描述：扩展标记范围（如扩大加粗范围）
- 使用示例：
```
// 扩展加粗范围到前5个字符 
editor.commands.extendMarkRange('bold', -5);
```
commands.setBlockquote
- 类型：
- 功能描述：设置当前节点为块引用
- 使用示例：
```
// 应用块引用格式 
editor.commands.setBlockquote();
```
commands.setBold
- 类型：
- 功能描述：设置选中内容为加粗
- 使用示例：
```
// 加粗选中文本 
editor.commands.setBold();
```
commands.setCode
- 类型：
- 功能描述：设置选中内容为行内代码
- 使用示例：
```
// 应用行内代码格式 
editor.commands.setCode();
```

commands.setCodeBlock

类型：
功能描述：设置当前节点为代码块

使用示例：

// 应用代码块格式（语言为JavaScript） 
editor.commands.setCodeBlock({ language: 'javascript' });

commands.setColor
- 类型：
- 功能描述：设置文本颜色
- 使用示例：
```
// 设置文本颜色为红色 
editor.commands.setColor('#ff0000');
```
commands.setFontSize
- 类型：
- 功能描述：设置字体大小
- 使用示例：
```
// 设置字体大小为16px 
editor.commands.setFontSize('16px');
```

commands.setHardBreak

类型：
功能描述：插入硬换行

使用示例：

// 插入硬换行（shift+enter效果） 
editor.commands.setHardBreak();

commands.setHeading
- 类型：
- 功能描述：设置当前节点为标题
- 使用示例：
```
// 设置为二级标题 
editor.commands.setHeading({ level: 2 });
```
commands.setHighlight
- 类型：
- 功能描述：设置文本高亮
- 使用示例：
```
// 设置高亮颜色为黄色 
editor.commands.setHighlight('#ffff00');
```
commands.setHorizontalRule
- 类型：
- 功能描述：插入水平线
- 使用示例：
```
// 插入水平线 
editor.commands.setHorizontalRule();
```
commands.setItalic
- 类型：
- 功能描述：设置选中内容为斜体
- 使用示例：
```
// 应用斜体格式 
editor.commands.setItalic();
```

commands.setLink

类型：
功能描述：为选中内容设置链接

使用示例：

// 设置链接地址和目标 
editor.commands.setLink({ href: 'https://tiptap.dev', target: '_blank' });

commands.setMark

类型：
功能描述：应用自定义标记

使用示例：

// 应用自定义标记"customMark" 
editor.commands.setMark('customMark', { style: 'underline' });

commands.setNode
- 类型：
- 功能描述：设置当前节点类型
- 使用示例：
```
// 将当前节点改为段落 
editor.commands.setNode('paragraph');
```
commands.setParagraph
- 类型：
- 功能描述：设置当前节点为段落
- 使用示例：
```
// 应用段落格式 
editor.commands.setParagraph();
```
commands.setStrike
- 类型：
- 功能描述：设置选中内容为删除线
- 使用示例：
```
// 应用删除线格式 
editor.commands.setStrike();
```
commands.setTextAlign
- 类型：
- 功能描述：设置文本对齐方式
- 使用示例：
```
// 设置文本居中对齐 
editor.commands.setTextAlign('center');
```
commands.toggleBlockquote
- 类型：
- 功能描述：切换块引用格式（有则取消，无则添加）
- 使用示例：
```
// 切换块引用 
editor.commands.toggleBlockquote();
```
commands.toggleBold
- 类型：
- 功能描述：切换加粗格式
- 使用示例：
```
// 切换加粗 
editor.commands.toggleBold();
```
commands.toggleBulletList
- 类型：
- 功能描述：切换无序列表格式
- 使用示例：
```
// 切换无序列表
editor.commands.toggleBulletList();
```
commands.toggleCode
- 类型：
- 功能描述：切换行内代码格式
- 使用示例：
```
// 切换行内代码
editor.commands.toggleCode();
```

commands.toggleCodeBlock

类型：
功能描述：切换代码块格式

使用示例：

// 切换代码块（语言为JavaScript）
editor.commands.toggleCodeBlock({ language: 'javascript' });

commands.toggleHeading

类型：
功能描述：切换标题格式

使用示例：

// 切换为一级标题（无则添加，有则取消）
editor.commands.toggleHeading({
  level: 1
});

commands.toggleHighlight
- 类型：
- 功能描述：切换文本高亮
- 使用示例：
```
// 切换高亮
editor.commands.toggleHighlight();
```
commands.toggleItalic
- 类型：
- 功能描述：切换斜体格式
- 使用示例：
```
// 切换斜体
editor.commands.toggleItalic();
```
commands.toggleLink
- 类型：
- 功能描述：切换链接格式
- 使用示例：
```
// 切换链接（移除或添加）
editor.commands.toggleLink();
```
commands.toggleList
- 类型：
- 功能描述：切换列表格式（根据类型自动判断）
- 使用示例：
```
// 切换为有序列表
editor.commands.toggleList('orderedList');
```

commands.toggleMark

类型：
功能描述：切换自定义标记

使用示例：

// 切换自定义标记"customMark"
editor.commands.toggleMark('customMark');

commands.toggleNode

类型：
功能描述：切换节点类型

使用示例：

// 切换段落和标题间格式
editor.commands.toggleNode('paragraph', 'heading', {
  level: 2
});

commands.toggleOrderedList
- 类型：
- 功能描述：切换有序列表格式
- 使用示例：
```
//切换有序列表
editor.commands.toggleOrderedList();
```
commands.toggleStrike
- 类型：
- 功能描述：切换删除线格式
- 使用示例：
```
// 切换删除线
editor.commands.toggleStrike();
```
commands.toggleTaskList
- 类型：
- 功能描述：切换任务列表格式
- 使用示例：
```
// 切换任务列表
editor.commands.toggleTaskList();
```
commands.toggleTextAlign
- 类型：
- 功能描述：切换文本对齐方式
- 使用示例：
```
// 切换为右对齐
editor.commands.toggleTextAlign('right');
```
commands.toggleWrap
- 类型：
- 功能描述：切换节点包裹状态
- 使用示例：
```
// 切换块引用包裹
editor.commands.toggleWrap('blockquote');
```
commands.unsetAllMarks
- 类型：
- 功能描述：移除所有文本标记（加粗、斜体等）
- 使用示例：
```
// 取消选区内所有格式
editor.commands.unsetAllMarks();  
```
commands.unsetBlockquote
- 类型：
- 功能描述：移除块引用格式
- 使用示例：
```
// 取消块引用
editor.commands.unsetBlockquote();
```
commands.unsetBold
- 类型：
- 功能描述：移除加粗格式
- 使用示例：
```
// 取消加粗
editor.commands.unsetBold();
```
commands.unsetCode
- 类型：
- 功能描述：移除行内代码格式
- 使用示例：
```
// 取消行内代码
editor.commands.unsetCode();
```
commands.unsetColor
- 类型：
- 功能描述：移除文本颜色
- 使用示例：
```
// 取消文本颜色
editor.commands.unsetColor();
```
commands.unsetFontSize
- 类型：
- 功能描述：移除字体大小设置
- 使用示例：
```
// 取消自定义字体大小
editor.commands.unsetFontSize();
```
commands.unsetHighlight
- 类型：
- 功能描述：移除文本高亮
- 使用示例：
```
  // 取消高亮
  editor.commands.unsetHighlight();
```
commands.unsetItalic
- 类型：
- 功能描述：移除斜体格式
- 使用示例：
```
// 取消斜体
editor.commands.unsetItalic();
```
commands.unsetLink
- 类型：
- 功能描述：移除链接
- 使用示例：
```
// 取消链接
editor.commands.unsetLink();
```

commands.unsetMark

类型：
功能描述：移除指定标记

使用示例：

//取消自定义标记"customMark"
editor.commands.unsetMark('customMark');

commands.unsetStrike
- 类型：
- 功能描述：移除删除线格式
- 使用示例：
```
// 取消删除线
editor.commands.unsetStrike();
```
commands.unsetTextAlign
- 类型：
- 功能描述：移除文本对齐设置（恢复默认）
- 使用示例：
```
// 恢复默认对齐方式
editor.commands.unsetTextAlign();
```

13.4 四、媒体与文件命令

用于插入和管理图片、文件等媒体内容。

commands.addImage
- 类型：
- 功能描述：添加图片（简化版）
- 使用示例：
```
// 添加图片
editor.commands.addImage('https://example.com/image.jpg');
```
commands.insertDrawIo
- 类型：
- 功能描述：插入 Draw.io 图表
- 使用示例：
```
// 插入Draw.io图表
editor.commands.insertDrawIo('图表数据');
```

commands.setImage

类型：
功能描述：设置图片属性（更完整的图片插入）

使用示例：

// 插入带属性的图片
editor.commands.setImage({
  src: 'https://example.com/image.jpg',
  alt: '示例图片',
  width: '300px'
});

commands.setFile

类型：
功能描述：插入文件链接

使用示例：

// 插入文件链接
editor.commands.setFile({
  href: 'https://example.com/file.pdf',
  text: '下载PDF'
});

commands.setMedia

类型：
功能描述：插入通用媒体（视频、音频等）

使用示例：

// 插入视频
editor.commands.setMedia({
  src: 'https://example.com/video.mp4',
  type: 'video/mp4'
});

13.5 五、历史记录命令

用于撤销、重做操作。

commands.redo
- 类型：
- 功能描述：重做上一步操作
- 使用示例：
```
// 重做
editor.commands.redo();
```
commands.undo
- 类型：
- 功能描述：撤销上一步操作
- 使用示例：
```
// 撤销
editor.commands.undo();
```
commands.undoInputRule
- 类型：
- 功能描述：撤销输入规则触发的操作（如自动格式化）
- 使用示例：
```
// 撤销输入规则效果
editor.commands.undoInputRule();
```

13.6 六、工具类命令

辅助性命令，用于批量操作或快捷方式。

commands.command

类型：
功能描述：执行自定义命令函数

使用示例：

//  执行自定义命令
editor.commands.command(({ tr, dispatch }) => {
  if (dispatch) {
    tr.insertText('自定义命令插入的文本');
  }
  return true;
});

commands.first

类型：
功能描述：执行第一个可用的命令

使用示例：

// 执行第一个可用命令（如先尝试加粗，失败则执行斜体）
editor.commands.first([
  () => editor.commands.toggleBold(),
  () => editor.commands.toggleItalic()
]);

commands.forEach

类型：
功能描述：对选中的多个节点执行命令

使用示例：

// 对所有选中的段落应用居中对齐
editor.commands.forEach(node => {
  if (node.type.name === 'paragraph') {
    return editor.commands.setTextAlign('center');
  }
  return false;
});

commands.keyboardShortcut
- 类型：
- 功能描述：触发键盘快捷键对应的命令
- 使用示例：
```
// 触发Ctrl+B（加粗）快捷键
editor.commands.keyboardShortcut('Mod-b');
```
commands.setMeta
- 类型：
- 功能描述：设置事务的元数据（用于自定义逻辑）
- 使用示例：
```
// 设置事务元数据
editor.commands.setMeta('customKey', 'customValue');
```

13.7 核心特点

链式调用：大多数命令支持链式调用，例如：

// 先加粗再设置颜色
editor.commands.toggleBold().setColor('#ff0000');

条件执行：命令返回布尔值，表示执行成功与否：

// 检查命令是否执行成功
const success = editor.commands.toggleBold();
if (success) {
  console.log('加粗成功');
}

依赖扩展：命令需要对应的扩展支持（如 toggleTable 需要 Table 扩展），否则会执行失败。

通过 commands 对象，可实现几乎所有富文本编辑功能，是 Tiptap 最常用的 API 之一。

14 isDestroyed、isEditable、isEmpty

{
  isDestroyed,
  isEditable,
  isEmpty,
}

顶层状态属性：这些属性用于快速判断编辑器的整体状态，是业务逻辑中常用的判断条件。

isDestroyed

类型：boolean
功能描述：标记编辑器是否已「销毁」（资源已释放，无法再使用）

使用示例：

// 避免对已销毁的编辑器执行操作
if (!editor.isDestroyed) {
  editor.setContent('<p>安全执行操作</p>');
} else {
  console.log('编辑器已销毁，无法操作');
}
// 监听销毁事件，执行清理逻辑
editor.on('destroy', () => {
  console.log('编辑器已销毁:', editor.isDestroyed); // 输出 true
});

isEditable

类型：boolean
功能描述：标记编辑器当前是否「可编辑」（与 'options.editable' 同步，可动态修改）

使用示例：

// 根据可编辑状态控制工具栏显示
const toolbar = document.getElementById('toolbar');
toolbar.style.display = editor.isEditable ? 'flex' : 'none';
// 动态切换可编辑状态（点击按钮切换）
document.getElementById('toggle-edit').addEventListener('click', () => {
  editor.setEditable(!editor.isEditable);
  console.log('可编辑状态:',
  editor.isEditable);
});

isEmpty

类型：boolean
功能描述：标记编辑器内容是否「为空」（仅包含空节点或无内容）

使用示例：

// 提交前检查内容是否为空
document.getElementById('submit').addEventListener('click', () => {
  if (editor.isEmpty) {
    alert('内容不能为空！');
    return;
  }
  // 提交内容
  saveContent(editor.getHTML());
});
// 监听内容变化，显示提示
if (!editor.isEmpty) {
  console.log('当前有内容');
}