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

5 css

js 复制代码

{
  css,
}

css 用于动态控制编辑器样式，适合个性化主题定制。

css

类型：Object
功能描述：存储编辑器的 CSS 样式配置，用于动态控制编辑器的视觉样式（如内容区域、光标、占位符等）。通常包含编辑器核心样式的类名或内联样式定义。

使用示例：

javascript 复制代码

// 获取编辑器默认CSS配置 
console.log('默认CSS配置:', editor.css); 
// 动态修改内容区域样式 
editor.css.content = {   
  minHeight: '300px',   
  padding: '16px',   
  backgroundColor: '#f9f9f9' 
}; 
// 修改光标样式（部分主题扩展支持） 
if (editor.css.cursor) {   
  editor.css.cursor = {     
    color: '#ff0000',     
    width: '2px'   
  }; 
}

6 extensionManager

js 复制代码

{
  extensionManager: {
    editor,
    extensions,
    schema,
    splittableMarks,
    attributes,
    commands,
    nodeViews,
    plugins,
  },
}

extensionManager 是 Tiptap 管理所有扩展的核心对象，负责扩展的加载、初始化及功能整合。

extensionManager.editor

类型：Editor
功能描述：指向当前关联的编辑器实例，用于扩展内部访问编辑器核心功能。

使用示例：

javascript 复制代码

// 通过扩展管理器获取编辑器实例 
const currentEditor = extensionManager.editor; 
// 调用编辑器方法 
currentEditor.setContent('<p>通过extensionManager访问编辑器</p>'); 
// 检查编辑器状态 
console.log('编辑器是否聚焦:', currentEditor.isFocused);

extensionManager.extensions

类型：Array<Extension>
功能描述：存储所有已加载的扩展实例（如 Bold、Table 等），包含扩展的配置、命令和状态。

使用示例：

javascript 复制代码

// 遍历所有加载的扩展 
extensionManager.extensions.forEach(ext => {   
  console.log('加载的扩展:', ext.name); 
  // 输出扩展名称如"bold"、"table" 
}); 
// 查找特定扩展（如表格扩展） 
const tableExtension = extensionManager.extensions.find(ext => ext.name === 'table'); 
if (tableExtension) {   
  console.log('表格扩展配置:', tableExtension.options); 
}

extensionManager.schema

类型：Schema（ProseMirror）
功能描述：基于已加载的扩展生成的文档结构规则，定义了允许的节点（如段落、标题）、标记（如加粗、斜体）及其嵌套关系。

使用示例：

javascript 复制代码

// 查看支持的节点类型（如paragraph、heading、table） 
const supportedNodes = Object.keys(extensionManager.schema.nodes); 
console.log('支持的节点类型:', supportedNodes); 
// 查看支持的标记类型（如bold、italic、link） 
const supportedMarks = Object.keys(extensionManager.schema.marks); 
console.log('支持的标记类型:', supportedMarks); 
// 检查是否支持特定节点 
if (extensionManager.schema.nodes.heading) {   
  console.log('支持标题节点'); 
}

extensionManager.splittableMarks

类型：Array<MarkType>
功能描述：存储可拆分的标记类型（如加粗、斜体等）。当光标穿过标记范围时，这些标记可以被自动拆分以保持格式一致性。

使用示例：

javascript 复制代码

// 查看可拆分的标记 
console.log('可拆分的标记:', extensionManager.splittableMarks.map(mark => mark.name)); 
// 示例：判断"bold"是否为可拆分标记 
const isBoldSplittable = extensionManager.splittableMarks.some(mark => mark.name === 'bold'); 
console.log('加粗标记是否可拆分:', isBoldSplittable);

extensionManager.attributes

类型：Object
功能描述：存储所有扩展定义的全局属性（如 class、data-* 等），这些属性可应用于编辑器的节点或标记。

使用示例：

javascript 复制代码

// 查看所有扩展定义的全局属性 
console.log('扩展全局属性:', extensionManager.attributes); 
// 示例：获取"link"扩展的属性定义 
const linkAttrs = extensionManager.attributes.link; 
if (linkAttrs) {   
  console.log('链接扩展支持的属性:', Object.keys(linkAttrs)); 
  // 如"href"、"target" 
}

extensionManager.commands

类型：Object
功能描述：聚合所有扩展提供的命令（如 bold、insertTable 等），可直接调用执行编辑操作。

使用示例：

javascript 复制代码

// 执行加粗命令 
extensionManager.commands.bold(); 
// 插入表格（3行2列） 
extensionManager.commands.insertTable({ rows: 3, cols: 2 }); 
// 切换斜体 
extensionManager.commands.toggleItalic(); 
// 检查命令是否存在 
if (extensionManager.commands.setHeading) {   
  extensionManager.commands.setHeading({ level: 1 }); // 设置一级标题 
}

extensionManager.nodeViews

类型：Object
功能描述：存储自定义节点视图的映射关系，用于将特定节点（如图片、代码块）渲染为自定义 Vue 组件。

使用示例：

javascript 复制代码

// 查看所有自定义节点视图 
console.log('自定义节点视图:', Object.keys(extensionManager.nodeViews)); 
// 示例：获取代码块节点的自定义视图 
const codeBlockView = extensionManager.nodeViews.codeBlock; 
if (codeBlockView) {   
  console.log('代码块自定义视图组件:', codeBlockView.component); 
}

extensionManager.plugins

类型：Array<Plugin>（ProseMirror）
功能描述：存储所有扩展注册的 ProseMirror 插件，用于扩展编辑器的底层功能（如历史记录、拖放、输入规则等）。

使用示例：

javascript 复制代码

