@tiptap/vue-2 知识点笔记-05

15 state

js 复制代码

{
  state: {
    config,
    doc,
    history$,
    mention$,
    plugin$,
    plugin$494,
    scrollToSelection,
    selectingCells$,
    selection,
    storedMarks,
    tableColumnResizing$,
    plugins,
    schema,
    tr: {
      curSelection: {
        $anchor,
        $head,
        ranges,
        $cursor,
        $from,
        $to,
        anchor,
        empty,
        from,
        head,
        to,
      },
      curSelectionFor,
      doc,
      docs,
      mapping,
      meta,
      steps,
      storedMarks,
      time,
      updated,
      before,
      docChanged,
      isGeneric,
      scrolledIntoView,
      selection,
      selectionSet,
      storedMarksSet,
    },
  },
}

state 是编辑器的核心状态容器 ，包含文档内容、选区、历史记录等所有动态数据，基于 ProseMirror 的 EditorState 封装，是编辑器状态管理的核心。

15.1 `state` 顶层属性

state.config

类型：Object
功能描述：编辑器的配置信息（包含 schema、插件等初始化参数）

使用示例：

javascript 复制代码

// 获取状态配置中的 schema
console.log('当前文档结构规则:', state.config.schema);
//查看配置的插件列表
console.log('状态中的插件:', state.config.plugins.map(p => p.key));

state.doc

类型：Node'（ProseMirror）
功能描述：文档的根节点对象，包含完整的内容结构（所有节点和文本）

使用示例：

javascript 复制代码

// 获取文档内容的文本表示
console.log('文档纯文本:', state.doc.textContent);
// 获取文档的节点数量
console.log('文档节点总数:', state.doc.childCount);
// 遍历文档的顶层节点（如段落、标题）
state.doc.forEach(child => {
  console.log('顶层节点类型:', child.type.name);
});

state.history$

类型：Observable
功能描述：历史记录的响应式流（用于监听撤销/重做状态变化）

使用示例：

javascript 复制代码

// 订阅历史记录变化（RxJS语法）
state.history$.subscribe(history => {
  console.log('可撤销:', history.canUndo);
  console.log('可重做:', history.canRedo);
});

state.mention$

类型：Observable
功能描述：提及功能的响应式流（用于监听 '@用户' 等提及状态）

使用示例：

javascript 复制代码

// 订阅提及建议变化
state.mention$.subscribe(mention => {
  if (mention.active) {
    console.log('提及触发字符:', mention.trigger);
    console.log('建议列表:', mention.items);
  }
});

state.plugin <math xmlns="http://www.w3.org/1998/Math/MathML"> ′ 、 ′ s t a t e . p l u g i n '、'state.plugin </math>′、′state.plugin494
- 类型：Observable
- 功能描述：特定插件的响应式流（命名可能随插件变化，如 'plugin$494' 可能对应表格插件）
- 使用示例：
  javascript 复制代码
```
// 订阅表格插件状态（示例）
state.plugin$494.subscribe(tableState => {
  console.log('表格选中状态:', tableState.selectedCells);
});
```

state.scrollToSelection

类型：Function
功能描述：滚动到当前选区位置，确保选区可见

使用示例：

javascript 复制代码

// 执行操作后滚动到选区
editor.commands.insertContent('<p>新内容</p>');
state.scrollToSelection();
//滚动到新插入内容的位置

state.selectingCells$

类型：Observable
功能描述：表格单元格选择状态的响应式流

使用示例：

javascript 复制代码

// 订阅表格单元格选择变化
state.selectingCells$.subscribe(isSelecting => {
  console.log('是否正在选择表格单元格:', isSelecting);
});

state.selection

类型：Selection
功能描述：当前选区对象，包含光标位置或选中范围的详细信息

使用示例：

javascript 复制代码

// 获取选区的起始和结束位置
const { from, to } = state.selection;
console.log('选区范围:', from, '-', to);
// 检查选区是否为空（仅光标，无选中内容）
console.log('是否为光标:', state.selection.empty);
// 获取选区所在的节点
const selectedNode = state.selection.$anchor.parent;
console.log('选区所在节点类型:', selectedNode.type.name);

state.storedMarks
- 类型：Array<Mark>
- 功能描述：'null'
- 使用示例：
  javascript 复制代码
存储的标记（格式），用于在输入新文本时自动应用（如光标在加粗文本后，新输入内容自动加粗）
复制代码

state.tableColumnResizing$

类型：Observable
功能描述：表格列调整大小状态的响应式流

使用示例：

javascript 复制代码

