问题 #913💬 已回答提出于 2018年2月28日作者 richardabear0 个反应

使用样式标签代替CSS

快速解答作者 ryandeba

你好@Owchzzz, GrapesJS 的核心似乎已经内置了组件不会带有样式标签——参见[这个例子](https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L697),其中样式标签被明确移除了。我不确定修改这个行为是否能完全解决你的使用场景,但你可以先用以下代码覆盖它: 你可能希望这些代码在内容尚未导入编辑器之前运行,所以最好放进插件里。如果你做了这些还没解决,告诉我具体是什么问题,我可以再帮你查查。

阅读下方完整回答 ↓

问题

你好,

我一直在查看dom_components内部,但似乎没弄明白如何手动覆盖样式部分。

我需要一个方法让组件能够将所有新样式保存到样式标签中,而不是实际的 CSS 类。(试试移动一个用强制 CSS 样式化的组件),这样所有样式就会被移除。

希望你能帮忙, 此致敬礼, 理查德

回答(3)

ryandeba2018年3月8日

你好@Owchzzz, GrapesJS 的核心似乎已经内置了组件不会带有样式标签——参见[这个例子](https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L697),其中样式标签被明确移除了。我不确定修改这个行为是否能完全解决你的使用场景,但你可以先用以下代码覆盖它: 你可能希望这些代码在内容尚未导入编辑器之前运行,所以最好放进插件里。如果你做了这些还没解决,告诉我具体是什么问题,我可以再帮你查查。

Amir28282019年8月28日

那么你有没有找到一个完整的解决方案,保持样式标签不变?

amenk2021年4月17日

@ryandeba的解决方案似乎只影响了像“<div style=”...“>”这样的内联样式属性的使用。(但对我来说,这些也没有被过滤掉,除非覆盖了那个原型。我们遇到的问题是

<style>
...
</style>

被过滤掉了,不确定楼主是否也有同样的问题

相关问答

通过相似的问题讨论继续研究。

问题 #6685

自定义组件样式在删除和重新添加后不会被应用

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v143.0.7499.193 可复制演示链接 https://codesandbox.io/p/sandbox/2l3887 描述一下那个虫子 如何复现这个漏洞? 打开页面...

4 个回答更新于 2026年2月18日

问题 #3454

RTE 插入链接不会更新 DOM

版本: "0.17.3" 你能重现演示中的bug吗?[X] 是的[ ] 不 预期的行为是什么? 使用默认RTE插入链接后,链接立即可在设置中进一步编辑,即设置HREF和目标 详细描述那个漏洞 在选择默认RTE的文本并将其转换为链接后,文本会被正确地包裹在<a>标签中,但直到取消...

3 个回答更新于 2022年4月8日

问题 #6152

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么?...

4 个回答更新于 2024年10月9日

问题 #5990

当你删除组件时,组件间的重复类也会被删除。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 126.0.6478.127(Windows) 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞?将第1节添加到画...

4 个回答更新于 2024年7月5日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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