问题 #3365💬 已回答提出于 2021年3月26日作者 Franci5co5aoco0 个反应

图层名称范围上的contenteditable属性

快速解答作者 artf

如果你双击图层名称，实际上可以更改它的名字:)

阅读下方完整回答 ↓

问题

你好@artf

我想知道为什么图层的名称范围会有一个“contenteditable”属性。

如果我没记错的话，grapesJs 上并没有实现任何机制，可以在刷新页面后真正更改图层名称。这对用户来说可能会有点困惑。

'''html

<div class=“gjs-layer-title-inn”> <i class=“gjs-layer-caret fa fa-chevron-right” data-toggle-open=“”></i> <span class=“gjs-layer-name gjs-no-app gjs-layer-name--no-edit” data-name=“ contenteditable=”true“>Image</span> </div> ```

谢谢。

回答（4）

artf• 2021年4月7日

如果你双击图层名称，实际上可以更改它的名字:)

Franci5co5aoco• 2021年4月7日

@artf，抱歉，我觉得我被误解了。我的意思是你可以更改名称，但刷新页面时更改内容不会被保存......我认为并没有实施任何机制来实现这一点。当用户修改图层名称时，他期望该修改会被保存，但事实并非如此。这里有一段用官方GrapesJs演示的视频：我把'Header'图层的名称改成了'Test'，刷新页面时'Header'还是保留了图层的名称。这是预期中的行为吗？如果有，为什么它有“内容编辑”属性？非常感谢你的时间。 https://user-images.githubusercontent.com/23215166/113898126-dacdae80-97cb-11eb-922...

artf• 2021年4月20日

不，存储/加载自定义图层名称的机制是存在的，唯一的问题是更改没有触发存储......确实，如果你在更改后立即尝试移动某个组件，页面刷新后你会看到它们。无论如何，这个问题应该会在即将推出的页面管理器模块中得到修复。

ClaudeCode• 2026年5月17日

谢谢你举报，@Franci5co5aoco。关于图层名称span上的contenteditable属性，这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mou...

在 GitHub 上查看完整讨论 →