// 订阅表格列调整事件
state.tableColumnResizing$.subscribe(resizing => {
  if (resizing.active) {
    console.log('正在调整列宽:',
    resizing.column);
  }
});

state.plugins

类型：Array<Plugin>
功能描述：所有激活的 ProseMirror 插件实例

使用示例：

javascript 复制代码

// 查找历史记录插件
const historyPlugin = state.plugins.find(p => p.key.includes('history'));
if (historyPlugin) {
  console.log('历史记录插件配置:', historyPlugin.spec);
}

state.schema
- 类型：Schema
- 功能描述：与编辑器 'schema' 属性一致，指向文档结构规则
- 使用示例：
  javascript 复制代码
```
//检查是否支持表格节点
console.log('是否支持表格:', !!state.schema.nodes.table);
```

15.2 `state.tr`（事务对象）

tr 是「事务」（transaction）的缩写，代表一次编辑操作的变更记录（如插入文本、修改格式），所有对文档的修改都通过事务实现。

state.tr.curSelection
- 类型：Selection
- 功能描述：事务中的当前选区（可能与 'state.selection' 不同，代表事务执行后的选区）
- 使用示例：
  javascript 复制代码
```
// 获取事务执行后的选区
const newSelection = state.tr.curSelection;
console.log('事务后的选区范围:',newSelection.from,'-',newSelection.to);
```
state.tr.curSelection.$anchor
- 类型：ResolvedPos
- 功能描述：选区锚点（起始位置）的解析对象（包含层级信息）
- 使用示例：
  javascript 复制代码
```
// 获取锚点所在的节点
const anchorNode = state.tr.curSelection.$anchor.parent;
console.log('锚点所在节点:', anchorNode.type.name);
```
state.tr.curSelection.$head
- 类型：ResolvedPos
- 功能描述：选区焦点（结束位置）的解析对象
- 使用示例：
  javascript 复制代码
```
// 获取焦点位置的深度
console.log('焦点位置深度:', state.tr.curSelection.$head.depth);
```
state.tr.curSelection.ranges
- 类型：Array<Range>
- 功能描述：选区范围数组（支持多范围选择时使用）
- 使用示例：
  javascript 复制代码
```
// 遍历所有选区范围
state.tr.curSelection.ranges.forEach(range => {
  console.log('子选区:', range.from, '-', range.to);
});
```
state.tr.curSelection.$cursor
- 类型：ResolvedPos|null
- 功能描述：光标位置的解析对象（选区为空时存在）
- 使用示例：
  javascript 复制代码
```
if (state.tr.curSelection.$cursor) {   
  console.log('光标位置:', state.tr.curSelection.$cursor.pos); 
}
```
state.tr.curSelection. <math xmlns="http://www.w3.org/1998/Math/MathML"> f r o m ′ / ′ from'/' </math>from′/′to
- 类型：ResolvedPos
- 功能描述：选区起始/结束位置的解析对象
- 使用示例：
  javascript 复制代码
```
// 获取选区起始位置的父节点
console.log('选区起始父节点:', state.tr.curSelection.$from.parent.type.name);
```
state.tr.curSelection.anchor'/'head
- 类型：number
- 功能描述：选区锚点/焦点的位置索引
- 使用示例：
  javascript 复制代码
```
console.log('锚点位置:', state.tr.curSelection.anchor);
console.log('焦点位置:', state.tr.curSelection.head);
```
state.tr.curSelection.empty
- 类型：boolean
- 功能描述：标记选区是否为空（仅光标）
- 使用示例：
  javascript 复制代码
```
console.log('事务选区是否为空:', state.tr.curSelection.empty);
```
state.tr.curSelection.from'/'to
- 类型：number
- 功能描述：选区的起始/结束位置索引
- 使用示例：
  javascript 复制代码
```
console.log('事务选区范围:', state.tr.curSelection.from, '-', state.tr.curSelection.to);
```
state.tr.curSelectionFor
- 类型：Function
- 功能描述：根据文档获取选区（内部使用，用于事务与文档的关联）
- 使用示例：
  javascript 复制代码
```
// 获取事务在指定文档上的选区
const doc = state.doc;
const selectionForDoc = state.tr.curSelectionFor(doc);
```
state.tr.doc
- 类型：Node
- 功能描述：事务执行后的文档对象
- 使用示例：
  javascript 复制代码
```
// 预览事务执行后的文档文本
console.log('事务后文档文本:', state.tr.doc.textContent);
```
state.tr.docs
- 类型：Array<Node>
- 功能描述：事务执行过程中的文档快照数组（内部用于历史记录）
- 使用示例：
  javascript 复制代码
