#62502024年10月23日作者 maxming23332 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 129.0.6668.101可复制演示链接 https://grapesjs.com/演示描述一下那个虫子 如何复现这个漏洞？ 开放 https://grapesjs.com/演示 在 DevTools 中运行这个脚本： 预期的行为是什么？ 成功无错误地复制 目前的行为是什么？ 成功复制但有错误： <img width=“472” alt=“image” src=“https://github.com/user-attachments/assets/14309772-7e8e-4ce2-ba14-7aefbed8614f”> --...
maxming2333
除了上述方法，还有其他复制页面的方法吗？
GJS Helper
你在克隆GrapesJS页面的主组件并将其添加到新页面时遇到的TypeError: Converting circular structure to JSON，是与组件序列化存储相关的常见问题GrapesJS。这是因为实时GrapesJS Component模型，尤其是在渲染后带有关联的DOM元素（el）后，包含复杂的内部引用，形成循环依赖。当GrapesJS尝试序列化此类组件（例如将其添加到新页面以实现持久化）时，JSON.stringify因这些循环结构而失败。 根本原...
#62492024年10月23日作者 yashvi20263 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 ---描述一下那个虫子 editor.getModel().initBaseColorPicker(DomElement, { / spectrum options / }); 在内化之后，当 palete 打开时，我想给它设置一个颜色？@artf 行为准则[X] 我同意遵守本项目的行为准则
NeonLexie
这看起来很有趣。我倒是愿意试试看。
GJS Helper
要为初始化为 editor.getModel().initBaseColorPicker()的自定义颜色选择器设置初始颜色，你需要在Spectrum.js选项对象中传递 color 选项。 GrapesJS的 initBaseColorPicker 方法内部使用 [Spectrum.js]（https://bgrins.github.io/spectrum/） 作为颜色选择器功能，并直接暴露Spectrum.js选项。 解决方案 当你调用 initBaseColorPick...
#62482024年10月22日作者 Frubl2 个回答
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/a2hbxg0y/1/ 描述一下那个虫子 如何复现这个漏洞？打开开发工具，编写 iframe 正体元素样式 - 缩放：n; 目前的行为是什么？ 当鼠标悬停在元素上时，蓝色边框会正常工作，而偏移则不然。它们的大小与缩放时相同：1; 附言：我无法分享完整复制演示的链接，因为CSS的更改需要在Canvas内完成。 附言： 可能已经有合适的缩放方法，但我只找到了整个画布的缩放。我想让其中一种设备类型的缩放更小 行为准则 [X] 我同意遵守本项目的行为准则
artf
你不应该编辑iframe的缩放，应该用[原生API]（https://grapesjs.com/docs/api/canvas.html#setzoom）
GJS Helper
你发现了GrapesJS中与showOffsets特性相关的特定bug，当iframe身体应用了CSS zoom属性时。这是一个合理的观察，我可以确认你描述的行为。 问题确认 当zoom应用到GrapesJS画布iframe的body时，视觉内容会正确缩放（或放大）。蓝色选区边框（轮廓）也会相应缩放，因为它通常是直接应用于元素的CSS属性。然而，showOffsets指示器（显示填充和边距值的蓝色/橙色框）不会缩放;它们的大小与应用zoom: 1相同，相对于缩放内容显得异常...
#62112024年10月11日作者 jlafosse4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 131.0.2 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞？进入 grapesjs 演示，然后导入以下 html：打开浏览器控制台。快速多次点击图片。 预期的行为是什么？ 应该能正常工作，没有错误。 目前的行为是什么？ 这会导致 FireFox 出现递归错误。Chrome 似乎不受此问题影响。我正在 OSX 13.6.9 上测试，并附上了一段简短的屏幕录制。 我怀疑问题来自以下函数： https://github.com...
artf
嘿，@jlafosse谢谢你的报告。 我不认为最新版本会有这个问题： <img width=“123” alt=“截图 2024-10-21 19 00 04” src=“https://github.com/user-attachments/assets/ff074a31-cd19-4547-bb27-596c92e16d64”> 你能再试着再检查一次吗？
#62022024年10月9日作者 klipto-inc2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 129 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 const newEditor = grapesjs.init({ fromElement： true， // 允许HTML中的组件 容器：“#editor”， 画布：{ 剧本：[ “https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js”， ], }, 高度：“100VH”， 插件：[ gjsPreset网页， GjsBlockBasic， gjsForms， pluginTool...
artf
@klipto-inc，请制作带有正确且可复现的实时演示的错误报告
GJS Helper
你遇到的 Preline.js 在 GrapesJS 画布上无法工作的问题，尽管它通过 canvas.scripts包含，是依赖 DOMContentLoaded 初始化的 UI 库常见的时序问题。 根本原因 许多JavaScript UI框架和库，包括Preline.js，设计为在浏览器DOMContentLoaded事件触发时自动初始化其组件。该事件表示初始HTML文档已被完全加载和解析。 当你在GrapesJS中包含canvas.scripts脚本时，脚本确实会加载到...
#61802024年9月30日作者 padcom4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新款 可复制演示链接 https://codesandbox.io/p/sandbox/withered-rgb-xmw8gk 描述一下那个虫子 如何复现这个漏洞？开放代码沙盒选择“body”（类型：“wrapper”）——观察从自定义源获取值的警报（调用 trait.getValue（）尝试更改值（特质：自定义，唯一存在的）——注意“setValue（）”未被调用，因为没有显示警报 预期的行为是什么？ 会显示“将全局值设置为” + 值的提醒 目前的行为是什么？ 未显示警报， trait.setValue() 方法未被调用。...
padcom
据我所见，当“Trait.setValue（）”值来自输入时不会被调用。取而代之的是调用“setTargetValue（）”，但该程序不会检查特征定义中的“setValue（）”方法是否存在。另外，'Trait.setValue（）' 检查属性中的 'setValue' 键，而 'Trait.getValue（）' 通过 'this.get（'getValue'）' 获得其自定义 getter （Trait.ts：303）
padcom
我尝试按照[这个]（https://github.com/GrapesJS/grapesjs/discussions/5793）讨论来让它工作，但正如你在沙盒中看到的，它就是不行。
#61722024年9月25日作者 yashvi20262 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 --- 描述一下那个虫子 如果你能在编辑器里切换主题，那就太好了，这样我就能根据喜好在深色和浅色之间切换。行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
GrapesJS 没有内置暗/浅主题切换器，因为其界面可以通过 CSS 高度自定义。不过，你可以通过利用 GrapesJS对 CSS 变量的广泛使用，并在编辑器根元素上切换自定义 CSS 类，轻松实现暗色主题支持。 该方案包含三个主要部分： HTML 结构： 一个用于GrapesJS的容器和一个用于切换主题的按钮。 CSS 样式： 通过覆盖 GrapesJS在特定类内默认的 CSS 变量来定义暗色主题样式。 JavaScript 逻辑： 初始化GrapesJS，处理主题切换...
#61712024年9月24日作者 rhoenerSBS2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v129 可复制演示链接 不适用 描述一下那个虫子 你好@artf， 我目前正在实现一个带有 grapesjs 的编辑器，可以在已有页面旁边添加章节。我实现了一个章节存储，实现了IStorableModule，将章节存储在项目数据中。 我的问题是，让UndoManager跟踪章节更改的最佳方式是什么？ 有必要以某种方式扩展ItemManagerModule吗？ 行为准则 [X] 我同意遵守本项目的行为准则
artf
大家好@rhoenerSBS请避免打开bug问题。
GJS Helper
GrapesJSUndoManager主要通过监听特定事件，特别是change:state，跟踪编辑器核心模型（组件、样式、页面、资源）的变化。要让它跟踪自定义ChapterStorage模块的变更，该模块实现IStorableModule，你需要明确向编辑器提示，当章节数据被修改时其状态发生变化。这会提示UndoManager捕获整个项目数据的新快照，包括你的自定义章节数据。 以下是详细的做法： 1.建模你的自定义数据（章节） 最佳实践是使用Backbone模型和集合来建...
#61522024年9月18日作者 stpp24 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 任何 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么？ 所有代码都应被删除，包括CSS 目前的行为是什么？ 自定义CSS不会被移除，但其他部分已经被移除。 [gjs.webm]（https://github.com/user-attachments/assets/3fbd9a6d-ad0e-4fc6-add8-7cf31ae9293c） 行为准则 [X] 我同意遵守本项目的行为准则
artf
这与核心无关，应在[插件]（https://github.com/GrapesJS/components-custom-code）层面处理。请在那里发布问题，我们会尽力找出合适的方法。
mosh-tudor
@stpp2 这其实不算是个bug;它更像是一种功能。:) 试试用“clearStyles”： https://github.com/GrapesJS/grapesjs/blob/d48e1e34a9fa363dcb83fdcca53a89563db17063/packages/core/src/editor/config/config.ts#L260-L272
stpp2
是的，我这里已经启用了“clearStyles”，但很多情况下效果不好。 无论如何，我预计“自定义代码”组件应该有一定的“容器化”，这样移除后文档里不会留下任何东西。
#61432024年9月10日作者 rhoenerSBS2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子 你好，@artf， 我目前正在尝试将一个组件包裹在一个截面组件中，如果它还没有被包裹的话。我正在连接 component：mount 事件，并将新增组件替换为 section（该组件的子节点是新增的）。 我的代码大致是这样的： 我遇到的问题是UndoManager的栈和实际情况没有完全对齐。添加和封包后，栈有三个条目：移除原始组件、添加部分和添加原始组件。点击撤销时，该部分被移除，原始组件保留。但它有bug，因为它无法...
jasonvijayy
你好，@artf， [可复制链接]（https://codepen.io/Logeshwaran-codepen/pen/raLJpYb） 我用'component.replaceWith（）'和UndoManager一起运行时也遇到崩溃。 这只发生在编辑器生命周期事件中触发“replaceWith（）” （例如 'change：status'， 'component：selected'， 'component： deselect'） 在撤销时，GrapesJS 尝试恢复旧...
GJS Helper
谢谢你举报，@rhoenerSBS。 关于BUG/[问题]：如何在添加/挂载时正确包装组件？的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...