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 ′、′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 -
功能描述：光标位置的解析对象（选区为空时存在）
-
使用示例：
javascriptif (state.tr.curSelection.$cursor) { console.log('光标位置:', state.tr.curSelection.$cursor.pos); }
-
-
state.tr.curSelection. from′/′to
-
类型：
ResolvedPos -
功能描述：选区起始/结束位置的解析对象
-
使用示例：
javascript// 获取选区起始位置的父节点 console.log('选区起始父节点:', state.tr.curSelection.$from.parent.type.name);
-
-
state.tr.curSelection.anchor'/'head
-
类型：
number -
功能描述：选区锚点/焦点的位置索引
-
使用示例：
javascriptconsole.log('锚点位置:', state.tr.curSelection.anchor); console.log('焦点位置:', state.tr.curSelection.head);
-
-
state.tr.curSelection.empty
-
类型：
boolean -
功能描述：标记选区是否为空（仅光标）
-
使用示例：
javascriptconsole.log('事务选区是否为空:', state.tr.curSelection.empty);
-
-
state.tr.curSelection.from'/'to
-
类型：
number -
功能描述：选区的起始/结束位置索引
-
使用示例：
javascriptconsole.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 -
功能描述：事务创建的时间戳（用于排序和历史记录）
-
使用示例：
javascriptconsole.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 -
功能描述：标记事务是否修改了文档内容
-
使用示例：
javascriptif (state.tr.docChanged) { console.log('事务修改了文档内容'); } else { console.log('事务仅修改了选区或格式'); }
-
-
state.tr.isGeneric
-
类型：
boolean -
功能描述：标记事务是否为通用事务（非特定插件生成）
-
使用示例：
javascriptconsole.log('是否为通用事务:', state.tr.isGeneric);
-
-
state.tr.scrolledIntoView
-
类型：
boolean -
功能描述：标记事务是否触发了滚动到视图
-
使用示例：
javascriptconsole.log('事务是否触发滚动:', state.tr.scrolledIntoView);
-
-
state.tr.selection
-
类型：
Selection -
功能描述：事务的选区（与 'curSelection' 一致）
-
使用示例：
javascriptconsole.log('事务选区:', state.tr.selection.from, '-', state.tr.selection.to);
-
-
state.tr.selectionSet
-
类型：
boolean -
功能描述：标记事务是否修改了选区
-
使用示例：
javascriptif (state.tr.selectionSet) { console.log('事务修改了选区'); }
-
-
state.tr.storedMarksSet
-
类型：
boolean -
功能描述：标记事务是否修改了存储标记
-
使用示例：
javascriptif (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 是扩展与编辑器交互的重要桥梁，理解其属性可帮助开发者更灵活地控制和扩展编辑器功能，尤其是在自定义工具栏、状态同步等场景中非常实用。