```
// 查看事务中的文档快照数量
console.log('事务文档快照数:', state.tr.docs.length);
```
state.tr.mapping
- 类型：Mapping
- 功能描述：事务的位置映射（用于跟踪位置变化，如插入内容后其他位置的偏移）
- 使用示例：
  javascript 复制代码
```
// 计算原始位置10在事务后的新位置
const newPos = state.tr.mapping.map(10);
console.log('位置10在事务后的新位置:', newPos);
```

state.tr.meta

类型：Object
功能描述：事务的元数据（自定义信息，如操作类型、来源）

使用示例：

javascript 复制代码

// 设置事务元数据（如标记为"用户输入"）
state.tr.setMeta('action', 'user-input');
// 获取元数据
console.log('事务元数据:', state.tr.meta.action);

state.tr.steps

类型：Array<Step>
功能描述：事务包含的操作步骤（如插入、删除、格式修改）

使用示例：

javascript 复制代码

// 查看事务的操作步骤数量
console.log('事务步骤数:', state.tr.steps.length);
// 查看第一步操作类型
console.log('第一步操作:', state.tr.steps[0].constructor.name);

state.tr.storedMarks

类型：Array<Mark>|null
功能描述：事务中存储的标记（与 state.storedMarks 类似）

使用示例：

javascript 复制代码

// 检查事务是否设置了存储标记 
if (state.tr.storedMarks) {   
  console.log('事务存储的标记:', state.tr.storedMarks.map(m => m.type.name)); 
}

state.tr.time
- 类型：number
- 功能描述：事务创建的时间戳（用于排序和历史记录）
- 使用示例：
  javascript 复制代码
```
console.log('事务创建时间:', new Date(state.tr.time).toLocaleString());
```
state.tr.updated
- 类型：Set<string>
- 功能描述：事务中更新的插件键集合（标记哪些插件状态被修改）
- 使用示例：
  javascript 复制代码
```
// 查看哪些插件被事务更新
console.log('更新的插件:', Array.from(state.tr.updated));
```

state.tr.before

类型：Node
功能描述：事务执行前的文档对象

使用示例：

javascript 复制代码

// 比较事务前后的文档差异
const beforeText = state.tr.before.textContent;
const afterText = state.tr.doc.textContent;
console.log('事务前:', beforeText);
console.log('事务后:', afterText);

state.tr.docChanged

类型：boolean
功能描述：标记事务是否修改了文档内容

使用示例：

javascript 复制代码

if (state.tr.docChanged) {
  console.log('事务修改了文档内容');
} else {
  console.log('事务仅修改了选区或格式');
}

state.tr.isGeneric
- 类型：boolean
- 功能描述：标记事务是否为通用事务（非特定插件生成）
- 使用示例：
  javascript 复制代码
```
console.log('是否为通用事务:', state.tr.isGeneric);
```
state.tr.scrolledIntoView
- 类型：boolean
- 功能描述：标记事务是否触发了滚动到视图
- 使用示例：
  javascript 复制代码
```
console.log('事务是否触发滚动:', state.tr.scrolledIntoView);
```
state.tr.selection
- 类型：Selection
- 功能描述：事务的选区（与 'curSelection' 一致）
- 使用示例：
  javascript 复制代码
```
console.log('事务选区:', state.tr.selection.from, '-', state.tr.selection.to);
```
state.tr.selectionSet
- 类型：boolean
- 功能描述：标记事务是否修改了选区
- 使用示例：
  javascript 复制代码
```
if (state.tr.selectionSet) {
  console.log('事务修改了选区');
}
```
state.tr.storedMarksSet
- 类型：boolean
- 功能描述：标记事务是否修改了存储标记
- 使用示例：
  javascript 复制代码
```
if (state.tr.storedMarksSet) {
  console.log('事务修改了存储标记');
}
```

15.3 核心说明

状态的不可变性 ：state 是不可变对象，每次编辑操作（如输入文本、修改格式）都会生成新的 state，原状态保持不变，这是 ProseMirror 数据模型的核心特性。
事务的作用 ：所有修改都通过 tr（事务）实现，事务记录了完整的变更步骤，便于撤销/重做和历史记录管理。实际开发中，通常通过 editor.commands 间接创建事务，而非直接操作 tr。
响应式流 ：带有 $ 后缀的属性（如 history$、mention$）是 RxJS 可观察对象，用于监听状态变化，适合在 Vue 组件中通过 subscribe 实时响应数据变更。

例如，在监听文档内容变化时，可通过对比 state.doc 实现：

