问题 #1246💬 已回答提出于 2018年6月28日作者 Jogai0 个反应

如何用 toHTML 保留 Id 属性

快速解答作者 artf

但现在 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)

artf2018年6月30日

但现在 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> ```

Jogai2018年7月2日

你说得对。改变这种行为的并不是这个功能。也许是个bug,确认后可以更改问题标题。 我的测试案例: 模板: 版本 0.14.21 html 输出(来自 grapesjs.com/demo.html): 版本 0.14.21 html 输出 CSS 有正确的 ID,但 HTML 没有。 在我本地的环境里,版本还是0.14.20,输出内容包含html和css中的id: HTML: CSS

artf2018年7月5日

谢谢@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...

3 个回答更新于 2019年10月30日

问题 #1506

CSS 媒体查询问题

你好@artf 演示页面和媒体查询库中都存在问题。 问题是,如果用户先在移动视图上更新样式,再用标签视图,再用媒体查询,移动视图就不起作用。如果我们先更新桌面样式,再更新标签页,再更新移动端,那么一切都正常 但如果我们先反向移动视图,标签视图第二,桌面视图第三,然后CSS/媒体...

3 个回答更新于 2020年5月21日

问题 #1579

边境颜色问题

@artf 如果你在编辑器上拖动按钮,把像 rgb(255, 0, 0) 这样的颜色粘贴到边框颜色里,然后在编辑器里选择其他元素而不更改任何属性,然后重新放置按钮,那么边框颜色就会变为 RGB(255),如果我们更改了边框的任何属性,CSS 就会崩溃。请检查并修复。如果有快速解...

3 个回答更新于 2019年12月1日

问题 #1563

特性 - 更换视频提供商问题

版本: 0.14.40 漏洞: 当你更改“提供者”字段时,>所有设置都消失了。 这个问题发生在Chrome、Safari和Firefox上,都是最后版本。 如何复现:后藤 https://grapesjs.com/demo.html将 Basic 类别中的视频块拖入画布更改“提...

3 个回答更新于 2019年11月17日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。