# Umbraco 属性编辑器 UI ## 这是什么？属性编辑器 UI 是用户在 Umbraco 后台进行交互以输入和管理内容数据的可视化组件。它是属性编辑器的一半 - UI（客户端 TypeScript）与定义数据存储的架构（服务器端 C#）配对。 ## 文档在实施之前始终获取最新文档： * **主要文档**： * **教程**： * **配置** ： * **基础** ： * **扩展注册表**： ## 参考示例 Umbraco 源代码包含一个工作示例： **位置**：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/property-editor/` 此示例演示了带有配置的完整属性编辑器 UI 实现。研究生产模式。 ## 相关基础技能 * **Umbraco Element** ：使用 UmbElementMixin 实现 UI 元素时 * 参考技能：`umbraco-umbraco-element` * **状态管理** ：实现反应性值更新时 * 参考技能：`umbraco-state-management` * **本地化** ：为标签添加多语言支持时 * 参考技能：`umbraco-localization` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 什么数据类型？需要哪些 UI 组件？配置选项？ 3. **生成文件** \- 根据最新文档创建清单+元素 4. **解释** \- 显示创建的内容以及如何测试 ## 最小示例 ### 清单 (umbraco-package.json) > **警告：** 下面的 `propertyEditorSchemaAlias` 使用内置架构 `Umbraco.Plain.String`。如果您使用像“MyPackage.CustomSchema”这样的自定义别名，则服务器上必须有相应的 C#“DataEditor”，否则在创建数据类型时将收到 **404 错误**。 { "name": "我的属性编辑器", “扩展”：[ { “类型”：“propertyEditorUi”， "alias": "My.PropertyEditorUi.Custom", "name": "我的自定义编辑器", “元素”：“/App_Plugins/MyEditor/editor.js”， "elementName": "我的编辑器用户界面", “元”：{ "label": "我的自定义编辑器", "icon": "图标编辑", “组”：“共同”， "propertyEditorSchemaAlias": "Umbraco.Plain.String" } } ] } ### 元素实现 (editor.ts) 从 '@umbraco-cms/backoffice/external/lit' 导入 { LitElement, html, css, customElement, property }; 从 '@umbraco-cms/backoffice/element-api' 导入 { UmbElementMixin }；从 '@umbraco-cms/backoffice/event' 导入 { UmbChangeEvent }；从 '@umbraco-cms/backoffice/property-editor' 导入类型 { UmbPropertyEditorUiElement }； @customElement('我的编辑器用户界面') 导出默认类 MyEditorElement 扩展 UmbElementMixin(LitElement) 实现 UmbPropertyEditorUiElement { @property({ 类型：字符串 }) 公共价值=''； #onChange(e: 事件) { const input = e.target 作为 HTMLInputElement; this.value = 输入.value; this.dispatchEvent(new UmbChangeEvent()); } 渲染（）{ 返回 html` `; } 静态样式= css` ：主机{ 显示：块； } `; } 声明全局{ 接口 HTMLElementTagNameMap { 'my-editor-ui': MyEditorElement; } } ### 带配置从 '@umbraco-cms/backoffice/property-editor' 导入类型 { UmbPropertyEditorConfigCollection }； @customElement('我的编辑器用户界面') 导出默认类 MyEditorElement 扩展 UmbElementMixin(LitElement) 实现 UmbPropertyEditorUiElement { @property({ 类型：字符串 }) 公共价值=''； @状态（）私人_maxChars？：数字； @状态（）私人_占位符？：字符串； @property({ 属性: false }) 公共设置配置（配置：UmbPropertyEditorConfigCollection）{ this._maxChars = config.getValueByAlias('maxChars'); this._placeholder = config.getValueByAlias('placeholder'); } 渲染（）{ 返回 html` `; } } ### 清单中的配置 { “类型”：“propertyEditorUi”， "alias": "My.PropertyEditorUi.Custom", "name": "我的自定义编辑器", “元素”：“/App_Plugins/MyEditor/editor.js”， "elementName": "我的编辑器用户界面", “元”：{ "label": "我的自定义编辑器", "propertyEditorSchemaAlias": "Umbraco.Plain.String", “设置”：{ “属性”：[ { “别名”：“maxChars”， "label": "最大字符数", "propertyEditorUiAlias": "Umb.PropertyEditorUi.Integer" }, { “别名”：“占位符”， "label": "占位符文本", "propertyEditorUiAlias": "Umb.PropertyEditorUi.TextBox" } ], “默认数据”：[ {“别名”：“maxChars”，“值”：100 } ] } } } ## 内置架构别名（安全默认值）清单中的“propertyEditorSchemaAlias”必须引用**服务器**上存在的架构：部分|地点 |语言 ---|---|--- 属性编辑器 UI |客户|打字稿属性编辑器架构 |服务器| C# * **内置模式**（如下所列）始终可用 - 使用它们来满足简单的存储需求 * **自定义模式**需要 C# `DataEditor` 类 - 仅需要自定义验证/转换这些内置模式始终可用：架构别名 |商店 |使用案例 ---|---|--- `Umbraco.Plain.String` | `字符串` |简单文本值 `Umbraco.Integer` | `int` |数字、评级、计数 `Umbraco.Decimal` | `十进制` |价格、百分比 `Umbraco.Plain.Json` | `对象` |复杂的 JSON 数据 `Umbraco.DateTime` | `日期时间` |日期和时间 `Umbraco.TrueFalse` | `布尔` |切换、复选框 `Umbraco.TextBox` | `字符串` |带验证的文本框 `Umbraco.TextArea` | `字符串` |多行文本 ## 故障排除请参阅 [TROUBLESHOOTING.md]() 了解常见问题，包括： * 创建数据类型时出现404错误 * 值不与“Umbraco.Plain.Json”一起保留有关 UUI 组件问题（组合框、输入等），请参阅 [UUI-GOTCHAS.md]()。 * * * 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

Umbraco 属性编辑器 UI

包含技能