javascript 复制代码

// 记录上一次文档内容
let lastDocText = '';

// 监听事务事件，检测内容变化
editor.on('transaction', ({ state }) => {
  const currentDocText = state.doc.textContent;
  if (currentDocText !== lastDocText) {
    console.log('文档内容已变化');
    lastDocText = currentDocText;
    // 执行自动保存
    autoSave(currentDocText);
  }
});

理解 state 和 tr 有助于深入掌握 Tiptap 的状态管理机制，特别是在开发复杂交互或自定义扩展时，能更精准地控制和响应编辑器状态变化。

16 storage

js 复制代码

{
  storage: {
    CustomSpan,
    ResizableImage,
    blockquote,
    bold,
    bulletList,
    clipboardTextSerializer,
    code,
    codeBlock,
    color,
    commands,
    customMark,
    disabledBlock,
    doc,
    drawIoExtension,
    drop,
    dropCursor,
    editable,
    focusEvents,
    fontSize,
    gapCursor,
    globalDragHandle,
    hardBreak,
    heading,
    highlight,
    history,
    horizontalRule,
    indent,
    italic,
    keymap,
    link,
    listItem,
    mention,
    orderedList,
    paragraph,
    paste,
    placeholder,
    starterKit,
    strike,
    tabindex,
    table,
    tableCell,
    tableHeader,
    tableMenu,
    tableRow,
    taskItem,
    taskList,
    text,
    textAlign,
    textStyle,
    typography,
    uploadFile,
    uploadFileBtn,
    uploadImage,
  },
}

在 @tiptap/vue-2 中，storage 是用于存储扩展（Extensions）相关状态和配置的容器，每个属性对应一个已加载扩展的内部存储数据（如配置、状态、缓存等）。这些存储数据由扩展自身管理，用于支持其功能逻辑（如格式状态、历史记录、插件配置等）。

以下是 storage 中各属性的详细解释及使用示例：

storage.CustomSpan

类型：Object
功能描述：自定义 span 扩展的存储数据（如自定义样式、属性配置）

使用示例：

javascript 复制代码

// 获取自定义 span 扩展的配置
const customSpanConfig = editor.storage.CustomSpan.config;
console.log('自定义Span默认样式:', customSpanConfig.defaultStyle);

storage.ResizableImage

类型：Object
功能描述：可缩放图片扩展的存储数据（如尺寸限制、缩放状态）

使用示例：

javascript 复制代码

// 获取图片最大宽度限制
const maxWidth = editor.storage.ResizableImage.maxWidth;
console.log('图片最大宽度:', maxWidth);
// 重置图片缩放状态
editor.storage.ResizableImage.resetSizes();

storage.blockquote
- 类型：Object
- 功能描述：块引用（blockquote）扩展的存储数据（如样式配置、状态）
- 使用示例：
  javascript 复制代码
```
// 检查块引用扩展是否启用
const isBlockquoteEnabled = !!editor.storage.blockquote;
console.log('块引用扩展是否启用:', isBlockquoteEnabled);
```

storage.bold

类型：Object
功能描述：加粗（bold）扩展的存储数据（如快捷键配置、样式）

使用示例：

javascript 复制代码

// 获取加粗扩展的快捷键
const boldKeymap = editor.storage.bold.keymap;
console.log('加粗快捷键:', boldKeymap);
// 检查当前选区是否应用了加粗
const isBoldActive = editor.storage.bold.isActive(editor.state);
console.log('当前是否加粗:', isBoldActive);

storage.bulletList
- 类型：Object
- 功能描述：无序列表（bulletList）扩展的存储数据（如列表样式、层级配置）
- 使用示例：
  javascript 复制代码
```
// 获取无序列表的默认样式
const bulletStyle = editor.storage.bulletList.defaultStyle;
console.log('无序列表样式:', bulletStyle);
```

storage.clipboardTextSerializer

类型：Object
功能描述：剪贴板文本序列化扩展的存储数据（如文本转换规则）

使用示例：

javascript 复制代码

// 自定义文本序列化规则
editor.storage.clipboardTextSerializer.addRule(node => {
  if (node.type.name === 'heading') {
    return `# ${node.textContent}\n`;
  }
});

storage.code

类型：Object
功能描述：行内代码（code）扩展的存储数据（如样式、快捷键）

使用示例：

javascript 复制代码

// 检查行内代码是否在当前选区激活
const isCodeActive = editor.storage.code.isActive(editor.state);
console.log('行内代码是否激活:', isCodeActive);

storage.codeBlock

