GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#30912020年10月24日作者 NeekoGta3 个回答

4 个反应

如何将 grapesjs 与静态 HTML 结合使用

提前为我的英语道歉。我正在用Laravel和Vue.js开发一个CMS。我想用 grapesjs 来编辑页面内容，但带有静态HTML元素（比如导航栏、页脚等）。这是我想要的简单图片。 ![grapesjs问题]（https://user-images.githubusercontent.com/70320232/97079273-d3866000-15f2-11eb-84e3-3248f065394e.jpg）我翻阅了文档试图找到答案，做了好几个测试，但都没能成功。谢谢！

artf

实现相同效果的方法有很多，所以我建议你看看这些例子：确定可编辑的部分，忽略其他所有内容 https://jsfiddle.net/arturarseniev/aku70f5w/ 识别占位组件并忽略它们 https://jsfiddle.net/arturarseniev/w6mvq4bx/

NeekoGta

我通过将“fromElement： true”和这个：https://github.com/artf/grapesjs/issues/336#issuecomment-332205060 结合找到了解决方案但我必须用“type： 'local'”，不能再用“urlStore”和“urlLoad”了。我得自己实现存档/加载。

NeekoGta

@akkivaghasiya5 两年前是的 😆 但今天再试一次，似乎没有效果。 “fromElement”现在似乎已经被弃用了。 @artf 你能举个例子，说明我们如何实现这一点吗？谢谢！

查看详情

#30892020年10月22日作者 theSC0RP2 个回答

0 个反应

响应式设计的问题。

切换到移动端时，屏幕上的元素只是被压缩了。（我正在使用 [grapesjs-blocks-basic]（https://github.com/artf/grapesjs-blocks-basic）插件）在下面的截图中，a 有一列有两个单元格。我预计它会在移动视图<br/>中转换成行 ![截图（179）]（https://user-images.githubusercontent.com/30771519/96841881-f76a6a00-1469-11eb-9bfe-56cf76a7eb05.png） <hr/> ![截图（178）]（https://user-images.githubusercontent.com/307...

Ju99ernaut

试试用[flexGrid]（https://github.com/artf/grapesjs/issues/3085#issuecomment-715230559）

theSC0RP

@Ju99ernaut 非常感谢。使用flexGrid解决了这个问题。

查看详情

#30882020年10月22日作者 dharmatv1 个回答

0 个反应

BUG：如何在拖放后查看样式管理器属性

版本： 0.15.9 你能重现演示中的bug吗？是的预期的行为是什么？（在通讯插件中）点击构建器部分中需要显示与该组件相关的样式管理器属性的组件目前的行为是什么？点击组件后（在通讯插件中）没有显示样式管理器属性（https://drive.google.com/file/d/1du5A0j-8D37109UqUaJv3NAW-jyl9pAy/view）你能附上截图、截图或实时演示吗？是的（https://drive.google.com/file/d/1YNNEYdttOlvkQhyVPjD7XDGx4lwKc_eV/view）你能帮帮我吗，任何人

artf

这不是核心功能，网站预设就是这样实现的 https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/panels/index.js#L108-L118

查看详情

#30872020年10月21日作者 tomek-artneo1 个回答

0 个反应

PL 语言支持

我想添加波兰语支持。公关应该很快就准备好了。 GrapesJS干得漂亮！👍

artf

谢谢@tomek-artneo 很乐意合并公关:)

查看详情

#30862020年10月21日作者 dharmatv3 个回答

1 个反应

BUG：如何根据组件限制样式管理器属性

版本： 0.15.9 预期的行为是什么？每当任何组件拖放到构建器部分时，我都需要对相关样式的属性进行自定义。比如说把链接组件拖放到构建器部分，然后点击它，它会显示以下样式属性（请查看链接） https://snipboard.io/cCFUOD.jpg 但我需要自定义它，比如我想展示的维度，我想要区分开来。目前的行为是什么？显示所有样式管理器属性你能附上截图、截图或实时演示吗？是的我看过文档，但没得到任何解决方案。你们能帮帮我吗？

MartinPutz

@dharmatv 你好！这不是 bug，你可以通过定义组件的可样式属性来实现。 “''js 编辑。DomComponents.addType（'customComp'， { 型号：{ 默认值：{ 标签名称：“customComp”，可造型：['color'] } }, 浏览量：{ 标签名称：“div”， ... } }); ``` 演示：拖拽最后一个方块，你会看到只有（文本）颜色可以更改。 https://jsfiddle.net/MartinPutz/o376qs...

dharmatv

嗨，@MartinPutz 谢谢你的回复我明白。我的需求是只需要 Grapesjs 组件不能是自定义组件我没说抱歉

artf

你可以使用数据属性 '<div data-gjs-stylable=“['color']”></div>'

查看详情

#30852020年10月21日作者 theSC0RP3 个回答

6 个反应

多列布局中元素定位的问题

如何控制列中单元格中元素的位置？左侧是地图元素，右侧是文本和图像。如下面的截图所示，右侧的元素位于地图之后。 ![截图（175）]（https://user-images.githubusercontent.com/30771519/96684561-6926b300-1399-11eb-9937-ec8af70277f0.png）类似的问题也存在于[这个]（https://codepen.io/artf/pen/MQpZPj）codepen（Grapesjs Custom UI由@artf）中。 ![截图（177）]（https://user-images.githubusercontent.com/30771519/9668...

Ju99ernaut

你可以把这个添加到'grapesjs.init'里的'pluginOpts'里： “''js const editor = Grapesjs.init（{ // ... pluginsOpts： { “GJS-Blocks-Basic”： { stylePrefix： ''， // no gjs- 前缀 flexGrid：1 // 用flexbox代替表格 } }, // ... }); ``` 这可能也能解决你之前的对齐问题，对响应式设计更有利

