GrapesJS 问题

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

找到 3,464 个问题

#35692021年6月26日作者 sktlmarat1 个回答
0 个反应

当子组件被删除时,移除包装器

嗨! 我创建了一个DOM组件 我在想,删除子文本组件时是否可以删除 div 封装器。我试着用拆掉的钩子来做,但没能找到正确的解决办法。 谢谢!

ClaudeCode

谢谢你举报,@sktlmarat。 感谢你分享关于删除子组件时移除包装器的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优先排序修复。Grape...

#35652021年6月24日作者 Ubanna2 个回答
0 个反应

在 React 中为多页面管理器定义

你好,请问在 React 应用中实现多页面管理器的最佳方式是什么? 我成功实现过,没有页面管理器,比如这样: 对于页面管理器的实现,我尝试了以下方法: 在这里,页面管理器的定义不明确。 非常感谢任何帮助。 谢谢

artf

我觉得你只是用了旧版的GrapesJS

ClaudeCode

谢谢你举报,@Ubanna。 关于Undefined for multiple page manager, in react,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change'...

#35642021年6月24日作者 theSC0RP4 个回答
0 个反应

无法刷新iframe

0.17.19 你能重现演示中的bug吗? 是的 预期的行为是什么? 我之前问过一个关于iframe刷新(#3413)的问题。[提案的解决方案](https://github.com/artf/grapesjs/issues/3413#issuecomment-831892231)在该版本(0.17.3)中是正常工作的,运行代码后,iframe应该会刷新,画布也会显示出已有的组件和样式。 详细描述那个漏洞 我在控制台第97行出现错误,显示“无法读取未ComponentView.js定义的属性'移除'” 目前的行为是什么? 在控制台运行代码后,画布不再可见,而上述错误在控制台上依然存在。 你能附上截图、截屏或实时演示吗?* 截图*...

artf

我需要确认他为什么还在试图移除那个框架,但现在,直接跳过这句“frameView.remove()”吧。

theSC0RP

@artf。谢谢。这方法只做一次就有效。 如果我在画布里做点点击,然后再运行'frameWrapView.render();',又会报错。截图和视频附在下方。 <hr> https://user-images.githubusercontent.com/30771519/123492864-5ce5aa80-d638-11eb-984e-1807614a3bfb.mp4 ![截图来自2021-06-26 04-37-24](https://user-images.githu...

artf

我会尝试在下一个版本修复,但目前你需要在“frameWrapView.render()”之前取消选中组件,渲染后再重新选择组件

#35622021年6月23日作者 MarksEliel2 个回答
0 个反应

如何编辑数据属性

有没有可能编辑组件上的数据属性?

artf

是的,请查看文档并遵循问题模板

ClaudeCode

谢谢你举报,@MarksEliel。 关于如何编辑数据属性的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期...

#35612021年6月23日作者 AStoker4 个回答
0 个反应

专长:增强型暗影DOM支持

你想给GrapesJS添加什么? 更好的 Shadow DOM 支持,允许开发者在 Shadow 元素中渲染 GrapesJS,而无需在配置中专门传递元素而非选择器。 详细描述你的功能需求详细 当前使用元素选择器时,GrapesJS 仅使用文档查询选择器。在渲染阴影DOM时,这不起作用,因为文档不是阴影根。我希望能够定义一个阴影根,这样GrapesJS所做的任何操作或需要的内容都包含在阴影根中。 在 ShadowDOM 中使用 GrapesJS 的示例:https://jsfiddle.net/theandybob/s9bnhw30/ 最新版本有替代方案吗?[ ] 是的(描述替代方案)[x] 不 这是否与某个问题有关?[ ] 是的...

artf

你好@AStoker我不太明白你举例的真正问题是什么(除了没有在你的阴影主导里加载GrapesJS风格之外)。如果你绑定了 shadowdom,显然你不能做这个“容器”:'#gjs'',但你仍然可以像示例中那样传递 HTMLElements,那问题出在哪里?

AStoker

问题是我必须在每个地方传递HTML元素,不能使用选择器。这写起来可能很麻烦,因为我现在必须用shadow Dom的查询选择器来处理每个面板、每个元素,任何我们连接到GrapesJS的内容。 此外,如果有容器的概念,将大大帮助隔离 GrapesJS 不干扰应用的其他部分。随着越来越多的应用使用组件和自定义元素,组件间的适当隔离变得非常重要。GrapesJS 会自动从 CDN 拉入 font-awesome(也是从 CDN 拉入)到页面根,这并不理想,因为很容易存在风格冲突。如...

AStoker

我更新了JSFiddle,这样你可以看到我们在Shadow DOM中获得样式需要做些什么。但不幸的是,GrapesJS 自动添加的 CSS 存在于正体上,这不仅污染了全局样式表,还因为 GrapesJS 在 Shadow DOM 内部而毫无意义。

#35602021年6月23日作者 hadeel944 个回答
2 个反应

自定义块样式 - grapesjs Angular

我刚接触葡萄JS,想用不同的风格来做拖拽的方块 例如图像块 1 - 当未被拖拽或悬停时,取样式A。 2- 当滑鼠采用样式B时。 3- 拖拽时,当它越过画布时,取出风格C。 有人能帮我解决这个问题吗? 谢谢 ![达什博拉德 – 12](https://user-images.githubusercontent.com/86350308/123074122-b45cfe00-d41f-11eb-9738-a7f53401c58e.png) ![达什博拉德 – 11](https://user-images.githubusercontent.com/86350308/123074131-b626c180-d41f-11eb-82b4-...

ronaldohoch

也许通过这些事件你能做到:https://grapesjs.com/docs/api/editor.html#blocks 或 https://grapesjs.com/docs/api/editor.html#canvas

artf

在这种情况下,可能只有完全自定义的块管理器界面(比如用你自己的块管理器组件在Angular中渲染)。这应该已经是可行的,但我更愿意花时间更新[Blocks](https://grapesjs.com/docs/modules/Blocks.html)文档,包含从零开始构建BlockManager UI所需的所有步骤和示例。

hadeel94

在这种情况下,可能只有完全自定义的块管理器界面(比如用你自己的块管理器组件在 Angular 中渲染)。这应该已经是可行的,但我更愿意花时间更新[Blocks](https://grapesjs.com/docs/modules/Blocks.html)文档,包含从零开始构建BlockManager UI所需的所有步骤和示例。 谢谢你的回复,我还有其他问题: 1- 我试着在画布里添加带有样式的 div,但它不能编辑,也不能拖拽,只能只读,这可能吗? 2- 我能否将RTE作为...

#35592021年6月22日作者 iabhiyaan3 个回答
0 个反应

Page.getMainComponent().view 在选择页面时显示未定义

你好,@artf, 我想获取所选页面的HTML元素。但使用以下代码时,会返回未定义的状态: “''js editor.on('page:select', page => { page.getMainComponent().view.el.querySelector('section'); 那个页面里有个section标签...... }); ```

artf

你好@iabhiyaan,当“page:select”触发时,画布内的iframe还没有加载,所以你需要等它们加载完后才能访问它的DOM。 “''js editor.on('page:select', page => { const frame = page.getMainFrame(); frame.once('loaded', () => { const rootEl = frame.getComponent().getEl(); console.log(rootEl....

iabhiyaan

谢谢你@artf。

ClaudeCode

谢谢你举报,@iabhiyaan。 感谢你分享关于page.getMainComponent().view在选择页面时显示未定义的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了...

#35582021年6月22日作者 aimeos4 个回答
2 个反应

FATE:支持内容-安全-政策

为了减少在“敌对”环境中(如SaaS平台)中使用编辑器时可能的攻击面,必须支持CSP。这也能防止类似的问题 https://github.com/artf/grapesjs/issues/3082 目前,唯一阻碍有效 CSP 规则的问题是 GrapesJS 代码中使用了“new Function()”,这需要 CSP 规则为“unsafe-eval”。 有没有其他实现方式?

artf

好的,那我会试着在下一个版本修复它。

artf

嗯,我不太确定具体怎么修复,你说“GrapesJS代码中是否使用新Function()”是什么意思?因为源代码里没有这个。

aimeos

后来发现它在dist文件里是因为underscore.js template()方法,它使用了“new Function()”。我认为这将使得在没有“不安全评估”的情况下替换或移除强制执行CSP的依赖变得困难。

#35572021年6月22日作者 acip4 个回答
0 个反应

升级——如何将旧模板更新到最新版本?

我有一些模板是用v0.14.5生成的。我该如何“升级”到最新版本?它们有附加的职业,我看到最新版本不再给元素添加职业了。 背景:我们使用定制组件,一些默认设置(例如可拖拽、可调整大小等、样式)已经更改。 如果需要更多细节,我可以提供。 感谢你带来的这个精彩项目!

artf

它们有附加的职业,我看到最新版本不再向元素添加职业了。 我不太明白你说的是什么,职业应该像以前一样导入。背景:我们使用定制组件,且一些默认设置(例如可拖拽、可调整大小等、样式)已更改。 如果你的自定义组件依赖于之前的默认属性,你只需要更新组件,但说实话,我甚至不记得任何核心组件有这样的改动。 请让我看看一些模板代码加载不良。

acip

嘿,谢谢你的快速回复。这是v0.14.5生成的模板 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb 看起来就是这样 https://ibb.co/Zz8qg2J 我们更改了一些自定义组件的默认属性和样式,并更改了dragMode='absolute'。其中一个问题是旧部件无法移动。 如果需要,我可以提供代码示例。

acip

我已经为现有模板设置了旧版本和新版本: https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html ![旧vsnew](https://user-images.githubusercontent.com/...

#35492021年6月19日作者 anlumo1 个回答
0 个反应

CreateCustomEvent 无法正确处理鼠标事件

版本: 0.17.4 / git master 详细描述那个漏洞** FrameView 在这里重新打包键盘和鼠标事件: https://github.com/artf/grapesjs/blob/07061ae1307fedf2a3b9bd585ce0cb30f653f112/src/canvas/view/FrameView.js#L389-L399 我认为原因与将iframe事件重定向到父帧事件有关。这本来没问题,但“createCustomEvent”函数看起来是这样的: https://github.com/artf/grapesjs/blob/07061ae1307fedf2a3b9bd585ce0cb30f653f1...

ClaudeCode

谢谢你举报,@anlumo。 createCustomEvent 无法正确处理鼠标事件的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于...

浏览所有主题