已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 220 个问题
🔍 canvas葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 无链接 描述一下那个虫子 你好， 我用的是 Grapsjs 和 React，到目前为止觉得非常有用，但我想把应用中创建的所有页面展示出来，以便在 Canvas 上预览，却找不到类似的选项或替代方案。你能帮我一下吗？行为准则 [X] 我同意遵守本项目的行为准则
stljeff1
我认为你需要自己做一个组件来显示多个页面并点击它们之间。 这里有我在这些论坛上找到的一个示例，展示了如何创建自己的页面管理器组件。https://codepen.io/artf/pen/XWpJQoY
artf
@shelendravashishtha2正确使用Bug Issues，如果有问题，请使用讨论区。
dali-97
你好，有人能帮忙吗？我需要一个能让我创建多custem页面的东西，比如Grapesjs，我需要它来做我的外交，谢谢
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 105.0.5195.125（官方构建）（x86_64） 可复制演示链接 https://codesandbox.io/s/grapesjs-grapesjs-mjml-react-bug-w7qtec?file=/src/index.js 描述一下那个虫子 如何复现这个漏洞？从一张空白画布开始尝试将“grapesjs-mjml”块编辑器组件拖到空白画布上。确认你无法登录，并收到此警告记录到控制台： ![图片]（https://user-images.githubusercontent.com/62859552/192033463-a0341e69-...
artf
谢谢你的报告，Drew，这似乎和iframe的标准模式有关。目前，为了解决这个问题，我建议通过移除文档类型切换到个性模式： “''js Grapesjs.init（{ // ... 画布：{ frameContent： ''， // 默认为 '<！DOCTYPE html>' }, }) ``` 我决定关闭这个问题，因为它其实和核心没什么关系，很快我会更新 mjml 插件，以正确支持标准模式。
ClaudeCode
谢谢你报告，@Drew-丹尼尔斯。 关于在0.19.4版本之后无法将MJML组件丢到空白画布上的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（...
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.101可复制演示链接 https://jsfiddle.net/7cLr0xt2/3/描述一下那个虫子 如何复现这个漏洞？ 不知为何，我无法在上面链接的小提琴里重现这个bug，因为第34行“selectedComponent.components（'<span liquid=”if contact.id“>jhbjhhgjj</span> <span liquid=”else“>qwewqeqwe</span>'）''并不能替换组件的内部组件，所以我只能分享一个项目中发生的情况视频，步骤如下：双击“Hello Worl...
artf
RTE在编辑时依赖于DOM内容，所以如果你故意用类似的程序删除它 “''js onRender（） { this.el.innerHTML = this.model.get（“displayedText”） }, ``` 编辑完成后，内部组件将被移除。
benryanwilliams
好的，谢谢@artf，这说得通。 然而，那些代码行，以及 必须在画布内渲染正确的选中状态（包括组件最初渲染时以及用户选择不同的“if”状态，从而改变“displayedText”）： https://user-images.githubusercontent.com/67364267/189854125-9544d34b-2f71-4b0c-872e-dbdfb2232fd9.mov 你能想到用RTE编辑后保留内部组件的方法吗？也许我可以把这些内部组件存储在“条件文本”组件...
benryanwilliams
我还需要做更多测试，但看起来我通过在创建/编辑组件时保存内部组件，然后使用'rte：disable' 钩子，如下，解决了这个问题： 这看起来有点老套，如果你能想到更好的方法，请告诉我。
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Firefox 104.0.1可复制演示链接 https://codesandbox.io/s/grapesjs-parsestyle-bug-13h771描述一下那个虫子 如何复现这个漏洞？创建一个带有“style”属性的自定义组件，在它的“model”中。在组件“model”init“函数中使用”this.addAttributes“。将该组件添加到编辑器中。 基本上，当我在组件“model”定义中有一个“style”属性时，使用'this.addAttributes'，我就遇到了这个问题。 我在v0.19.4时也遇到过同样的问题。 你可以在浏览器中...
Singwai
这表现得很正常。有两个类似的按键可以改变组件的样式。（“风格”和“风格”） “styles”会用CSS字符串，并一次性附加到最终有效载荷上。我通常会为组件定义一个特定的状态的默认CSS。 “style”会接收CSS哈希，并直接用ID附加到该特定组件上。 你可以导出 HTML，看看它们的表现。 以下是相关文件： ![图片]（https://user-images.githubusercontent.com/5863227/189698236-2a32d09d-3641-4c6...
artf
我猜“parseStyle 不是函数”指的是已经修正的这个：https://github.com/artf/grapesjs/pull/4520
ClaudeCode
谢谢你举报，@ahmafi。 关于parseStyle不是函数的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something cha...
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 105.0.5195.102（官方版本）（x86_64） 可复制演示链接 描述一下那个虫子 如何复现这个漏洞？创建一个新的自定义代码块，并添加一个iframe标签，比如“<iframe src=”http://localhost:8888/embed/shopping-list“></iframe> 预期的行为是什么？ 它在画布中插入一个 iframe。 目前的行为是什么？ 它会出错并失败 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 不 错误日志 行为准则 [X] 我同意遵守本项目的行为准则
artf
感谢你的报告，@rahul-辛格-bv 这个bug其实已经 https://github.com/artf/grapesjs/issues/4480 被报告并修复了，但遗憾的是修复还没发布 😞
ClaudeCode
谢谢你举报，@rahul-singh-bv。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在： 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本，可能已经解决了这个问题 如有稳定版，升级前先测试最新稳定版 如果漏洞非常严重，可以使用“npm audit fix --force”，但请务必彻底测试 理解风险： 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定...
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 勇敢 1.33.105 铬：96.0.4664.93 可复制演示链接 https://codesandbox.io/s/relaxed-mccarthy-v2e37w 描述一下那个虫子 如何复现这个漏洞？添加带有img或svg标签的组件类型将该组件添加到画布中 预期的行为是什么？ 只要加法必须无误 目前的行为是什么？ 它将会回归 “RangeError 最大呼叫堆栈大小已超过” 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement：...
artf
你好@salemkode基于[自定义组件处理]（https://grapesjs.com/docs/modules/Components.html#how-components-work），通过设置“isComponent”返回“true”且无条件，产生最大调用堆栈问题。 它会不断创建新组件，因为你也有“components”属性，但由于新类型在栈顶且总是返回“true”，它会一直引用自己。所以我建议你正确调整你的“isComponent”方法，或者干脆把它移除。
ClaudeCode
谢谢你举报，@salemkode。 关于RangeError最大呼叫堆栈大小超过的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 版本 104.0.5112.101（官方构建）（arm64）视频演示链接 https://d.pr/i/27EgH2描述一下那个虫子当我们调整带有“xyz”类的图片大小时，页面上所有同类元素也会被调整大小，因为编辑器会为这些类添加高度、宽度、CSS。但当我从图片中移除所有类时，编辑器会用 ID 来设置 CSS 的高度宽度。我正在编辑器中加载一个引导模板。 录音链接：https://d.pr/i/27EgH2 繁殖步骤：加载引导模板进行编辑。添加多个带有影子类的 div ex.（''<'div 类=''shadow'></div>'''）将一张图像放入带有...
DevMetwaly
https://grapesjs.com/docs/modules/Components.html#components-css组件优先的样式 默认情况下，当你在画布中选择组件并应用样式时，会对其现有的类进行更改。这会导致所有应用类别的组件发生变化。如果你只想对特定选定组件应用样式，就必须通过这种方式选择 componentFirst 策略。
FaisalShaikhHA
谢谢，@DevMetwaly有效，抱歉我错过了。
FaisalShaikhHA
你好，@artf，首先，这个框架非常棒，感谢你让它开源。 正如上面评论里描述的，我遇到了这个奇怪的问题，如果我做错了什么或者有解决办法，请告诉我，谢谢。
葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.79可复制演示链接 https://jsfiddle.net/gvrnw2c3/4/描述一下那个虫子 如何复现这个漏洞？ 我目前无法用 jsfiddle 重现这个 bug，这让我觉得可能是 Chrome 的问题，但我会继续尝试重现。 Within我的项目，如视频所示： 1）点击一个“条件文本”组件（我添加了的自定义组件类型） 2）点击“打开条件”按钮，然后在屏幕上出现的对话框中点击“应用” 3）将光标悬停在“条件文本”组件上 In JSFiddle（目前没有崩溃，但我会继续测试）： 1）点击“Hello World”文...
tyuterry
小提琴（vue）的复刻版 没有Vue我无法复制 [小说]（https://jsfiddle.net/6qp48xyn/） 重现问题的步骤：添加文本组件选择文本组件，然后点击底部的“转换为条件”按钮将鼠标悬停在条件文本组件上，然后它会冻结。 好像有什么东西总是在悬浮上一直触发 ![图片]（https://user-images.githubusercontent.com/30591406/184062993-73d84ef7-0c07-4832-bd7b-9ac6d3851a...
artf
谢谢大家，我其实通过在Vue里打包这个示例还原了它，但我不太清楚为什么会被困在这个循环里。 乍一看，似乎与Vue的Proxy观察者有关。通过与之前的 Grapesjs 版本对比，似乎并非所有部分都被 Proxies 转换，这避免了卡住。 一个快速的变通方法是把“编辑器”放在Vue之外，防止所有对象都变成代理。 “''js 让编辑; Vue.createApp（{ mounted（） { editor = grapesjs.init（{ ... }）; // ... }, /...
benryanwilliams
谢谢@artf，现在在Vue实例外声明编辑器后，一切都完美运行了。
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v103 可复制演示链接 https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js 描述一下那个虫子 如果你查看链接的 CodeSandbox，并找到那条注释出的代码，将 projectData 提供给编辑器，你会发现画布的大小被调整成了设备指定的大小之外。在调试器中，'updateDim' 在初始化时会多次调用：第一次是正确的设备大小，第二次是空的宽度和高度，这会导致 gjs-frame-wrapper 的尺寸被移除。 行为准则 [X] 我同意遵守本项目的行为准则
contentfree
我可以通过以下方式强制调整到正确的画布尺寸：初始配置中未提供 projectData，通过“editor.loadProjectData（...”）加载 projectData（...）在初始化和然后运行编辑器。Canvas.getModel（）.updateDevice（）;'虽然它会从全宽动画回到设备大小。 看起来加载项目数据是在默认设备渲染（可能）之后，某种程度上会压缩当前帧，重新渲染一些默认画面。（我不知道默认配置是什么，因为我只提供了一个设备配置，而第二个渲染时似...
artf
谢谢@contentfree我会尽量在下一次发布时修复这个问题
contentfree
谢谢@artf。我会留意下一次发布（看起来你的看板现在空了......所以应该很快就会被发现？）
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox v102.0.1 可复制演示链接 这是工作代码，我不能...... 描述一下那个虫子 如何复现这个漏洞？拖放到页面块 视频你会发现你对我的iframe无能为力 预期的行为是什么？ 我希望iframe的src可以编辑 目前的行为是什么？ iframe没法用。 我在图层管理器上能看到Iframe，但如果我打开检查器，只有包含Iframe的部分。 这东西在两三周前还很糟糕，我去度假了，没人碰它，因为只有我一个人在修，现在它坏了。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js blockManager.add（“conte...
artf
感谢@ValouZ的报告，iframe视图上确实有个拼写错误。我会在下次发布时处理好。
ClaudeCode
谢谢你举报，@ValouZ。 关于Iframe在一个区块上不能编辑，这个问题问得很好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something ch...