MartinPutz

@theSC0RP 这其实并不是GrapesJS本身的问题。GrapesJS 中的单元格有 “''CSS display：table-cell; 参见 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 所以你可以选择自动应用到自定义组件上，或者为这个设置创建一个自定义样式属性，方便更改。表格布局中可能还有其他对齐物品的方法。或者，你也可以创建自定义布局组件，按你的需求操作。

theSC0RP

@MartinPutz 谢谢你的回答。我该如何在单元格上创建并应用自定义样式属性？我用的是 [grapesjs-blocks-basic]（https://github.com/artf/grapesjs-blocks-basic）插件，所以这个单元格的类名是 'gjs-cell'。我尝试在我的styles文件中添加该类的推荐属性，但问题依旧存在。

查看详情

#30832020年10月20日作者 Joshmamroud3 个回答

6 个反应

feature

：高亮投放区

你好@artf，你建议如何根据可拖拽和可丢弃规则，高亮画布上选中的方块可以丢入的组件？换句话说，当用户开始从块管理器拖拽方块时，我想高亮（添加边框或内嵌框阴影）画布上可以放置的组件。这并不是为了替代掉落指示器（不确定你叫什么名字），它在拖曳时显示方块的位置，而是用来补充它。这里有我想做的一个示例： ![第3帧]（https://user-images.githubusercontent.com/5224187/96642254-e4ce2480-12f3-11eb-917b-059b9236872a.png）任何帮助都将不胜感激。谢谢！

artf

随着[Canvas Spots]（https://grapesjs.com/docs/modules/Canvas.html#canvas-spots）的推出，我认为这个功能请求可以被视为完成。这里有一个简短的[演示示例]（https://jsfiddle.net/artur_arseniev/uvd8tgj6/） https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b...

artf

我认为，目前实现这一点并不容易。Sorter模块相当老旧且杂乱，我需要重构它才能支持这些功能（当然，我很乐意有这个功能）。很遗憾，目前还没有这种东西的预计时间：/

kerryj89

我刚才在想这个。我认为这是自然的演变，也是必要的，当你可以设定某样东西可丢弃的界限时。

查看详情

#30822020年10月20日作者 rukavina3 个回答

6 个反应

需要更多信息

XSS 在 Live Preview 中的漏洞

版本： 0.16.22 你能重现演示中的bug吗？ [x] 是的步骤：点击导入HTML插入 '<img src=“anyimagesource.gif” onload =“alert（1）”/>'JS将被处决在iframe上设置合适的“沙盒”属性或许能缓解这个问题。

artf

如果你用 GrapesJS 并允许插入自定义 HTML，是的，Self-XSS 是可行的。不幸的是，有几个问题让我无法正确修复我需要访问iframe的DOM来添加或更新内部组件，所以编辑器没有'sandbox=“allow-same-origin”就无法工作。在编辑器中运行 JS 是它的一个功能（Components with JS），所以要让它们正常工作，我还需要“允许脚本”同时拥有“允许同源”和“允许脚本”几乎就像不使用“沙盒”一样，因为 iframe 能够访问 co...

rukavina

你说得对，我们以为'sandbox=“allow-same-origin”就能解决，但'allow-scripts'也需要，这样就等于根本不用沙盒了。不过，也许有用的是，提供一种方式让 Grapejs 用户能够以某种方式控制 iframe 画布的属性——这样他们就能承担起责任，控制沙盒值或其他属性。谢谢！

blinkybill

如果你使用内容安全策略的HTTP头，可以绕过很多类似的XSS问题。但是GrapesJS目前有一个问题，就是它使用underscore.js，其中包含一个使用“eval”的函数，所以你无法让CSP头达到应有的安全水平

查看详情

#30812020年10月19日作者 maryia-kabash3 个回答

3 个反应

缺陷

BUG：样式管理器 setTarget 无法正常工作

版本： 0.16.22 期望的行为是什么？ setTarget 允许将 CSS 规则样式与所选组件不同描述这个bug 调用 setTarget 方法时，样式管理器仍然会选中一个组件作为样式目标当前行为是什么？ setTarget 不会更新 this.propTarget.model（而是更新 this.propTarget.targets）。请对比文件“style_manager\view\SectorsView.js”：版本 0.14.62 https://prnt.sc/v28tc2 版本 0.16.22 https://prnt.sc/v28ttv

artf

谢谢@maryia-kabash找到了问题，下次版本会修复！

maryia-kabash

你好，@artf！我有个关于这个修复的问题——setTarget现在能正确更新类部分的类，但样式管理器并不能反映实际样式。请参见——https://prnt.sc/vfzuvv 也许这些事件可以触发，用来更新样式管理器中的数值？

artf

感谢你的报告和建议，Maryia。修复将在下一个版本中发布（我希望明天发布）

查看详情

#30792020年10月19日作者 gstucki2 个回答

0 个反应

需要更多信息