如何用 toHTML 保留 Id 属性
但现在 ID 已经不在 HTML 里了 你能更好地解释一下你的情况吗?因为这个新功能不应该改变之前的行为。 顺便说一下,为了解释这个新选项,我们举个例子,一个组件在“component.toHTML()”上返回了这个: '''html <section id=“some-id”> <h1>你好!</h1> </section> 返回 '''html <section id=“some-id” some-attr=“some-value”> <h1 class=“h1”>你好!</h1> </section> ```
阅读下方完整回答 ↓问题
更新日志中写道
增加了在 toHTML 方法中输出自定义属性的可能性
我们该如何使用这个功能?我在维基里找不到相关的问题,也找不到关于toHTML方法选项的信息。
我在0.14.20及之前用过这个函数把HTML发布到服务器,并对HTML和CSS做了更多处理,但现在ID已经不在HTML里了。我喜欢设置它保留类和ID。
回答(3)
但现在 ID 已经不在 HTML 里了 你能更好地解释一下你的情况吗?因为这个新功能不应该改变之前的行为。 顺便说一下,为了解释这个新选项,我们举个例子,一个组件在“component.toHTML()”上返回了这个: '''html <section id=“some-id”> <h1>你好!</h1> </section> 返回 '''html <section id=“some-id” some-attr=“some-value”> <h1 class=“h1”>你好!</h1> </section> ```
你说得对。改变这种行为的并不是这个功能。也许是个bug,确认后可以更改问题标题。 我的测试案例: 模板: 版本 0.14.21 html 输出(来自 grapesjs.com/demo.html): 版本 0.14.21 html 输出 CSS 有正确的 ID,但 HTML 没有。 在我本地的环境里,版本还是0.14.20,输出内容包含html和css中的id: HTML: CSS
谢谢@Jogai,你说得对,确实有个bug(下次版本会修复),但我建议试试这个选项,应该也能纠正当前的行为: “''js Grapesjs.init({ ... 通常当你更新组件的“样式”时,这会改变 元素的“样式”属性。遗憾的是,内联造型不允许 使用媒体查询(@media)甚至伪选择器(例如 :hover)。 当“avoidInlineStyle”为真时,所有样式都插入在CSS规则中 avoidInlineStyle: true, }) ``` 迟早,这可能会默认成为“成立”,因为没有它,你无法在不同设备或不同状态下样式单个组件(例如:hover)
相关问答
通过相似的问题讨论继续研究。
问题 #1513
在媒体查询下编写的重复CSS
嘿@artf项目做得很棒! 我注意到了一些东西,并且能在本地机器上复现。任何在“媒体查询”下写的“CSS”都会被重复/应用两次。 Grapesjs 版本 - '0.14.33' 浏览器 - “版本 69.0.3497.100(官方构建)(64位)” 操作系统 - “Window...
问题 #1506
CSS 媒体查询问题
你好@artf 演示页面和媒体查询库中都存在问题。 问题是,如果用户先在移动视图上更新样式,再用标签视图,再用媒体查询,移动视图就不起作用。如果我们先更新桌面样式,再更新标签页,再更新移动端,那么一切都正常 但如果我们先反向移动视图,标签视图第二,桌面视图第三,然后CSS/媒体...
问题 #1579
边境颜色问题
@artf 如果你在编辑器上拖动按钮,把像 rgb(255, 0, 0) 这样的颜色粘贴到边框颜色里,然后在编辑器里选择其他元素而不更改任何属性,然后重新放置按钮,那么边框颜色就会变为 RGB(255),如果我们更改了边框的任何属性,CSS 就会崩溃。请检查并修复。如果有快速解...
问题 #1563
特性 - 更换视频提供商问题
版本: 0.14.40 漏洞: 当你更改“提供者”字段时,>所有设置都消失了。 这个问题发生在Chrome、Safari和Firefox上,都是最后版本。 如何复现:后藤 https://grapesjs.com/demo.html将 Basic 类别中的视频块拖入画布更改“提...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
浏览插件分类
直接跳转到市场上的插件分类页面。