类型：Object
功能描述：代码块（codeBlock）扩展的存储数据（如支持的语言、高亮配置）

使用示例：

javascript 复制代码

// 获取支持的代码语言列表
const supportedLanguages = editor.storage.codeBlock.languages;
console.log('支持的代码语言:', supportedLanguages.map(l => l.name));
// 获取当前代码块的语言
const currentLang = editor.storage.codeBlock.getCurrentLanguage(editor.state);
console.log('当前代码语言:', currentLang);

storage.color

类型：Object
功能描述：文本颜色（color）扩展的存储数据（如默认颜色、允许的颜色列表）

使用示例：

javascript 复制代码

// 获取默认文本颜色
const defaultColor = editor.storage.color.defaultColor;
console.log('默认文本颜色:', defaultColor);
// 检查当前文本颜色
const currentColor = editor.storage.color.getColor(editor.state);
console.log('当前文本颜色:', currentColor);

storage.commands

类型：Object
功能描述：命令扩展的存储数据（如自定义命令的注册信息）

使用示例：

javascript 复制代码

// 获取所有注册的自定义命令
const customCommands = editor.storage.commands.list;
console.log('自定义命令:', customCommands.map(cmd => cmd.name));

storage.customMark

类型：Object
功能描述：自定义标记（customMark）扩展的存储数据（如标记配置、状态）

使用示例：

javascript 复制代码

// 检查自定义标记是否激活
const isCustomMarkActive = editor.storage.customMark.isActive(editor.state);
console.log('自定义标记是否激活:', isCustomMarkActive);

storage.disabledBlock
- 类型：Object
- 功能描述：禁用块（disabledBlock）扩展的存储数据（如禁用的块类型、状态）
- 使用示例：
  javascript 复制代码
```
// 获取所有禁用的块类型
const disabledBlocks = editor.storage.disabledBlock.types;
console.log('禁用的块类型:', disabledBlocks);
```
storage.doc
- 类型：Object
- 功能描述：文档（doc）核心扩展的存储数据（如根节点配置）
- 使用示例：
  javascript 复制代码
```
// 获取文档根节点的默认配置
const docConfig = editor.storage.doc.config;
console.log('文档根节点配置:', docConfig);
```

storage.drawIoExtension

类型：Object
功能描述：Draw.io 图表扩展的存储数据（如图表配置、渲染状态）

使用示例：

javascript 复制代码

// 检查是否有未保存的图表更改
const hasUnsavedChanges = editor.storage.drawIoExtension.hasUnsavedChanges;
console.log('Draw.io图表是否有未保存更改:', hasUnsavedChanges);

storage.drop

类型：Object
功能描述：拖放（drop）扩展的存储数据（如拖放配置、允许的类型）

使用示例：

javascript 复制代码

// 获取允许拖放的节点类型
const allowedDropTypes = editor.storage.drop.allowedTypes;
console.log('允许拖放的节点类型:', allowedDropTypes);

storage.dropCursor
- 类型：Object
- 功能描述：拖放光标（dropCursor）扩展的存储数据（如光标样式、位置）
- 使用示例：
  javascript 复制代码
```
// 修改拖放光标的颜色
editor.storage.dropCursor.setStyle('color', '#2196f3');
```
storage.editable
- 类型：Object
- 功能描述：可编辑（editable）扩展的存储数据（如当前可编辑状态）
- 使用示例：
  javascript 复制代码
```
// 获取可编辑状态配置
const editableConfig = editor.storage.editable.config;
console.log('默认可编辑状态:', editableConfig.initialValue);
```
storage.focusEvents
- 类型：Object
- 功能描述：焦点事件（focusEvents）扩展的存储数据（如事件回调、状态）
- 使用示例：
  javascript 复制代码
```
// 手动触发焦点事件回调
editor.storage.focusEvents.handleFocus(editor);
```

storage.fontSize

类型：Object
功能描述：字体大小（fontSize）扩展的存储数据（如默认大小、允许的尺寸）

使用示例：

javascript 复制代码

// 获取当前文本的字体大小
const currentSize = editor.storage.fontSize.getFontSize(editor.state);
console.log('当前字体大小:', currentSize);
// 获取允许的字体大小列表
const allowedSizes = editor.storage.fontSize.allowedSizes;
console.log('允许的字体大小:', allowedSizes);

storage.gapCursor

类型：Object
功能描述：间隙光标（gapCursor）扩展的存储数据（如光标位置、配置）

使用示例：

javascript 复制代码

