# Umbraco Tiptap 状态栏扩展 ## 这是什么？ Tiptap 状态栏扩展将组件添加到富文本编辑器底部的状态栏。常见用途包括显示元素路径（面包屑导航）、字数、字符数或其他编辑器状态信息。与工具栏扩展不同，状态栏扩展纯粹是视觉/信息元素。 ## 文档在实施之前始终获取最新文档： * **扩展类型** : * **富文本编辑器**： * **Tiptap 文档**： * **基础** ： ## 相关技能 * **Tiptap 扩展**：用于添加编辑器功能 * 参考技能：`umbraco-tiptap-extension` * **Umbraco Element** ：用于实现状态栏元素 * 参考技能：`umbraco-umbraco-element` * **上下文 API** ：用于访问 Tiptap RTE 上下文 * 参考技能：`umbraco-context-api` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 显示什么信息？需要实时更新吗？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单（manifests.ts）从'@umbraco-cms/backoffice/extension-registry'导入类型{ManifestTiptapStatusbarExtension}； const 清单：ManifestTiptapStatusbarExtension = { 类型：'tiptapStatusbarExtension'，别名： 'My.TiptapStatusbar.WordCount', name: '字数统计状态栏', 元素：() => import('./word-count.statusbar-element.js'), forExtensions: [], // 可选：链接到特定的tiptap扩展元：{ 别名： 'wordCount', icon: '图标文档', label: '字数统计', }, }; 导出常量清单 = [清单]; ### 状态栏元素 (word-count.statusbar-element.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/tiptap' 导入 { UMB_TIPTAP_RTE_CONTEXT }； @customElement('我的字数统计状态栏') 导出类 WordCountStatusbarElement 扩展 UmbLitElement { @状态（）私人_wordCount = 0; @状态（）私有_charCount = 0; 构造函数（）{ 超级（）； this.consumeContext(UMB_TIPTAP_RTE_CONTEXT, (上下文) => { this.observe(context.editor, (编辑器) => { 如果（编辑器）{ // 编辑器内容更改时更新计数 editor.on('update', () => this.#updateCounts(editor)); // 初始计数 this.#updateCounts(编辑器); } }); }); } #updateCounts（编辑：任意）{ const text = editor.getText(); this._charCount = text.length; this._wordCount = text.trim() ？ text.trim().split(/\s+/).length : 0; } 渲染（）{ 返回 html` 字数：${this._wordCount} 字符数：${this._charCount} `; } 静态样式= css` ：主机{ 显示：柔性；间隙：var(--uui-size-space-4); 字体大小：var(--uui-type-small-size); 颜色：var(--uui-color-text-alt); } .count { 填充：0 var(--uui-size-space-2); } `; } 导出默认的WordCountStatusbarElement；声明全局{ 接口 HTMLElementTagNameMap { '我的字数统计状态栏'：WordCountStatusbarElement； } } ### 元素路径状态栏（面包屑导航）从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/tiptap' 导入 { UMB_TIPTAP_RTE_CONTEXT }； @customElement('我的元素路径状态栏') 导出类 ElementPathStatusbarElement 扩展 UmbLitElement { @状态（）私有_路径：字符串[] = []；构造函数（）{ 超级（）； this.consumeContext(UMB_TIPTAP_RTE_CONTEXT, (上下文) => { this.observe(context.editor, (编辑器) => { 如果（编辑器）{ editor.on('selectionUpdate', () => this.#updatePath(editor)); this.#updatePath(编辑器); } }); }); } #updatePath（编辑器：任何）{ const { $from } = editor.state.selection; 常量路径： string[] = []; for (让深度 = $from.depth; 深度 > 0; 深度--) { const 节点 = $from.node(深度); 路径.unshift(节点.类型.名称); } this._path = 路径； } #handleClick（索引：数字）{ // 可以实现对该元素的导航 console.log('导航至：', this._path[index]); } 渲染（）{ 返回 html` ${this._path.map( （名称，索引）=> html` ${索引 > 0 ? html`›`：''} ` )} `; } 静态样式= css` ：主机{ 显示：柔性；对齐项目：居中；字体大小：var(--uui-type-small-size); } 按钮{ 背景：无；边框：无；填充： var(--uui-size-space-1) var(--uui-size-space-2); 光标：指针；颜色：var(--uui-color-text-alt); } 按钮：悬停{ 颜色：var(--uui-color-text); 文本装饰：下划线； } .分隔符{ 颜色：var(--uui-color-border); 边距：0 var(--uui-size-space-1); } `; } 导出默认ElementPathStatusbarElement； ### 光标位置状态栏从 '@umbraco-cms/backoffice/external/lit' 导入 { html, css, customElement, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/tiptap' 导入 { UMB_TIPTAP_RTE_CONTEXT }； @customElement('我的光标位置状态栏') 导出类 CursorPositionStatusbarElement 扩展 UmbLitElement { @状态（）私人_line = 1; @状态（）私有_列= 1；构造函数（）{ 超级（）； this.consumeContext(UMB_TIPTAP_RTE_CONTEXT, (上下文) => { this.observe(context.editor, (编辑器) => { 如果（编辑器）{ editor.on('selectionUpdate', () => this.#updatePosition(editor)); } }); }); } #updatePosition（编辑：任何）{ const { from } = editor.state.selection; // 简化的行/列计算 const doc = editor.state.doc; 让 pos = 0; 让线= 1； doc.descendants((节点：任意，nodePos：数字) => { if (nodePos >= from) 返回 false; if (node.isBlock) line++; 返回真； }); this._line = 行； this._column = 来自 - pos； } 渲染（）{ 返回 html` 行${this._line}，行${this._column} `; } 静态样式= css` ：主机{ 字体大小：var(--uui-type-small-size); 颜色：var(--uui-color-text-alt); } `; } 导出默认 CursorPositionStatusbarElement； ## 元属性物业 |描述 ---|--- `别名` |状态栏项目的唯一标识符 `图标` |图标（在配置 UI 中使用） `标签` |显示名称 ## 访问编辑器上下文使用“UMB_TIPTAP_RTE_CONTEXT”访问 Tiptap 编辑器实例并订阅以下事件： * `update` \- 内容已更改 * `selectionUpdate` \- 光标/选择已更改 * `focus` / `blur` \- 焦点状态改变就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco Tiptap 状态栏扩展

包含技能