// 遍历所有插件 
extensionManager.plugins.forEach(plugin => {   
  console.log('ProseMirror插件:', plugin.key); 
  // 输出插件唯一标识 
}); 
// 查找历史记录插件（用于撤销/重做） 
const historyPlugin = extensionManager.plugins.find(plugin => plugin.key.includes('history')); 
if (historyPlugin) {   
  console.log('已加载历史记录插件'); 
}

extensionManager 是扩展生态的核心，通过它可以访问所有扩展的功能、配置和底层插件，是实现复杂富文本功能（如自定义格式、表格操作）的关键入口。

实际开发中，常用 extensionManager.extensions 检查已加载的扩展，通过 extensionManager.commands 调用扩展提供的命令，结合 schema 验证内容结构合法性。

7 extensionStorage

js 复制代码

{
extensionStorage: {
    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,
  },
}

extensionStorage 是 @tiptap/vue-2 中存储所有扩展状态和配置的核心对象，每个属性对应一个已加载扩展的存储实例，包含该扩展的配置、状态和自定义方法。以下是各属性的详细解释及使用示例：

extensionStorage.CustomSpan

类型：Object
功能描述：自定义 span 扩展的存储，用于管理自定义文本片段的状态（如自定义样式、属性）

使用示例：

javascript 复制代码

// 获取自定义span的配置 
const customSpanConfig = editor.extensionStorage.CustomSpan.config; 
// 修改自定义span的默认样式 
editor.extensionStorage.CustomSpan.updateDefaultStyle({   
  color: '#ff0000',   
  fontSize: '16px' 
}); 
// 检查是否有活跃的自定义span 
const hasActiveCustomSpan = editor.extensionStorage.CustomSpan.isActive;

extensionStorage.ResizableImage

类型：Object
功能描述：可缩放图片扩展的存储，管理图片缩放状态、尺寸配置等

使用示例：

javascript 复制代码

// 获取当前选中图片的尺寸 
const imageSize = editor.extensionStorage.ResizableImage.getCurrentSize(); 
// 设置图片默认缩放比例 
editor.extensionStorage.ResizableImage.setDefaultScale(1.2); 
// 重置图片尺寸 
editor.extensionStorage.ResizableImage.resetSize();

extensionStorage.blockquote

类型：Object
功能描述：块引用扩展的存储，管理块引用的样式配置和状态

使用示例：

javascript 复制代码

// 获取块引用的默认样式 
const blockquoteStyle = editor.extensionStorage.blockquote.style; 
// 修改块引用的边框颜色 
editor.extensionStorage.blockquote.updateStyle({   
  borderLeftColor: '#4a90e2' 
}); 
// 检查当前是否在块引用中 
const inBlockquote = editor.extensionStorage.blockquote.isActive();

extensionStorage.bold

类型：Object
功能描述：加粗扩展的存储，管理加粗样式和激活状态

使用示例：

javascript 复制代码

// 检查当前选区是否为加粗状态 
const isBoldActive = editor.extensionStorage.bold.isActive; 
// 获取加粗的CSS类名 
const boldClass = editor.extensionStorage.bold.class; 
// 修改加粗的样式（如使用自定义类） 
editor.extensionStorage.bold.setClass('custom-bold');

extensionStorage.bulletList

类型：Object
功能描述：无序列表扩展的存储，管理列表样式、缩进等配置

使用示例：

javascript 复制代码

// 获取无序列表的默认标记（如•、-） 
const bulletMarker = editor.extensionStorage.bulletList.marker; 
// 设置无序列表缩进量 
editor.extensionStorage.bulletList.setIndent(20); 
// 检查当前是否在无序列表中 
const inBulletList = editor.extensionStorage.bulletList.isActive();

extensionStorage.clipboardTextSerializer

类型：Object
功能描述：剪贴板文本序列化扩展的存储，管理文本复制/粘贴时的格式化规则

使用示例：

javascript 复制代码

// 获取自定义序列化规则 
const serializeRules = editor.extensionStorage.clipboardTextSerializer.rules; 
// 添加新的文本序列化规则（如处理链接） 
editor.extensionStorage.clipboardTextSerializer.addRule({   
  nodeType: 'link',   
  serialize: (node) => `[${node.text}](${node.attrs.href})` 
});

extensionStorage.code

类型：Object
功能描述：行内代码扩展的存储，管理行内代码的样式和状态

使用示例：

javascript 复制代码

// 检查当前选区是否为行内代码 
const isCodeActive = editor.extensionStorage.code.isActive; 
// 修改行内代码的背景色 
editor.extensionStorage.code.updateStyle({   
  backgroundColor: '#f0f0f0' 
});

extensionStorage.codeBlock

类型：Object
功能描述：代码块扩展的存储，管理代码块的语言、高亮样式等

使用示例：

javascript 复制代码

// 获取当前代码块的语言 
const currentLang = editor.extensionStorage.codeBlock.language; 
// 设置代码块默认语言为JavaScript 
editor.extensionStorage.codeBlock.setDefaultLanguage('javascript'); 
// 切换代码块高亮主题 
editor.extensionStorage.codeBlock.setTheme('dark');

extensionStorage.color

类型：Object
功能描述：文本颜色扩展的存储，管理文本颜色配置和当前颜色

使用示例：

javascript 复制代码

// 获取当前文本颜色 
const currentColor = editor.extensionStorage.color.currentColor; 
// 设置默认文本颜色 
editor.extensionStorage.color.setDefault('#333333'); 
// 清除当前文本颜色 
editor.extensionStorage.color.clear();

extensionStorage.commands

类型：Object
功能描述：命令扩展的存储，聚合自定义命令的状态和执行方法

使用示例：

javascript 复制代码

// 检查自定义命令是否可执行 
const canExecute = editor.extensionStorage.commands.can('customCommand'); 
// 执行自定义命令 
editor.extensionStorage.commands.execute('customCommand', { param: 'value' });

extensionStorage.customMark

