PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #2825💬 已回答提出于 2020年6月11日作者 Leozinho02 个反应

使用组件时,我该如何添加我的类CSS文件?

快速解答作者 RJCAM❤ 1

嗨,@Leozinho0 你可以这样做:

阅读下方完整回答 ↓

问题

我有这个组件:

编辑。BlockManager.add('rodape', { 唱片公司:'3 Colunas', 内容:{ 标签名称:“div”, 可拖拽:确实, 属性:{ 类: 'row' }, 风格:{ '展示':“flex”, 'justify-content': 'flex-start', '对齐物品':'拉伸', 'flex-wrap': 'nowrap', “填充”:“10像素”, }, 内容:《拉拉》 } });

我想使用类 ROW,但我该在哪里定义这个类? 当我把这个组件块拖入画布时,类的CSS甚至都没有加载。

回答(3)

RJCAM• 2020年6月11日

嗨,@Leozinho0 你可以这样做:

RJCAM• 2020年6月12日

其实,我给你的代码是有效的,想明白我的意思,试试这个:

  1. 把自定义组件放到 Canvas 里,正如你说的,它不会加载 css 的“.row” 风格
  2. 现在在画布中放置任意一列块,你会看到“.row” CSS 已被加载。

这是因为样式在块内部,只有在你把列块放入画布时才会渲染出来。 你可以在控制台打印时检查组件的HTML和CSS是否像我第一条评论里给你的代码那样制作。 “编辑。BlockManager.get(“column3”).attributes.content'

Leozinho0• 2020年6月11日

嗨。谢谢你的回答。 但这根本没用。

如果你在添加组件(例如:3列)时点击 https://grapesjs.com/demo.html 并导出html,你会看到它加载了.row和.cell类。

相关问答

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

问题 #1202

使用网页预设插件时类不匹配

大家好, 我用的是网站预设插件,但当我从演示页面拖动列 grapes 样式不同,在我的应用中样式也不同,具体如下。我是不是漏掉了什么? GrapesUI{ 盒子尺寸:边框盒; } 正体 { 优势:0; } 身体{ 背景图片:URL(无); 背景-重复:重复; 背景-位置:左上;...

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

问题 #1566

自定义方块的默认样式

你好,我正在用GrapesJS做Prestashop网站上的页面构建器。 这个想法是用自定义块设置默认模板存储在数据库中。商店和模板加载都正常。我的问题是,我只想使用我创建并添加到BlockManager中的自定义块,但使用默认CSS。我可以放 CSS,但默认如何设置这些块的媒...

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

问题 #6685

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

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

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

问题 #2177

如何创建包含 HTML 和 CSS 和 JavaScript 内容的块。

有人能给我演示一下如何用JavaScript和CSS样式创建块的代码示例吗? “''js 编辑。BlockManager.add('a_block', { 标签:“Sample Block”, 内容: '<style> .sampleclass{ 填充:10像素 15像素; }...

3 个回答更新于 2021年3月17日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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