// 检查间隙光标是否激活
const isGapCursorActive = editor.storage.gapCursor.isActive(editor.state);
console.log('间隙光标是否激活:', isGapCursorActive);

storage.globalDragHandle
- 类型：Object
- 功能描述：全局拖动手柄（globalDragHandle）扩展的存储数据（如拖放状态）
- 使用示例：
  javascript 复制代码
```
// 检查是否正在拖拽
const isDragging = editor.storage.globalDragHandle.isDragging;
console.log('是否正在拖拽:', isDragging);
```
storage.hardBreak
- 类型：Object
- 功能描述：硬换行（hardBreak）扩展的存储数据（如快捷键、样式）
- 使用示例：
  javascript 复制代码
```
// 获取硬换行的快捷键
const hardBreakKey = editor.storage.hardBreak.keymap;
console.log('硬换行快捷键:', hardBreakKey);
```

storage.heading

类型：Object
功能描述：标题（heading）扩展的存储数据（如支持的级别、样式）

使用示例：

javascript 复制代码

// 获取支持的标题级别
const supportedLevels = editor.storage.heading.levels;
console.log('支持的标题级别:', supportedLevels);
// 获取当前标题级别
const currentLevel = editor.storage.heading.getCurrentLevel(editor.state);
console.log('当前标题级别:', currentLevel);

storage.highlight
- 类型：Object
- 功能描述：文本高亮（highlight）扩展的存储数据（如默认颜色、状态）
- 使用示例：
  javascript 复制代码
```
// 获取当前高亮颜色
const currentHighlight = editor.storage.highlight.getHighlight(editor.state);
console.log('当前高亮颜色:', currentHighlight);
```

storage.history

类型：Object
功能描述：历史记录（history）扩展的存储数据（如撤销/重做栈、状态）

使用示例：

javascript 复制代码

// 检查是否可以撤销
const canUndo = editor.storage.history.canUndo(editor.state);
console.log('是否可撤销:', canUndo);
// 检查是否可以重做
const canRedo = editor.storage.history.canRedo(editor.state);
console.log('是否可重做:', canRedo);

storage.horizontalRule
- 类型：Object
- 功能描述：水平线（horizontalRule）扩展的存储数据（如样式、配置）
- 使用示例：
  javascript 复制代码
```
// 获取水平线的默认样式
const hrStyle = editor.storage.horizontalRule.style;
console.log('水平线样式:', hrStyle);
```

storage.indent

类型：Object
功能描述：缩进（indent）扩展的存储数据（如缩进量、最大缩进）

使用示例：

javascript 复制代码

// 获取当前缩进量
const currentIndent = editor.storage.indent.getIndent(editor.state);
console.log('当前缩进量:', currentIndent);
// 获取最大缩进限制
const maxIndent = editor.storage.indent.maxIndent;
console.log('最大缩进:', maxIndent);

storage.italic

类型：Object
功能描述：斜体（italic）扩展的存储数据（如快捷键、状态）

使用示例：

javascript 复制代码

// 检查斜体是否激活
const isItalicActive = editor.storage.italic.isActive(editor.state);
console.log('斜体是否激活:', isItalicActive);

storage.keymap
- 类型：Object
- 功能描述：快捷键（keymap）扩展的存储数据（如注册的快捷键映射）
- 使用示例：
  javascript 复制代码
```
// 获取所有注册的快捷键
const allKeymaps = editor.storage.keymap.maps;
console.log('所有快捷键:', allKeymaps);
```

storage.link

类型：Object
功能描述：链接（link）扩展的存储数据（如当前链接属性、配置）

使用示例：

javascript 复制代码

// 获取当前链接的URL
const currentLink = editor.storage.link.getCurrentLink(editor.state);
console.log('当前链接URL:', currentLink?.href);
// 获取链接默认目标（如_blank）
const defaultTarget = editor.storage.link.defaultTarget;
console.log('链接默认目标:', defaultTarget);

storage.listItem
- 类型：Object
- 功能描述：列表项（listItem）扩展的存储数据（如样式、层级）
- 使用示例：
  javascript 复制代码
```
// 获取列表项的默认样式
const itemStyle = editor.storage.listItem.style;
console.log('列表项样式:', itemStyle);
```

storage.mention

类型：Object
功能描述：提及（mention）扩展的存储数据（如建议列表、触发字符）

使用示例：

javascript 复制代码

// 获取提及触发字符（如@）
const trigger = editor.storage.mention.trigger;
console.log('提及触发字符:', trigger);
// 获取当前建议列表
const suggestions = editor.storage.mention.items;
console.log('提及建议:', suggestions);

