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

GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 3,464 个问题

#20652019年6月5日作者 Amir28283 个回答
0 个反应

几个问题

首先， 向所有参与的人点赞，项目非常棒。 我有几个问题：我如何遍历所有组件并更改画布上的内容。 我想实现一个查找并替换函数，替换所有 画布内部的元素。有没有什么好方法可以编辑依赖J的物品，比如折叠的手风琴，甚至旋转木马元素？我想在 Canvas 上检测并触发手风琴事件，以便编辑隐藏内容。有没有办法找到带有特定事件监听器的物品，然后通过点击/键映射等方式激活它们？ 另一种选择是打开一个隐藏内容的模态进行编辑，通过模态进行编辑。 非常感谢大家的帮助 =）

Amir2828

好的，我解决了第一个问题。 我以前用 get components，递归迭代树。 完成后我用了 DomComponents.render（） 还在找关于第二个问题的方向

Amir2828

好的，我想我也解决了第二个问题。 我注入了Canvas JQuery脚本，使手风琴和滑块的行为如预期般正常。

Amitkumar85533

你好@Amir2828， 你能跟我说说手风琴吗？ 你能举个小例子吗？

查看详情
#20642019年6月4日作者 Moikapy2 个回答
0 个反应

GrapesJS 的启动与构建问题

我克隆、下载/解压，并借出到我分支上的上游预览更改，但不知为何，当我尝试构建时，他们在456个测试中失败，控制台也出现了这个错误。 ![grapes 错误]（https://user-images.githubusercontent.com/18318332/58892495-5506e680-86bc-11e9-9f82-784422821553.JPG）

verdverm

我也可以验证同样的测试结果，我在某处看到过一个关于如何让这些都通过的待办事项。

artf

@Moikapy好的，谢谢，看起来和#2044的问题一样 我关了，我们继续聊

查看详情
#20632019年6月3日作者 benvmatheson3 个回答
3 个反应

我可以禁用媒体查询吗？

有没有可能禁用媒体查询？ 例如，转动这个： '@media（最大宽度：331px）{ .image-block{ 位置：绝对; top：0; } .c976{ 宽度：331px; 高度：526像素; 位置：绝对; } } 接着说： '.image-block{ 位置：绝对; top：0; } .c976{ 宽度：331px; 高度：526像素; 位置：绝对; }

artf

是的，你可以用这个选项： https://github.com/artf/grapesjs/blob/60c1755c57da02b57988fbe0e1a0321a5395728c/src/editor/config/config.js#L90-L93

benvmatheson

我可以用程序删除这些，但有没有可能告诉 Grapes 不要向 CSS 添加媒体查询？

benvmatheson

我们需要允许在编辑时选择设备大小，但需要移除媒体查询。因为这有点特殊，我猜如果在设备预览模式下，媒体查询应该总是会被应用？

查看详情
#20612019年6月2日作者 froderf3 个回答
0 个反应
已过时

如何在画布末端放置一个组件。

我该如何把页脚放在画布的末端？ 我希望编辑器不允许在页脚下方放置方块/小部件。 示例

artf

你可以用类似的东西 “''js const footer = '<div style=“padding： 100px”>My footer</div>'; editor.getWrapper（）.getEl（）.insertAdjacentHTML（'afterEnd'， footer）; ```

froderf

@artf 我们有类似 removeAdjacentHTML（） 这样的东西吗？ 'editor.getWrapper（）.getEl（）.removeAdjacentHTML（'afterEnd'，页脚）;' 因为当我们使用时 每次重新加载窗口后，它都会不断重复。 -------------- 我正在寻找解决办法，但没找到:( 看起来像个bug？

artf

我们有类似 removeAdjacentHTML（） 这样的东西吗？ getEl（） 给你 HTMLElement 实例，所以 insertAdjacentHTML 是来自 DOM API，而不是 GrapesJS每次你重新加载窗口后，它都会不断重复。 ...你能制作一个可重复的演示吗？

查看详情
#20602019年6月1日作者 alikabeer321 个回答
0 个反应

如果我使用 editor.setStyle（css_text）;

我需要用从数据库收到的数据异步设置样式。但我手动写的CSS又被删除了。 “''js const cssComposer = 编辑器。Css作曲家; var SM = 编辑。选拔经理; var sel1 = sm.add（'simple-div'）; var rule = cssComposer.add（[sel1]）; 更新风格 rule.set（'style'， { 宽度：“100%”， 高度：“自动” 填充：'15px'， float：“左”， }); ``` 上述的 .simple-div 类不存在。如果我使用 setStyle（）

artf

使用 [setRule]（https://grapesjs.com/docs/api/css_composer.html#setrule） API

查看详情
#20592019年6月1日作者 adamwpe2 个回答
0 个反应

