Halo 插件如何通过 default:editor:extension:create 扩展点向默认编辑器注入 Tiptap 扩展【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo如果你的 Halo 插件需要给内置的默认富文本编辑器添加自定义节点、Mark或者工具栏按钮、Slash Command 等交互能力但不想整套替换编辑器default:editor:extension:create就是对应的扩展点在插件的 UI 模块中返回一个或多个 Tiptap Extension默认编辑器创建时会自动把它们合并进扩展列表扩展随编辑器一起生效。准备条件插件开发侧需要安装 Halo 的默认编辑器包基于 Tiptap ProseMirror 构建pnpm install halo-dev/richtext-editor按 编辑器包 README 说明该包与 Halo 强耦合不适合当作通用编辑器使用但在 Halo 插件中可以像 Halo 自身一样使用运行环境要求 Vue 3.5.x 及以上且必须在 Halo 插件环境中。扩展点本身的定义方式见 默认编辑器扩展点文档。第一步注册扩展点插件 UI 模块通过extensionPoints字段声明该扩展点回调返回一个 Tiptap Extension 数组文档示例import ExtensionFoo from ./tiptap/extension-foo.ts export default definePlugin({ extensionPoints: { default:editor:extension:create: () { return [ExtensionFoo]; }, }, });类型定义见 ui-plugin-module.ts允许回调返回AnyExtension[]或PromiseAnyExtension[]因此也可以async方式异步加载扩展。框架侧的合并逻辑在 DefaultEditor.vue默认编辑器在onMounted中遍历所有插件模块对每个实现了default:editor:extension:create的插件调用其回调收集全部扩展后通过ExtensionsKit.configure({ customExtensions: [...customExtensions, ...extensionsFromPlugins] })传入new VueEditor。也就是说你返回的扩展会在编辑器实例创建时与 Halo 内置扩展一起注册不需要额外配置。第二步编写 Tiptap 扩展扩展本体是标准 Tiptap ExtensionExtension.create、Node.create等写法参考 Tiptap 官方文档。在 Halo 场景下有两个要点不要重复添加ExtensionKeyboardShortcuts。默认编辑器已经通过ExtensionsKit内置了该扩展插件通过default:editor:extension:create注册时无需再加只有在自行创建编辑器实例时才需要显式加入。想接入编辑器的 UI 区域就在扩展的addOptions中实现对应的扩展函数。编辑器扩展文档 定义了ExtensionOptions支持五个扩展区域函数作用区域getToolbarItems顶部工具栏getCommandMenuItemsSlash Command 斜杠命令菜单getBubbleMenu选中文本/块后的悬浮菜单getToolboxItems工具箱插入表格、插入组件等getDraggableMenuItems拖拽手柄菜单转换、复制、删除等每个函数都接收{ editor }返回单个项或数组其中priority数值越小越靠前。完整示例带工具栏按钮和快捷键的扩展下面是一个同时接入顶部工具栏与快捷键注册表的示例引自 extension.md 的 2.1 节仅MyIcon需替换为你自己的图标组件import { defineHaloKeyboardShortcuts, Extension, ToolbarItem, type Editor, type ExtensionOptions, } from halo-dev/richtext-editor; import { markRaw } from vue; import MyIcon from ./MyIcon.vue; const shortcutId plugin.example.insertGreeting; function insertGreeting(editor: Editor) { return editor.chain().focus().insertContent(Hello Halo).run(); } export const ExtensionExample Extension.createExtensionOptions({ name: exampleShortcut, addKeyboardShortcuts() { return defineHaloKeyboardShortcuts(this, [ { id: shortcutId, keys: [Mod-Alt-g], label: 插入问候语, category: general, priority: 100, command: () insertGreeting(this.editor), }, ]); }, addOptions() { return { ...this.parent?.(), getToolbarItems({ editor }: { editor: Editor }) { return { priority: 100, component: markRaw(ToolbarItem), props: { editor, isActive: false, icon: markRaw(MyIcon), title: 插入问候语, shortcutId, action: () insertGreeting(editor), }, }; }, }; }, });然后按第一步的方式把它返回给扩展点default:editor:extension:create: () [ExtensionExample]。快捷键部分的关键约定id必须包含插件标识的命名空间如plugin.example.insertGreeting注册表不会自动为重复 ID 加命名空间。keys使用 Tiptap 快捷键格式Mod表示 macOS 的Command/ Windows 与 Linux 的Control。命令处理成功时返回trueProseMirror 会阻止浏览器默认行为未处理时返回false。把同一个id传给工具栏组件的shortcutId后tooltip 会展示快捷键键盘快捷键侧边栏会展示操作说明。添加按键前先检查 Halo 默认快捷键、Tiptap 默认快捷键和浏览器常用快捷键。如果继承的父扩展已实现相同按键可以只补描述、省略command开发环境会对缺少实际命令的定义输出警告且不注册该描述。结果验证加载插件并打开使用默认编辑器的内容编辑页后可以从三个层面确认注入生效UI 层面实现了getToolbarItems的按钮出现在顶部工具栏实现了getCommandMenuItems的指令出现在 Slash Command 菜单中注册过的快捷键出现在键盘快捷键侧边栏。运行时清单层面runtime-metadata 文档 提供了createHaloEditorManifest(editor)在编辑器创建完成后同步生成运行期快照包含当前 Editor 实例注册的全部 Node 和 Mark。如果你的扩展是自定义节点确认该节点出现在 Manifest 中即可说明 schema 注册成功import { createHaloEditorManifest, type HaloEditorManifest, type VueEditor, } from halo-dev/richtext-editor; function editorManifest(editor: VueEditor): HaloEditorManifest { return createHaloEditorManifest(editor); }交互层面按下注册的快捷键或点击工具栏按钮观察命令是否按预期执行例如示例中会在光标处插入 Hello Halo。边界与常见混淆与editor:create的区别editor:create注册的是整套自定义编辑器需要name、displayName、component、rawType且组件必须实现v-model:raw和v-model:content两个绑定见 编辑器集成扩展点文档。本文的default:editor:extension:create只向内置默认编辑器追加 Tiptap 扩展不替换编辑器本身。二者面向不同需求不要混用。节点缩进自定义 block 节点只要属于blockgroup 且不属于listgroup就会自动获得块缩进属性与快捷键特殊行为可用haloEditorIndentation调整详见 extension.md 第 7 节。元数据声明如果扩展需要向运行期 Manifest 提供 AI 使用说明可在 Node/Mark/Extension 上实现addHaloEditorMetadata声明抛错或字段无效时生成器保留其他有效数据生产环境不会因此阻止编辑器运行见 runtime-metadata.md。相关文档默认编辑器扩展点、编辑器扩展说明、运行期元数据、默认编辑器实现。【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Halo 插件如何通过 default:editor:extension:create 扩展点向默认编辑器注入 Tiptap 扩展
Halo 插件如何通过 default:editor:extension:create 扩展点向默认编辑器注入 Tiptap 扩展【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo如果你的 Halo 插件需要给内置的默认富文本编辑器添加自定义节点、Mark或者工具栏按钮、Slash Command 等交互能力但不想整套替换编辑器default:editor:extension:create就是对应的扩展点在插件的 UI 模块中返回一个或多个 Tiptap Extension默认编辑器创建时会自动把它们合并进扩展列表扩展随编辑器一起生效。准备条件插件开发侧需要安装 Halo 的默认编辑器包基于 Tiptap ProseMirror 构建pnpm install halo-dev/richtext-editor按 编辑器包 README 说明该包与 Halo 强耦合不适合当作通用编辑器使用但在 Halo 插件中可以像 Halo 自身一样使用运行环境要求 Vue 3.5.x 及以上且必须在 Halo 插件环境中。扩展点本身的定义方式见 默认编辑器扩展点文档。第一步注册扩展点插件 UI 模块通过extensionPoints字段声明该扩展点回调返回一个 Tiptap Extension 数组文档示例import ExtensionFoo from ./tiptap/extension-foo.ts export default definePlugin({ extensionPoints: { default:editor:extension:create: () { return [ExtensionFoo]; }, }, });类型定义见 ui-plugin-module.ts允许回调返回AnyExtension[]或PromiseAnyExtension[]因此也可以async方式异步加载扩展。框架侧的合并逻辑在 DefaultEditor.vue默认编辑器在onMounted中遍历所有插件模块对每个实现了default:editor:extension:create的插件调用其回调收集全部扩展后通过ExtensionsKit.configure({ customExtensions: [...customExtensions, ...extensionsFromPlugins] })传入new VueEditor。也就是说你返回的扩展会在编辑器实例创建时与 Halo 内置扩展一起注册不需要额外配置。第二步编写 Tiptap 扩展扩展本体是标准 Tiptap ExtensionExtension.create、Node.create等写法参考 Tiptap 官方文档。在 Halo 场景下有两个要点不要重复添加ExtensionKeyboardShortcuts。默认编辑器已经通过ExtensionsKit内置了该扩展插件通过default:editor:extension:create注册时无需再加只有在自行创建编辑器实例时才需要显式加入。想接入编辑器的 UI 区域就在扩展的addOptions中实现对应的扩展函数。编辑器扩展文档 定义了ExtensionOptions支持五个扩展区域函数作用区域getToolbarItems顶部工具栏getCommandMenuItemsSlash Command 斜杠命令菜单getBubbleMenu选中文本/块后的悬浮菜单getToolboxItems工具箱插入表格、插入组件等getDraggableMenuItems拖拽手柄菜单转换、复制、删除等每个函数都接收{ editor }返回单个项或数组其中priority数值越小越靠前。完整示例带工具栏按钮和快捷键的扩展下面是一个同时接入顶部工具栏与快捷键注册表的示例引自 extension.md 的 2.1 节仅MyIcon需替换为你自己的图标组件import { defineHaloKeyboardShortcuts, Extension, ToolbarItem, type Editor, type ExtensionOptions, } from halo-dev/richtext-editor; import { markRaw } from vue; import MyIcon from ./MyIcon.vue; const shortcutId plugin.example.insertGreeting; function insertGreeting(editor: Editor) { return editor.chain().focus().insertContent(Hello Halo).run(); } export const ExtensionExample Extension.createExtensionOptions({ name: exampleShortcut, addKeyboardShortcuts() { return defineHaloKeyboardShortcuts(this, [ { id: shortcutId, keys: [Mod-Alt-g], label: 插入问候语, category: general, priority: 100, command: () insertGreeting(this.editor), }, ]); }, addOptions() { return { ...this.parent?.(), getToolbarItems({ editor }: { editor: Editor }) { return { priority: 100, component: markRaw(ToolbarItem), props: { editor, isActive: false, icon: markRaw(MyIcon), title: 插入问候语, shortcutId, action: () insertGreeting(editor), }, }; }, }; }, });然后按第一步的方式把它返回给扩展点default:editor:extension:create: () [ExtensionExample]。快捷键部分的关键约定id必须包含插件标识的命名空间如plugin.example.insertGreeting注册表不会自动为重复 ID 加命名空间。keys使用 Tiptap 快捷键格式Mod表示 macOS 的Command/ Windows 与 Linux 的Control。命令处理成功时返回trueProseMirror 会阻止浏览器默认行为未处理时返回false。把同一个id传给工具栏组件的shortcutId后tooltip 会展示快捷键键盘快捷键侧边栏会展示操作说明。添加按键前先检查 Halo 默认快捷键、Tiptap 默认快捷键和浏览器常用快捷键。如果继承的父扩展已实现相同按键可以只补描述、省略command开发环境会对缺少实际命令的定义输出警告且不注册该描述。结果验证加载插件并打开使用默认编辑器的内容编辑页后可以从三个层面确认注入生效UI 层面实现了getToolbarItems的按钮出现在顶部工具栏实现了getCommandMenuItems的指令出现在 Slash Command 菜单中注册过的快捷键出现在键盘快捷键侧边栏。运行时清单层面runtime-metadata 文档 提供了createHaloEditorManifest(editor)在编辑器创建完成后同步生成运行期快照包含当前 Editor 实例注册的全部 Node 和 Mark。如果你的扩展是自定义节点确认该节点出现在 Manifest 中即可说明 schema 注册成功import { createHaloEditorManifest, type HaloEditorManifest, type VueEditor, } from halo-dev/richtext-editor; function editorManifest(editor: VueEditor): HaloEditorManifest { return createHaloEditorManifest(editor); }交互层面按下注册的快捷键或点击工具栏按钮观察命令是否按预期执行例如示例中会在光标处插入 Hello Halo。边界与常见混淆与editor:create的区别editor:create注册的是整套自定义编辑器需要name、displayName、component、rawType且组件必须实现v-model:raw和v-model:content两个绑定见 编辑器集成扩展点文档。本文的default:editor:extension:create只向内置默认编辑器追加 Tiptap 扩展不替换编辑器本身。二者面向不同需求不要混用。节点缩进自定义 block 节点只要属于blockgroup 且不属于listgroup就会自动获得块缩进属性与快捷键特殊行为可用haloEditorIndentation调整详见 extension.md 第 7 节。元数据声明如果扩展需要向运行期 Manifest 提供 AI 使用说明可在 Node/Mark/Extension 上实现addHaloEditorMetadata声明抛错或字段无效时生成器保留其他有效数据生产环境不会因此阻止编辑器运行见 runtime-metadata.md。相关文档默认编辑器扩展点、编辑器扩展说明、运行期元数据、默认编辑器实现。【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考