类型：Object
功能描述：自定义标记扩展的存储，管理自定义文本标记（如高亮、下划线）

使用示例：

javascript 复制代码

// 激活自定义标记 
editor.extensionStorage.customMark.activate({ style: 'underline' }); 
// 检查自定义标记是否活跃 
const isCustomMarkActive = editor.extensionStorage.customMark.isActive; 
// 移除自定义标记 
editor.extensionStorage.customMark.deactivate();

extensionStorage.disabledBlock

类型：Object
功能描述：禁用块扩展的存储，管理被禁用的块类型和状态

使用示例：

javascript 复制代码

// 获取所有被禁用的块类型 
const disabledBlocks = editor.extensionStorage.disabledBlock.list; 
// 禁用"heading"块 
editor.extensionStorage.disabledBlock.disable('heading'); 
// 启用"paragraph"块 
editor.extensionStorage.disabledBlock.enable('paragraph');

extensionStorage.doc

类型：Object
功能描述：文档根节点扩展的存储，管理文档整体配置（如默认节点类型）

使用示例：

javascript 复制代码

// 获取文档默认节点类型 
const defaultNode = editor.extensionStorage.doc.defaultNode; 
// 设置文档最大长度限制 
editor.extensionStorage.doc.setMaxLength(10000);

extensionStorage.drawIoExtension

类型：Object
功能描述：Draw.io 图表扩展的存储，管理图表配置、加载状态等

使用示例：

javascript 复制代码

// 检查Draw.io图表是否加载完成 
const isLoaded = editor.extensionStorage.drawIoExtension.isLoaded; 
// 设置图表默认尺寸 
editor.extensionStorage.drawIoExtension.setDefaultSize({ width: 600, height: 400 }); 
// 插入新图表 
editor.extensionStorage.drawIoExtension.insertChart('chart-data');

extensionStorage.drop

类型：Object
功能描述：拖放扩展的存储，管理拖放配置和事件处理规则

使用示例：

javascript 复制代码

// 启用文件拖放 
editor.extensionStorage.drop.enableFileDrop(); 
// 禁用文本拖放 
editor.extensionStorage.drop.disableTextDrop(); 
// 添加拖放过滤器（仅允许图片文件） 
editor.extensionStorage.drop.addFilter(file => file.type.startsWith('image/'));

extensionStorage.dropCursor

类型：Object
功能描述：拖放光标扩展的存储，管理拖放时的光标样式和行为

使用示例：

javascript 复制代码

// 修改拖放光标的颜色 
editor.extensionStorage.dropCursor.setColor('#2196f3'); 
// 设置拖放光标的宽度 
editor.extensionStorage.dropCursor.setWidth(2);

extensionStorage.editable

类型：Object
功能描述：可编辑状态扩展的存储，管理编辑器的可编辑性配置

使用示例：

javascript 复制代码

// 检查当前是否可编辑 
const isEditable = editor.extensionStorage.editable.state; 
// 禁用编辑 
editor.extensionStorage.editable.disable(); 
// 启用编辑 
editor.extensionStorage.editable.enable();

extensionStorage.focusEvents

类型：Object
功能描述：焦点事件扩展的存储，管理焦点相关的回调和状态

使用示例：

javascript 复制代码

// 注册聚焦事件回调 
editor.extensionStorage.focusEvents.onFocus(() => {   
  console.log('编辑器获得焦点'); 
}); 
// 注册失焦事件回调 
editor.extensionStorage.focusEvents.onBlur(() => {
  console.log('编辑器失去焦点');
});

extensionStorage.fontSize

类型：Object
功能描述：字体大小扩展的存储，管理字体大小配置和当前值

使用示例：

javascript 复制代码

// 获取当前字体大小 
const currentSize = editor.extensionStorage.fontSize.currentSize; 
// 设置默认字体大小 
editor.extensionStorage.fontSize.setDefault('16px'); 
// 应用字体大小到选区 
editor.extensionStorage.fontSize.apply('20px');

extensionStorage.gapCursor

类型：Object
功能描述：间隙光标扩展的存储，管理光标在节点间隙的行为

使用示例：

javascript 复制代码

// 启用间隙光标 
editor.extensionStorage.gapCursor.enable(); 
// 禁用间隙光标 
editor.extensionStorage.gapCursor.disable(); 
// 检查间隙光标是否活跃 
const isGapCursorActive = editor.extensionStorage.gapCursor.isActive;

extensionStorage.globalDragHandle

类型：Object
功能描述：全局拖拽手柄扩展的存储，管理拖拽手柄的样式和行为

使用示例：

javascript 复制代码

// 显示全局拖拽手柄 
editor.extensionStorage.globalDragHandle.show(); 
// 隐藏全局拖拽手柄 
editor.extensionStorage.globalDragHandle.hide(); 
// 修改拖拽手柄的颜色 
editor.extensionStorage.globalDragHandle.setColor('#ff5722');

extensionStorage.hardBreak

类型：Object
功能描述：硬换行扩展的存储，管理硬换行的样式和行为

使用示例：

javascript 复制代码

// 获取硬换行的HTML标签 
const breakTag = editor.extensionStorage.hardBreak.tag; 
// 修改硬换行的样式 
editor.extensionStorage.hardBreak.setStyle({ margin: '0 5px' });

extensionStorage.heading

类型：Object
功能描述：标题扩展的存储，管理标题级别、样式配置

使用示例：

javascript 复制代码

// 获取当前标题级别 
const currentLevel = editor.extensionStorage.heading.currentLevel; 
// 设置标题支持的最大级别（如1-3级） 
editor.extensionStorage.heading.setMaxLevel(3); 
// 检查当前是否为标题节点 
const isHeading = editor.extensionStorage.heading.isActive();

extensionStorage.highlight

类型：Object
功能描述：文本高亮扩展的存储，管理高亮颜色和状态

使用示例：