storage.orderedList
- 类型：Object
- 功能描述：有序列表（orderedList）扩展的存储数据（如编号样式、起始编号）
- 使用示例：
  javascript 复制代码
```
// 获取有序列表的起始编号
const startNumber = editor.storage.orderedList.start;
console.log('有序列表起始编号:', startNumber);
```
storage.paragraph
- 类型：Object
- 功能描述：段落（paragraph）扩展的存储数据（如默认样式、配置）
- 使用示例：
  javascript 复制代码
```
// 获取段落的默认样式
const paraStyle = editor.storage.paragraph.style;
console.log('段落默认样式:', paraStyle);
```

storage.paste

类型：Object
功能描述：粘贴（paste）扩展的存储数据（如粘贴规则、过滤配置）

使用示例：

javascript 复制代码

// 添加自定义粘贴处理规则
editor.storage.paste.addRule(html => {
  // 移除粘贴内容中的script标签
  return html.replace(/<script.*?</script>/gi, '');
});

storage.placeholder

类型：Object
功能描述：占位符（placeholder）扩展的存储数据（如占位文本、样式）

使用示例：

javascript 复制代码

// 修改占位符文本
editor.storage.placeholder.setText('请输入内容...');
// 获取当前占位符样式
const placeholderStyle = editor.storage.placeholder.style;
console.log('占位符样式:', placeholderStyle);

storage.starterKit

类型：Object
功能描述：基础套件（starterKit）扩展的存储数据（如包含的扩展列表）

使用示例：

javascript 复制代码

// 获取基础套件包含的所有扩展
const includedExtensions = editor.storage.starterKit.extensions;
console.log('基础套件包含的扩展:', includedExtensions);

storage.strike

类型：Object
功能描述：删除线（strike）扩展的存储数据（如状态、快捷键）

使用示例：

javascript 复制代码

// 检查删除线是否激活
const isStrikeActive = editor.storage.strike.isActive(editor.state);
console.log('删除线是否激活:',isStrikeActive);

storage.tabindex
- 类型：Object
- 功能描述：tabindex 扩展的存储数据（如焦点顺序配置）
- 使用示例：
  javascript 复制代码
```
// 获取当前tabindex值
const currentTabindex = editor.storage.tabindex.value;
console.log('当前tabindex:', currentTabindex);
```

storage.table

类型：Object
功能描述：表格（table）扩展的存储数据（如表格状态、选中单元格）

使用示例：

javascript 复制代码

// 获取当前选中的表格单元格
const selectedCells = editor.storage.table.selectedCells;
console.log('选中的表格单元格:', selectedCells);
// 检查表格是否可编辑
const isTableEditable = editor.storage.table.isEditable;
console.log('表格是否可编辑:', isTableEditable);

storage.tableCell
- 类型：Object
- 功能描述：表格单元格（tableCell）扩展的存储数据（如单元格属性、样式）
- 使用示例：
  javascript 复制代码
```
// 获取当前单元格的背景色
const cellBgColor = editor.storage.tableCell.getBackgroundColor(editor.state);
console.log('单元格背景色:', cellBgColor);
```
storage.tableHeader
- 类型：Object
- 功能描述：表格表头（tableHeader）扩展的存储数据（如表头样式、配置）
- 使用示例：
  javascript 复制代码
```
// 获取表头的默认样式
const headerStyle = editor.storage.tableHeader.style;
console.log('表头样式:', headerStyle);
```
storage.tableMenu
- 类型：Object
- 功能描述：表格菜单（tableMenu）扩展的存储数据（如菜单状态、位置）
- 使用示例：
  javascript 复制代码
```
// 检查表格菜单是否可见
const isMenuVisible = editor.storage.tableMenu.isVisible;
console.log('表格菜单是否可见:', isMenuVisible);
```
storage.tableRow
- 类型：Object
- 功能描述：表格行（tableRow）扩展的存储数据（如行样式、高度）
- 使用示例：
  javascript 复制代码
```
// 获取当前行的高度
const rowHeight = editor.storage.tableRow.getHeight(editor.state);
console.log('当前行高度:', rowHeight);
```

storage.taskItem

类型：Object
功能描述：任务项（taskItem）扩展的存储数据（如完成状态、样式）

使用示例：

javascript 复制代码

// 检查当前任务项是否完成
const isCompleted = editor.storage.taskItem.isCompleted(editor.state);
console.log('任务项是否完成:', isCompleted);
// 切换任务项完成状态
editor.storage.taskItem.toggle(editor);

