GrapesJS 如何自定义 Style Manager 自动生成的属性显示名称【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs在 GrapesJS 中集成 Style Manager 后选中组件会弹出一组样式属性面板但这些属性的显示名称是框架根据 CSS 属性名自动生成的例如margin-top会被显示为自动生成的名称无法直接控制文案。如果你希望面板上的属性名称符合团队命名规范或者配合多语言编辑器展示本地化文案就需要自定义这些显示名称。Style Manager 指南以 GrapesJS v0.18.1 及以上版本为准I18n 模块自 v0.15.9 起提供两个条件同时满足时可按本文操作。自动生成名称的来源I18n 指南的 Generated strings 一节说明并非所有界面字符串都写在en语言文件中有一部分是从id、name等字段生成的Style Manager 的属性名称就属于这种情况。查看源码 Property.ts 可以看到当属性定义中没有提供label/name时框架会用 CSS 属性名做首字母大写并把连字符替换为空格来生成名称Property API 的getLabel方法则优先查询 i18n 中的styleManager.properties.{id}文案查不到才回退到这个生成的名称。也就是说自定义显示名称有两条路径在属性定义中直接给label或通过 I18n 模块按属性的 id 覆盖生成文案。路径一在 sector 的 properties 定义中显式指定 label如果 Style Manager 的 sectors 是你自己配置的最直接的方式是在每个属性定义里写label。属性定义中label的用途是 Label to use in UI见 Property API例如grapesjs.init({ // ... styleManager: { sectors: [ { name: First sector, properties: [ { // Default options // id: padding, // The id of the property, if missing, will be the same as property value type: number, label: Padding, // Label for the property property: padding, // CSS property to change default: 0, // Default value to display units: [px, %], min: 0, }, ], }, ], }, });对于内置属性你不需要重写完整定义只需用extend复用内置定义再追加自己的属性示例来自 Style Manager 指南properties: [ // Pass the built-in CSS property as a string width, min-width, // Extend the built-in property with your props { extend: max-width, units: [px, %], }, // If the property doesnt exist it will be converted to a base type unknown-property, // - { type: base, property: unknown-property } ],如果属性是在初始化之后才创建的可以在插件中用addBuiltIn补上label若属性已存在则扩展其定义const myPlugin (editor) { editor.StyleManager.addBuiltIn(new-prop, { type: number, label: New prop, }) }; grapesjs.init({ // ... plugins: [myPlugin], styleManager: { sectors: [ { name: My sector, properties: [ new-prop, ... ], }, ], }, })路径二通过 I18n 覆盖自动生成的名称当你不想逐个改属性定义例如直接使用了默认 sectors或属性数量很多可以走 I18n 模块。I18n 指南给出的场景正好是 change the auto-generated names for themarginpropertieseditor.I18n.addMessages({ en: { styleManager: { properties: { // The key is the property name (or id) margin-top: Top, margin-right: Right, margin-left: Left, margin-bottom: Bottom, }, }, }, });注意 key 是属性名或属性的 id属性没有显式指定id时id 默认与property值相同Style Manager 指南中的注释// By default the id is the same as its property name。I18n 指南建议把这类 API 调用包在插件里执行const myPlugin editor { editor.I18n.addMessages({ ... }); // ... } grapesjs.init({ // ... plugins: [myPlugin], });在grapesjs.init配置阶段做同样的事则使用i18n.messagesAdd选项在默认文案集上追加。Style Manager 指南的 I18n 一节给出的完整示例同时覆盖了 sector 名称、属性名称和下拉选项三类文案grapesjs.init({ styleManager: { sectors: [ { id: first-sector-id, // You can leave the name as a fallback in case the i18n definition is missing name: First sector, properties: [ width, { id: display-prop-id, // By default the id is the same as its property name label: Display, type: select, property: display, default: block, options: [ { id: block, label: Block }, { id: inline, label: Inline }, { id: none, label: None }, ], }, ], }, ], }, i18n: { // Use messagesAdd in order to extend the default set messagesAdd: { en: { styleManager: { sectors: { first-sector-id: First sector EN, }, properties: { width: Width EN, display-prop-id: Display EN, }, options: { display-prop-id: { block: Block EN, inline: Inline EN, none: None EN, }, }, }, }, }, });如果编辑器本身要支持多语言按 I18n 指南 导入对应语言包后上述styleManager.properties下的文案可以按语言分别定义。验证结果I18n 指南在同类示例中确认更新文案后 UI 会显示新的消息Even if the UI shows correctly the updated message...。实际验证时可以先确认属性定义再看界面// 检查某个内置属性定义是否存在返回定义对象或 null editor.StyleManager.getBuiltIn(width); // 获取全部可用的内置属性定义 editor.StyleManager.getBuiltInAll();取到属性对象后调用getLabel()可以核对文案取值顺序该方法带opts.locale参数默认true时优先返回 i18n 中的文案传getLabel({ locale: false })则返回属性定义中的原始label/name见 Property API。最后选中画布中的组件查看 Style Manager 面板属性名应显示为你配置的label或 I18n 文案。需要留意一点Style Manager 在没有选中组件时默认是隐藏的指南原文标注默认情况下未选中组件时 Style Manager 不显示所以验证界面效果前必须先选中至少一个组件。限制与边界路径一要求你能控制该属性的定义自定义 sector、extend内置属性或插件addBuiltIn对纯默认配置里不想逐个改的属性路径二按 id 覆盖更省事。I18n 路径的 key 必须与属性的 id 一致属性未指定id时以property值为准写错 key 会静默回退到自动生成的名称。属性定义中的name可保留为 i18n 文案缺失时的 fallbackStyle Manager 指南注释// You can leave the name as a fallback in case the i18n definition is missing因此两条路径可以同时使用而不冲突。自定义显示名称只改变 UI 文案不影响实际写入的 CSS 属性名property值。更多配置项可查 Style Manager 指南、I18n 指南 和 Style Manager API。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 GrapesJS 如何自定义 Style Manager 自动生成的属性显示名称？
GrapesJS 如何自定义 Style Manager 自动生成的属性显示名称【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs在 GrapesJS 中集成 Style Manager 后选中组件会弹出一组样式属性面板但这些属性的显示名称是框架根据 CSS 属性名自动生成的例如margin-top会被显示为自动生成的名称无法直接控制文案。如果你希望面板上的属性名称符合团队命名规范或者配合多语言编辑器展示本地化文案就需要自定义这些显示名称。Style Manager 指南以 GrapesJS v0.18.1 及以上版本为准I18n 模块自 v0.15.9 起提供两个条件同时满足时可按本文操作。自动生成名称的来源I18n 指南的 Generated strings 一节说明并非所有界面字符串都写在en语言文件中有一部分是从id、name等字段生成的Style Manager 的属性名称就属于这种情况。查看源码 Property.ts 可以看到当属性定义中没有提供label/name时框架会用 CSS 属性名做首字母大写并把连字符替换为空格来生成名称Property API 的getLabel方法则优先查询 i18n 中的styleManager.properties.{id}文案查不到才回退到这个生成的名称。也就是说自定义显示名称有两条路径在属性定义中直接给label或通过 I18n 模块按属性的 id 覆盖生成文案。路径一在 sector 的 properties 定义中显式指定 label如果 Style Manager 的 sectors 是你自己配置的最直接的方式是在每个属性定义里写label。属性定义中label的用途是 Label to use in UI见 Property API例如grapesjs.init({ // ... styleManager: { sectors: [ { name: First sector, properties: [ { // Default options // id: padding, // The id of the property, if missing, will be the same as property value type: number, label: Padding, // Label for the property property: padding, // CSS property to change default: 0, // Default value to display units: [px, %], min: 0, }, ], }, ], }, });对于内置属性你不需要重写完整定义只需用extend复用内置定义再追加自己的属性示例来自 Style Manager 指南properties: [ // Pass the built-in CSS property as a string width, min-width, // Extend the built-in property with your props { extend: max-width, units: [px, %], }, // If the property doesnt exist it will be converted to a base type unknown-property, // - { type: base, property: unknown-property } ],如果属性是在初始化之后才创建的可以在插件中用addBuiltIn补上label若属性已存在则扩展其定义const myPlugin (editor) { editor.StyleManager.addBuiltIn(new-prop, { type: number, label: New prop, }) }; grapesjs.init({ // ... plugins: [myPlugin], styleManager: { sectors: [ { name: My sector, properties: [ new-prop, ... ], }, ], }, })路径二通过 I18n 覆盖自动生成的名称当你不想逐个改属性定义例如直接使用了默认 sectors或属性数量很多可以走 I18n 模块。I18n 指南给出的场景正好是 change the auto-generated names for themarginpropertieseditor.I18n.addMessages({ en: { styleManager: { properties: { // The key is the property name (or id) margin-top: Top, margin-right: Right, margin-left: Left, margin-bottom: Bottom, }, }, }, });注意 key 是属性名或属性的 id属性没有显式指定id时id 默认与property值相同Style Manager 指南中的注释// By default the id is the same as its property name。I18n 指南建议把这类 API 调用包在插件里执行const myPlugin editor { editor.I18n.addMessages({ ... }); // ... } grapesjs.init({ // ... plugins: [myPlugin], });在grapesjs.init配置阶段做同样的事则使用i18n.messagesAdd选项在默认文案集上追加。Style Manager 指南的 I18n 一节给出的完整示例同时覆盖了 sector 名称、属性名称和下拉选项三类文案grapesjs.init({ styleManager: { sectors: [ { id: first-sector-id, // You can leave the name as a fallback in case the i18n definition is missing name: First sector, properties: [ width, { id: display-prop-id, // By default the id is the same as its property name label: Display, type: select, property: display, default: block, options: [ { id: block, label: Block }, { id: inline, label: Inline }, { id: none, label: None }, ], }, ], }, ], }, i18n: { // Use messagesAdd in order to extend the default set messagesAdd: { en: { styleManager: { sectors: { first-sector-id: First sector EN, }, properties: { width: Width EN, display-prop-id: Display EN, }, options: { display-prop-id: { block: Block EN, inline: Inline EN, none: None EN, }, }, }, }, }, });如果编辑器本身要支持多语言按 I18n 指南 导入对应语言包后上述styleManager.properties下的文案可以按语言分别定义。验证结果I18n 指南在同类示例中确认更新文案后 UI 会显示新的消息Even if the UI shows correctly the updated message...。实际验证时可以先确认属性定义再看界面// 检查某个内置属性定义是否存在返回定义对象或 null editor.StyleManager.getBuiltIn(width); // 获取全部可用的内置属性定义 editor.StyleManager.getBuiltInAll();取到属性对象后调用getLabel()可以核对文案取值顺序该方法带opts.locale参数默认true时优先返回 i18n 中的文案传getLabel({ locale: false })则返回属性定义中的原始label/name见 Property API。最后选中画布中的组件查看 Style Manager 面板属性名应显示为你配置的label或 I18n 文案。需要留意一点Style Manager 在没有选中组件时默认是隐藏的指南原文标注默认情况下未选中组件时 Style Manager 不显示所以验证界面效果前必须先选中至少一个组件。限制与边界路径一要求你能控制该属性的定义自定义 sector、extend内置属性或插件addBuiltIn对纯默认配置里不想逐个改的属性路径二按 id 覆盖更省事。I18n 路径的 key 必须与属性的 id 一致属性未指定id时以property值为准写错 key 会静默回退到自动生成的名称。属性定义中的name可保留为 i18n 文案缺失时的 fallbackStyle Manager 指南注释// You can leave the name as a fallback in case the i18n definition is missing因此两条路径可以同时使用而不冲突。自定义显示名称只改变 UI 文案不影响实际写入的 CSS 属性名property值。更多配置项可查 Style Manager 指南、I18n 指南 和 Style Manager API。【免费下载链接】grapesjsFree and Open source Web Builder Framework. Next generation tool for building templates without coding项目地址: https://gitcode.com/GitHub_Trending/gr/grapesjs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考