javascript 复制代码

// 获取当前高亮颜色 
const currentHighlight = editor.extensionStorage.highlight.color; 
// 设置默认高亮颜色 
editor.extensionStorage.highlight.setDefault('#ffff00'); 
// 清除高亮 
editor.extensionStorage.highlight.clear();

extensionStorage.history

类型：Object
功能描述：历史记录扩展的存储，管理撤销/重做状态和配置

使用示例：

javascript 复制代码

// 检查是否可撤销 
const canUndo = editor.extensionStorage.history.canUndo; 
// 检查是否可重做 
const canRedo = editor.extensionStorage.history.canRedo; 
// 设置历史记录最大步数 
editor.extensionStorage.history.setMaxDepth(50);

extensionStorage.horizontalRule

类型：Object
功能描述：水平线扩展的存储，管理水平线样式和配置

使用示例：

javascript 复制代码

// 修改水平线的高度和颜色 
editor.extensionStorage.horizontalRule.setStyle({   
  height: '2px',   
  backgroundColor: '#e0e0e0' 
}); 
// 获取水平线的HTML渲染结果 
const hrHtml = editor.extensionStorage.horizontalRule.render();

extensionStorage.indent

类型：Object
功能描述：缩进扩展的存储，管理缩进量、最大缩进等配置

使用示例：

javascript 复制代码

// 获取当前缩进量 
const currentIndent = editor.extensionStorage.indent.current; 
// 设置每次缩进的像素值 
editor.extensionStorage.indent.setStep(20); 
// 设置最大缩进量 
editor.extensionStorage.indent.setMax(100);

extensionStorage.italic

类型：Object
功能描述：斜体扩展的存储，管理斜体样式和激活状态

使用示例：

javascript 复制代码

// 检查当前是否为斜体 
const isItalicActive = editor.extensionStorage.italic.isActive; 
// 修改斜体的CSS样式 
editor.extensionStorage.italic.setStyle({ fontStyle: 'italic' });

extensionStorage.keymap

类型：Object
功能描述：快捷键扩展的存储，管理自定义快捷键配置

使用示例：

javascript 复制代码

// 获取所有注册的快捷键 
const shortcuts = editor.extensionStorage.keymap.list; 
// 添加自定义快捷键（Ctrl+S保存） 
editor.extensionStorage.keymap.addShortcut('Mod-s', () => {   
  saveContent();   
  return true; 
}); 
// 移除快捷键 
editor.extensionStorage.keymap.removeShortcut('Mod-s');

extensionStorage.link

类型：Object
功能描述：链接扩展的存储，管理链接属性（如href、target）和状态

使用示例：

javascript 复制代码

// 获取当前链接的属性 
const linkAttrs = editor.extensionStorage.link.getCurrentAttributes(); 
// 设置链接默认target为_blank 
editor.extensionStorage.link.setDefaultTarget('_blank'); 
// 检查当前是否为链接 
const isLinkActive = editor.extensionStorage.link.isActive;

extensionStorage.listItem

类型：Object
功能描述：列表项扩展的存储，管理列表项的样式和行为

使用示例：

javascript 复制代码

// 获取列表项的缩进量 
const itemIndent = editor.extensionStorage.listItem.indent; 
// 设置列表项的符号样式 
editor.extensionStorage.listItem.setMarkerStyle('disc');

extensionStorage.mention

类型：Object
功能描述：提及扩展的存储，管理提及列表（如@用户）和匹配规则

使用示例：

javascript 复制代码

// 获取提及建议列表 
const suggestions = editor.extensionStorage.mention.suggestions; 
// 更新提及数据源 
editor.extensionStorage.mention.setItems([   { id: 1, name: '张三' },   { id: 2, name: '李四' } ]); 
// 设置提及触发字符（默认@） 
editor.extensionStorage.mention.setTrigger('$');

extensionStorage.orderedList

类型：Object
功能描述：有序列表扩展的存储，管理列表编号样式、起始值等

使用示例：

javascript 复制代码

// 获取有序列表的起始编号 
const startNumber = editor.extensionStorage.orderedList.start; 
// 设置编号样式为罗马数字 
editor.extensionStorage.orderedList.setNumberStyle('upper-roman'); 
// 设置默认起始编号 
editor.extensionStorage.orderedList.setDefaultStart(1);

extensionStorage.paragraph

类型：Object
功能描述：段落扩展的存储，管理段落样式和默认配置

使用示例：

javascript 复制代码

// 修改段落的行高 
editor.extensionStorage.paragraph.setLineHeight(1.5); 
// 设置段落默认对齐方式 
editor.extensionStorage.paragraph.setDefaultAlign('left');

extensionStorage.paste

类型：Object
功能描述：粘贴扩展的存储，管理粘贴内容的处理规则（如过滤格式）

使用示例：

javascript 复制代码

// 启用粘贴时清除格式 
editor.extensionStorage.paste.enableCleanPaste(); 
// 添加粘贴过滤器（保留图片，移除其他格式） 
editor.extensionStorage.paste.addFilter(html => {   
  return html.replace(/<(?!img)[^>]+>/g, ''); 
});

extensionStorage.placeholder

类型：Object
功能描述：占位符扩展的存储，管理占位文本和样式

使用示例：

javascript 复制代码

// 获取当前占位文本 
const placeholderText = editor.extensionStorage.placeholder.text; 
// 设置自定义占位文本 
editor.extensionStorage.placeholder.setText('请输入内容...'); 
// 修改占位符样式 
editor.extensionStorage.placeholder.setStyle({ color: '#999' });

extensionStorage.starterKit

类型：Object
功能描述：基础套件扩展的存储，管理套件中包含的扩展状态

使用示例：

javascript 复制代码