storage.taskList
- 类型：Object
- 功能描述：任务列表（taskList）扩展的存储数据（如列表样式、配置）
- 使用示例：
  javascript 复制代码
```
// 获取任务列表的默认样式
const taskListStyle = editor.storage.taskList.style;
console.log('任务列表样式:', taskListStyle);
```
storage.text
- 类型：Object
- 功能描述：文本（text）核心扩展的存储数据（如文本节点配置）
- 使用示例：
  javascript 复制代码
```
// 获取文本节点的默认配置
const textConfig = editor.storage.text.config;
console.log('文本节点配置:', textConfig);
```

storage.textAlign

类型：Object
功能描述：文本对齐（textAlign）扩展的存储数据（如当前对齐方式、允许的方式）

使用示例：

javascript 复制代码

// 获取当前文本对齐方式
const currentAlign = editor.storage.textAlign.getAlign(editor.state);
console.log('当前文本对齐:', currentAlign);
// 获取允许的对齐方式
const allowedAligns = editor.storage.textAlign.alignments;
console.log('允许的对齐方式:', allowedAligns);

storage.textStyle
- 类型：Object
- 功能描述：文本样式（textStyle）扩展的存储数据（如综合样式配置）
- 使用示例：
  javascript 复制代码
```
// 获取当前文本的综合样式
const currentStyle = editor.storage.textStyle.getStyle(editor.state);
console.log('当前文本样式:', currentStyle);
```
storage.typography
- 类型：Object
- 功能描述：排版（typography）扩展的存储数据（如自动格式化规则）
- 使用示例：
  javascript 复制代码
```
// 检查是否启用了智能引号替换
const smartQuotes = editor.storage.typography.smartQuotes;
console.log('是否启用智能引号:', smartQuotes);
```
storage.uploadFile
- 类型：Object
- 功能描述：文件上传（uploadFile）扩展的存储数据（如上传状态、配置）
- 使用示例：
  javascript 复制代码
```
// 获取当前上传中的文件
const uploadingFiles = editor.storage.uploadFile.uploading;
console.log('上传中的文件:', uploadingFiles);
```
storage.uploadFileBtn
- 类型：Object
- 功能描述：文件上传按钮（uploadFileBtn）扩展的存储数据（如按钮配置、状态）
- 使用示例：
  javascript 复制代码
```
// 显示文件上传按钮
editor.storage.uploadFileBtn.show();
```

storage.uploadImage

类型：Object
功能描述：图片上传（uploadImage）扩展的存储数据（如上传配置、进度）

使用示例：

javascript 复制代码

// 获取图片上传的最大尺寸限制
const maxSize = editor.storage.uploadImage.maxFileSize;
console.log('图片最大尺寸:', maxSize);
// 获取当前上传进度
const progress = editor.storage.uploadImage.progress;
console.log('图片上传进度:', progress);

16.1 核心特点与使用场景

扩展状态管理 ：storage 中的数据由对应扩展维护，用于存储扩展的配置、运行时状态（如是否激活、当前值）等，是扩展功能的「状态仓库」。
功能查询 ：通过 storage 可查询扩展的当前状态（如 storage.bold.isActive() 检查是否加粗），常用于工具栏按钮状态同步。
配置访问 ：可获取扩展的配置信息（如 storage.heading.levels 获取支持的标题级别），用于动态适配扩展功能。

例如，在实现动态工具栏时，可通过 storage 检查各格式的激活状态：

javascript 复制代码

// 同步工具栏按钮状态
function syncToolbar() {
  // 加粗按钮状态
  document.getElementById('bold-btn').classList.toggle(
    'active', 
    editor.storage.bold.isActive(editor.state)
  );
  
  // 标题按钮状态
  const headingLevel = editor.storage.heading.getCurrentLevel(editor.state);
  document.getElementById('heading-btn').classList.toggle(
    'active', 
    !!headingLevel
  );
  
  // 链接按钮状态
  const hasLink = !!editor.storage.link.getCurrentLink(editor.state);
  document.getElementById('link-btn').classList.toggle('active', hasLink);
}

// 选区变化时同步工具栏
editor.on('selectionUpdate', syncToolbar);

storage 是扩展与编辑器交互的重要桥梁，理解其属性可帮助开发者更灵活地控制和扩展编辑器功能，尤其是在自定义工具栏、状态同步等场景中非常实用。

@tiptap/vue-2 知识点笔记-05

15 state

15.1 state 顶层属性

15.2 state.tr（事务对象）

15.3 核心说明

16 storage

16.1 核心特点与使用场景

15.1 `state` 顶层属性

15.2 `state.tr`（事务对象）