自定义块似乎未被选中

当你把自定义块添加到块管理器时，如果你通过内容对象传递它，它会出现，当选择时，它不会被选中（组件周围有蓝色框）： ![图片]（https://user-images.githubusercontent.com/49768920/58748534-344b5080-8472-11e9-9083-ac9bf580c31e.png） 我的代码示例如下： 示例：https://jsfiddle.net/v5k4jqfg/1/ 有没有办法显示被选中的蓝色框？

verdverm

我猜是配置值，虽然我刚接触 grapes ，还不知道答案...... ：[

artf

移除自定义标签 'tagName： 'doesnotappear_selected''

查看详情
#20572019年5月31日作者 alikabeer322 个回答
1 个反应

媒体查询不适用于我编写的自定义块

我写了一个简单的 div 块，就像这样 blockManager.add（'simple-div'， { 标签：“容器”， 内容：“<！––<div class=”simple-div“></div> ––>”“， 分类：“基础”， 属性：{ 标题：“简单盒子”， 类别：“FA方阵” } }); 但它完全没有响应。情况是这样的：我在桌面上把宽度设置为100%我切换到平板，把宽度调成50%我切回桌面，宽度依然是50% CSS 中也没有媒体查询 （媒体查询对图片正常使用） 我是不是漏掉了什么代码，能让它响应式？ 编辑 我刚意识到，样式是针对元素本身，而不是唯一ID/职业 我用以下代码为该元素赋予了唯一 ID var comps = 编...

alikabeer32

@alikabeer32我也遇到同样的问题。如果你解决了这个问题。你能在这里分享一下解决方案吗？谢谢 @umerrinayat我不记得我做了什么，但试试以下方法： 你需要定义 CSS 类并添加唯一的 ID “''js const cssComposer = 编辑器。Css作曲家; var SM = 编辑。选拔经理; var sel1 = sm.add（'simple-div'）; var rule = cssComposer.add（[sel1]）; 更新风格 rule.s...

umerrinayat

@alikabeer32我也遇到同样的问题。如果你解决了这个问题。你能在这里分享一下解决方案吗？谢谢

查看详情
#20562019年5月31日作者 Bhavana201 个回答
0 个反应

：自定义资产管理布局

你好， 我们正在尝试修改资产管理布局，以符合下面的要求。 要求：用户双击图片或添加新图片或打开资产管理器的其他选项时，应该会弹出选项提示：（Point1.png）从服务器上的现有列表中选择。（Point1AB.png）从Veeva Vault现有列表中选择。（Point1AB.png）上传新图片（Point1C.png）如果用户点击从现有列表中选择，资产管理器将只打开图片列表，并有一个返回按钮前往第一个点。在这种情况下，用户不会上传新图片。如果用户点击上传新图片，资产管理器将以上传选项（现有资产管理器）打开。这样用户就可以上传新的图片。 我们目前正在尝试使用可用的[样板]（https://github.com/artf/grape...

artf

对于这种自定义行为，我建议[用你自己的“资产管理]（https://github.com/artf/grapesjs/issues/491#issuecomment-342813486）面板替换

查看详情
#20552019年5月31日作者 zhangyanwei3 个回答
5 个反应

：如何正确拆卸组件？

我想通过程序移除这些组件，以下是我的代码片段。 “JavaScript const 命令 = 编辑器。Commands.get（'select-comp'） 编辑。Commands.extend（'select-comp'， { 覆盖这个私有方法，使工具栏有条件显示。 updateToolbar（mod） { const em = this.config.em const model = mod == em ？em.getSelected（） ： mod 如果（模型） { const toolbar = model.get（'toolbar'） ||model.get（“toolbar”） const filtered = too...

zhangyanwei

我试过在移除组件前调用“setSelected”方法，它有效！ 以下是更新后的代码： “JavaScript 命令：合并细胞 编辑。Commands.add（'table：table-cells-combine'， editor => { const em = editor.getModel（） const components = editor.getSelectedAll（） 保留第一个选中的组件，但移除其他组件。 const component = component...

zhangyanwei

@joselin-bizmatesph 我已经三年没碰它了，但我猜这和我遇到的情况很像。 从你发的快照来看，似乎你移除了错误的组件，可能需要再仔细检查保留组件的行跨和总长度。

bizmatesph-joselin-macayanan

@zhangyanwei 我也遇到了同样的问题，当我尝试从底部到顶部合并单元格时也会遇到一些问题。你已经解决这个问题了吗？ ![图片]（https://user-images.githubusercontent.com/106807762/183362393-c82bddb7-d834-4469-a036-5660dcb2a109.png） ![图片]（https://user-images.githubusercontent.com/106807762/183362439...

查看详情

浏览所有主题