// 获取基础套件包含的扩展列表 
const includedExtensions = editor.extensionStorage.starterKit.extensions; 
// 禁用套件中的某个扩展（如bold） 
editor.extensionStorage.starterKit.disableExtension('bold'); 
// 启用套件中的某个扩展（如italic） 
editor.extensionStorage.starterKit.enableExtension('italic');

extensionStorage.strike

类型：Object
功能描述：删除线扩展的存储，管理删除线样式和状态

使用示例：

javascript 复制代码

// 检查当前是否有删除线 
const isStrikeActive = editor.extensionStorage.strike.isActive; 
// 修改删除线样式 
editor.extensionStorage.strike.setStyle({ textDecoration: 'line-through' });

extensionStorage.tabindex

类型：Object
功能描述：tabindex 扩展的存储，管理编辑器的 tabindex 属性

使用示例：

javascript 复制代码

// 获取当前tabindex值 
const currentTabIndex = editor.extensionStorage.tabindex.value; 
// 设置tabindex为1（控制焦点顺序） 
editor.extensionStorage.tabindex.setValue(1); 
// 移除tabindex（禁用通过Tab键聚焦） 
editor.extensionStorage.tabindex.remove();

extensionStorage.table

类型：Object
功能描述：表格扩展的存储，管理表格整体配置（如边框、单元格间距）

使用示例：

javascript 复制代码

// 获取表格边框样式 
const borderStyle = editor.extensionStorage.table.borderStyle; 
// 设置表格默认行数和列数 
editor.extensionStorage.table.setDefaultSize(3, 3); 
// 启用表格单元格合并 
editor.extensionStorage.table.enableMerging();

extensionStorage.tableCell

类型：Object
功能描述：表格单元格扩展的存储，管理单元格样式、对齐方式等

使用示例：

javascript 复制代码

// 获取当前单元格的对齐方式 
const cellAlign = editor.extensionStorage.tableCell.align; 
// 设置单元格默认 padding 
editor.extensionStorage.tableCell.setPadding(8); 
// 合并当前单元格与右侧单元格 
editor.extensionStorage.tableCell.mergeRight();

extensionStorage.tableHeader

类型：Object
功能描述：表格表头扩展的存储，管理表头样式和行为

使用示例：

javascript 复制代码

// 设置表头背景色 
editor.extensionStorage.tableHeader.setBackground('#f5f5f5'); 
// 切换表头可见性 
editor.extensionStorage.tableHeader.toggleVisibility();

extensionStorage.tableMenu

类型：Object
功能描述：表格菜单扩展的存储，管理表格右键菜单配置

使用示例：

javascript 复制代码

// 自定义表格菜单选项 
editor.extensionStorage.tableMenu.setItems([   'addRow', 'deleteRow', 'separator', 'deleteTable' ]); 
// 显示表格菜单 
editor.extensionStorage.tableMenu.show();

extensionStorage.tableRow

类型：Object
功能描述：表格行扩展的存储，管理行样式和高度

使用示例：

javascript 复制代码

// 设置表格行默认高度 
editor.extensionStorage.tableRow.setDefaultHeight(40); 
// 高亮当前行 
editor.extensionStorage.tableRow.highlightCurrent();

extensionStorage.taskItem

类型：Object
功能描述：任务项扩展的存储，管理任务项（复选框）状态和样式

使用示例：

javascript 复制代码

// 切换任务项完成状态 
editor.extensionStorage.taskItem.toggleDone(); 
// 检查当前任务项是否完成 
const isDone = editor.extensionStorage.taskItem.isDone; 
// 修改复选框样式 
editor.extensionStorage.taskItem.setCheckboxStyle({ size: '16px' });

extensionStorage.taskList

类型：Object
功能描述：任务列表扩展的存储，管理任务列表整体样式

使用示例：

javascript 复制代码

// 设置任务列表的缩进量 
editor.extensionStorage.taskList.setIndent(16); 
// 获取所有任务项的完成状态 
const allDone = editor.extensionStorage.taskList.allDone();

extensionStorage.text

类型：Object
功能描述：文本节点扩展的存储，管理纯文本节点的基础配置

使用示例：

javascript 复制代码

// 获取文本节点的默认样式 
const textStyle = editor.extensionStorage.text.style; 
// 设置文本默认字体 
editor.extensionStorage.text.setFontFamily('Arial');

extensionStorage.textAlign

类型：Object
功能描述：文本对齐扩展的存储，管理文本对齐方式（左对齐、居中、右对齐）

使用示例：

javascript 复制代码

// 获取当前文本对齐方式 
const currentAlign = editor.extensionStorage.textAlign.align; 
// 设置文本居中对齐 
editor.extensionStorage.textAlign.set('center'); 
// 重置为默认对齐方式 
editor.extensionStorage.textAlign.reset();

extensionStorage.textStyle

类型：Object
功能描述：文本样式扩展的存储，管理文本的综合样式（如字体、行高）

使用示例：

javascript 复制代码

// 获取当前文本样式集合 
const currentStyles = editor.extensionStorage.textStyle.styles; 
// 应用组合样式 
editor.extensionStorage.textStyle.apply({   
  fontFamily: 'Georgia',   
  lineHeight: 1.6 
}); 
// 清除所有文本样式 
editor.extensionStorage.textStyle.clear();

extensionStorage.typography

类型：Object
功能描述：排版扩展的存储，管理整体排版规则（如引号替换、连字符）

使用示例：

javascript 复制代码

// 启用智能引号替换（将"替换为""） 
editor.extensionStorage.typography.enableSmartQuotes(); 
// 禁用连字符自动插入 
editor.extensionStorage.typography.disableHyphens();

extensionStorage.uploadFile

类型：Object
功能描述：文件上传扩展的存储，管理文件上传配置、进度和结果

使用示例：

javascript 复制代码

// 设置文件上传接口地址 
editor.extensionStorage.uploadFile.setUploadUrl('/api/upload'); 
// 监听上传进度 
editor.extensionStorage.uploadFile.onProgress(progress => {   
  console.log(`上传进度: ${progress}%`); 
}); 
// 上传文件 
editor.extensionStorage.uploadFile.upload(selectedFile);

extensionStorage.uploadFileBtn

类型：Object
功能描述：文件上传按钮扩展的存储，管理上传按钮样式和行为

使用示例：

javascript 复制代码

// 修改上传按钮文本 
editor.extensionStorage.uploadFileBtn.setText('上传附件'); 
// 设置按钮样式 
editor.extensionStorage.uploadFileBtn.setStyle({   
  backgroundColor: '#4caf50',   
  color: 'white' 
});

extensionStorage.uploadImage

类型：Object
功能描述：图片上传扩展的存储，管理图片上传配置、预览和处理

使用示例：

javascript 复制代码

// 设置图片上传接受的格式 
editor.extensionStorage.uploadImage.setAcceptTypes(['image/jpeg', 'image/png']); 
// 启用图片预览 
editor.extensionStorage.uploadImage.enablePreview(); 
// 上传图片并插入编辑器 
editor.extensionStorage.uploadImage.uploadAndInsert(selectedImage);

扩展隔离：每个扩展的状态和配置独立存储，避免冲突。
状态同步 ：存储中的状态与编辑器实时同步（如 bold.isActive 反映当前选区是否加粗）。
功能扩展 ：提供扩展专属方法（如 history.canUndo、uploadImage.upload），简化复杂操作。

实际开发中，可通过 extensionStorage 快速访问和控制特定扩展的行为，例如通过 table 存储配置表格样式，通过 history 存储判断是否可撤销操作等。

8 isCapturingTransaction、isFocused、isInitialized

js 复制代码

{
  isCapturingTransaction,
  isFocused,
  isInitialized,
}

顶层核心状态属性：这类属性是编辑器的「实时状态指示器」，用于判断编辑器当前的运行状态，常作为业务逻辑的判断条件。

状态属性的实时性 ：isCapturingTransaction、isFocused、isInitialized 是「动态状态」，会随编辑器操作实时变化，可直接读取但不建议手动修改 （需通过编辑器方法如 setEditable、focus 间接控制）。

isCapturingTransaction

类型：boolean
功能描述：标记编辑器是否正在「捕获事务」（事务是 Tiptap/ProseMirror 中编辑操作的最小单位，如输入、格式修改），捕获期间会暂存操作，避免重复触发更新

使用示例：

javascript 复制代码

// 1. 监听事务捕获状态，避免在捕获中执行冲突操作 
if (editor.isCapturingTransaction) {   console.log('编辑器正在处理事务，暂不执行新操作');   return; } 
// 2. 在transaction回调中判断状态 
const editor = new Editor({   
  callbacks: {     
    transaction() {       
      console.log('事务捕获中:', editor.isCapturingTransaction); // 输出 true     
    }   
  } 
});

isFocused

类型：boolean
功能描述：标记编辑器是否处于「聚焦状态」（光标在编辑区域内），用于控制工具栏显示、自动保存等逻辑

使用示例：

javascript 复制代码

// 1. 根据聚焦状态显示/隐藏工具栏 
const toolbar = document.getElementById('editor-toolbar'); 
if (editor.isFocused) {   
  toolbar.style.display = 'flex'; 
} else { 
  toolbar.style.display = 'none'; 
} 
// 2. 聚焦时自动滚动到编辑器 
editor.$watch('isFocused', (isFocused) => {   
  if (isFocused) {     
    editor.view.dom.scrollIntoView({ behavior: 'smooth' });   
  } 
});

isInitialized

类型：boolean
功能描述：标记编辑器是否「初始化完成」（DOM 挂载、扩展加载、状态就绪），避免在未初始化时调用编辑器方法

使用示例：

javascript 复制代码

// 1. 确保初始化完成后再设置内容 
if (editor.isInitialized) {   
  editor.setContent('<p>初始化完成后设置的内容</p>'); 
} else {   
  // 未初始化时监听初始化事件   
  editor.on('create', () => {     
    editor.setContent('<p>监听初始化事件后设置的内容</p>');   
  }); 
} 
// 2. 初始化完成后执行初始化逻辑 
const editor = new Editor({   
  callbacks: {     
    create() {       
      console.log('初始化完成:', editor.isInitialized); // 输出 true       
      // 执行初始化后逻辑（如加载历史记录）       
      loadEditorHistory(editor);     
    }   
  } 
});

9 options

js 复制代码

{
  options: {
    autofocus,
    content,
    coreExtensionOptions,
    editable,
    editorProps,
    element,
    emptyDocument,
    enableContentCheck,
    enableCoreExtensions,
    enableInputRules,
    enablePasteRules,
    extensions,
    injectCSS,
    injectNonce,
    onBeforeCreate,
    onBlur,
    onContentError,
    onCreate,
    onDestroy,
    onDrop,
    onFocus,
    onPaste,
    onSelectionUpdate,
    onTransaction,
    onUpdate,
    parseOptions,
  },
}

options 是编辑器的「初始化配置中心」，所有核心行为、扩展加载、事件监听均通过该对象定义，仅在编辑器初始化时生效 （后续修改需通过特定方法，而非直接修改 options）。

options.autofocus
- 类型：boolean
- 功能描述：控制编辑器初始化后是否「自动聚焦」（光标自动定位到编辑区域）
- 使用示例：
  javascript 复制代码
```
const editor = new Editor({   
  options: {     
    autofocus: true, // 初始化后自动聚焦   
  } 
});
```

options.content

类型：string/JSON
功能描述：设置编辑器的「初始内容」，支持 HTML 字符串或 ProseMirror 文档 JSON 格式

使用示例：

javascript 复制代码

// 1. 用HTML设置初始内容 
const editor1 = new Editor({   
  options: {     
    content: '<p>初始HTML内容</p><h2>二级标题</h2>'   
  } 
}); 
// 2. 用JSON设置初始内容（ProseMirror文档结构） 
const editor2 = new Editor({   
  options: {     
    content: {       
      type: 'doc',       
      content: [         
        { type: 'paragraph', content: [{ type: 'text', text: '初始JSON内容' }] }       
      ]     
    }   
  } 
});

options.coreExtensionOptions

类型：Object
功能描述：配置 Tiptap 核心扩展（如 doc、text、paragraph）的选项，覆盖默认行为

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    // 配置核心扩展"paragraph"（段落）的默认样式     
    coreExtensionOptions: {       
      paragraph: {         
        HTMLAttributes: {           
          class: 'custom-paragraph', 
          // 给所有段落添加自定义类         
        }       
      },       
      // 配置核心扩展"text"（文本）的默认属性       
      text: {         
        marks: {           
          bold: { class: 'custom-bold' } // 给加粗文本添加自定义类         
        }       
      }     
    }   
  } 
});

options.editable

类型：boolean
功能描述：控制编辑器是否「可编辑」（false 时编辑区域只读，无法输入或修改）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    editable: false, // 编辑器只读   
  } 
}); // 后续动态切换可编辑状态（需通过编辑器方法，而非修改options） 
editor.setEditable(true);

options.editorProps

类型：Object
功能描述：配置 ProseMirror 视图的底层属性（如 attributes 给编辑区域加 DOM 属性，handleKeyDown 自定义键盘事件）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    editorProps: {       
      // 给编辑区域根元素添加自定义属性       
      attributes: {         
        class: 'my-editor',         
        'data-id': 'editor-123'       
      },       
      // 自定义键盘事件（如按Esc失焦）       
      handleKeyDown: (view, event) => {         
        if (event.key === 'Escape') {           
          view.blur();           
          return true; // 阻止默认行为         
        }         
        return false;       
      }     
    }   
  } 
});

options.element

类型：HTMLElement
功能描述：指定编辑器挂载的「目标 DOM 元素」（若不指定，Tiptap 会自动创建一个 div 挂载）

使用示例：

javascript 复制代码

// 1. 获取页面中已存在的DOM元素 
const targetEl = document.getElementById('editor-mount'); 
// 2. 将编辑器挂载到该元素 
const editor = new Editor({   
  options: {     element: targetEl   } 
});

options.emptyDocument

类型：JSON
功能描述：自定义「空文档结构」（默认空文档是一个空段落，可修改为其他结构如空标题）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    // 自定义空文档为"一级标题"（而非默认空段落）     
    emptyDocument: {       
      type: 'doc',       
      content: [         
        { 
          type: 'heading', 
          attrs: { level: 1 }, 
          content: [{ type: 'text', text: '' }] 
        }       
      ]     
    }   
  } 
});

options.enableContentCheck

类型：boolean
功能描述：控制是否「校验内容合法性」（开启后会过滤不符合 schema 的内容，如非法节点/标记）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    enableContentCheck: true, 
    // 开启内容合法性校验（默认开启）     
    content: '<invalid-node>非法内容</invalid-node>', // 会被自动过滤   
  } 
});

options.enableCoreExtensions

类型：boolean
功能描述：控制是否「加载 Tiptap 核心扩展」（核心扩展包括 doc、text、paragraph，默认开启；关闭后需手动加载所有必要扩展）

使用示例：

javascript 复制代码

import { Doc, Text, Paragraph } from '@tiptap/extensions'; 
const editor = new Editor({   
  options: {     
    enableCoreExtensions: false, // 关闭默认核心扩展     
    extensions: [Doc, Text, Paragraph] // 手动加载必要核心扩展   
  } 
});

options.enableInputRules
- 类型：boolean
- 功能描述：控制是否「启用输入规则」（输入特定字符触发格式，如输入 # 自动转为一级标题）
- 使用示例：
  javascript 复制代码
```
const editor = new Editor({   
  options: {     
    enableInputRules: true, // 启用输入规则（默认开启）     
    // 输入"## "会自动转为二级标题   
  } 
});
```
options.enablePasteRules
- 类型：boolean
- 功能描述：控制是否「启用粘贴规则」（粘贴内容时自动格式化，如粘贴链接自动转为 <a> 标签）
- 使用示例：
  javascript 复制代码
```
const editor = new Editor({   
  options: {     
    enablePasteRules: true, // 启用粘贴规则（默认开启）     
    // 粘贴"https://tiptap.dev"会自动转为链接   
  } 
});
```

options.extensions

类型：Array<Extension>
功能描述：配置编辑器加载的「扩展列表」（如 Bold 加粗、Table 表格，是扩展编辑器功能的核心）

使用示例：

javascript 复制代码

import { Bold, Italic, Table, Heading } from '@tiptap/extensions'; 
const editor = new Editor({   
  options: {     
    extensions: [      
      Bold, // 加载加粗扩展       
      Italic, // 加载斜体扩展       
      Heading.configure({ levels: [1, 2, 3] }), // 加载标题扩展并配置支持1-3级       
      Table.configure({ resizable: true }) // 加载表格扩展并启用单元格 
      resize     
    ]   
  } 
});

options.injectCSS

类型：boolean
功能描述：控制是否「自动注入 Tiptap 默认 CSS」（默认开启，关闭后需手动引入 Tiptap 样式文件）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    injectCSS: false, // 关闭自动注入默认CSS   
  } 
}); // 需手动在HTML中引入默认样式 <link rel="stylesheet" href="https://unpkg.com/@tiptap/core/dist/style.min.css">

options.injectNonce

类型：string
功能描述：给 Tiptap 自动注入的 CSS 添加「nonce 属性」（用于 Content-Security-Policy 安全策略）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    injectNonce: 'my-secure-nonce-123', // 给注入的CSS添加nonce   
  } 
}); // 生成的CSS会包含：<style nonce="my-secure-nonce-123">...</style>

options.onBeforeCreate

类型：Function
功能描述：编辑器「初始化前」触发的回调（比 callbacks.beforeCreate 更早执行，用于底层准备）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onBeforeCreate() {       
      console.log('编辑器初始化前（最早的回调）');       
      // 执行底层准备（如初始化全局变量、加载字体）       
      initEditorGlobalConfig();     
    }   
  } 
});

options.onBlur

类型：Function
功能描述：编辑器「失焦」时触发的回调（等价于 callbacks.blur，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onBlur(editor) {       
      console.log('编辑器失焦');       
      // 失焦时保存草稿       
      localStorage.setItem('editor-draft', editor.getHTML());     
    }   
  } 
});

options.onContentError

类型：Function
功能描述：内容「解析/渲染出错」时触发的回调（如非法 HTML、JSON 结构，参数为错误对象）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onContentError(error) {       
      console.error('内容处理出错:', error.message);       
      // 错误时重置为默认内容       
      editor.setContent('<p>内容加载失败，请重新输入</p>');     
    },     
    content: '<invalid-html-tag>非法内容</invalid-html-tag>' // 触发错误   
  } 
});

options.onCreate

类型：Function
功能描述：编辑器「初始化完成」时触发的回调（等价于 callbacks.create，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onCreate(editor) {       
      console.log('编辑器初始化完成');       
      // 初始化后恢复历史记录       
      restoreEditorHistory(editor);     
    }   
  } 
});

options.onDestroy

类型：Function
功能描述：编辑器「销毁」时触发的回调（等价于 callbacks.destroy，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onDestroy(editor) {       
      console.log('编辑器已销毁');       
      // 销毁时清理资源（如移除事件监听、清空缓存）       
      cleanupEditorResources(editor);     
    }   
  } 
}); // 后续调用销毁触发回调 
editor.destroy();

options.onDrop

类型：Function
功能描述：「拖放操作」发生时触发的回调（等价于 callbacks.drop，参数为事件对象和编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onDrop(event, editor) {       
      event.preventDefault(); // 阻止默认拖放       
      // 处理拖放的文本内容       
      const droppedText = event.dataTransfer.getData('text');       
      if (droppedText) {         
        editor.insertContent(`<p>拖放内容：${droppedText}</p>`);       
      }     
    }   
  } 
});

options.onFocus

类型：Function
功能描述：编辑器「聚焦」时触发的回调（等价于 callbacks.focus，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onFocus(editor) {       
      console.log('编辑器聚焦');       
      // 聚焦时高亮编辑区域       
      editor.view.dom.classList.add('editor-focused');     
    }   
  } 
});

options.onPaste

类型：Function
功能描述：「粘贴操作」发生时触发的回调（等价于 callbacks.paste，参数为事件对象和编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onPaste(event, editor) {       
      // 仅保留纯文本，过滤HTML格式       
      const plainText = event.clipboardData.getData('text');       
      if (plainText) {         
        event.preventDefault(); // 阻止默认粘贴         
        editor.insertContent(`<p>${plainText}</p>`);       
      }     
    }   
  } 
});

options.onSelectionUpdate

类型：Function
功能描述：「选区更新」时触发的回调（等价于 callbacks.selectionUpdate，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onSelectionUpdate(editor) {       
      // 同步工具栏按钮状态（如加粗按钮是否激活）       
      const isBoldActive = editor.isActive('bold');       
      document.getElementById('bold-btn').classList.toggle('active', isBoldActive);     
    }   
  } 
});

options.onTransaction

类型：Function
功能描述：「事务执行」时触发的回调（等价于 callbacks.transaction，参数为事务对象和编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onTransaction(transaction, editor) {       
      // 记录所有编辑事务（用于审计）       
      logEditorTransaction(transaction);       
      // 限制内容长度（超过1000字符阻止输入）       
      if (editor.getHTML().length > 1000 && transaction.steps.some(step => step.isInsertion)) {         
        transaction.setMeta('preventDefault', true);       
      }     
    }   
  } 
});

options.onUpdate

类型：Function
功能描述：编辑器「内容更新」后触发的回调（等价于 callbacks.update，参数为编辑器实例）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    onUpdate(editor) {       
      console.log('内容已更新');       
      // 实时保存到服务器       
      fetch('/api/save-content', {         
        method: 'POST',         
        body: JSON.stringify({ content: editor.getHTML() })       
      });     
    }   
  } 
});

options.parseOptions

类型：Object
功能描述：配置 ProseMirror 解析器的选项（如 HTML 解析规则、允许的标签/属性）

使用示例：

javascript 复制代码

const editor = new Editor({   
  options: {     
    parseOptions: {       
      // 允许解析时保留特定自定义属性       
      preserveWhitespace: 'full', 
      // 保留所有空白字符       
      // 自定义HTML解析规则（如允许<div>标签作为段落）       
      HTMLParser: {         
        rules: {           
          div: {             
            node: 'paragraph', // 将<div>解析为段落节点           
          }         
        }       
      }     
    },     
    content: '<div>自定义解析规则：div转为段落</div>'   
  } 
});

options 的初始化特性 ：options 仅在 new Editor({ options: ... }) 时生效，后续若需修改配置（如从「只读」改「可编辑」），需使用编辑器实例方法（如 editor.setEditable(true)），而非直接修改 editor.options.editable（修改后无效果）。
回调的等价性 ：options 中的 onXXX 回调（如 onFocus）与 callbacks 中的同名回调（如 callbacks.focus）功能完全一致，选择一种方式配置即可，无需重复定义。