#63182024年11月20日作者 tonypapousek4 个回答
GrapesJS 版本[X] 我确认使用最新版本 [email protected] 本问题提交时间你用的是什么浏览器？ Firefox 132，Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子 如何复现这个漏洞？添加一个自定义方块， media 属性设置为带有透明填充的SVG查看方块标签，然后 注意填充会自动设置为 currentColor 预期的行为是什么？ 填充应该是透明的 ![截图 2024-11-20 10 38 00]（https://github.com/user-attachments/assets/4e1b546c-9b65-47ec...
samex
我认为这取决于具体使用的SVG。如果你检查其他SVG图标，你会发现它们主标签上没有填充属性（内联），<svg>而是在子<path>标签上。通过在该SVG的两个元素上设置fill=“none”属性<path>，图标应该会正确显示。希望这些建议能帮你解决这个问题！
tonypapousek
@samex 指定“fill=”none“后解决了问题，谢谢！这肯定能让我的自定义内容更可预测地工作。 除此之外，我觉得主要的痛点是尝试使用第三方SVG（比如“反应图标”）或所见即所得输出，但这些输出没有明确设置“填充”属性。考虑到这些用例，除非维护者希望关闭，否则我暂时会保持这个漏洞开放。
artf
是的，我会关闭这个，因为它和核心本身关系不大，但谢谢你指出
#63082024年11月13日作者 maxming23333 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 130.0.6723.117 可复制演示链接 https://stackblitz.com/edit/grapesjs-react-custom-ui？file=src%2FApp.tsx 描述一下那个虫子 如何复现这个漏洞？开 https://grapesjs-react-custom-ui.stackblitz.io/点击此按钮 <img width=“537” alt=“image” src=“https://github.com/user-attachments/assets/35d33966-60b6-4a88-96c6-0c26...
danstarns
你好@maxming2333，试着点击文本框中高亮区域内的任意位置，对我来说它加载代码...... https://github.com/user-attachments/assets/89f61dc6-466a-476a-b437-d0f8ae51c7ef
maxming2333
嗨@maxming2333，试着点击文本框中高亮区域内的任意位置，对我来说它会加载代码......Screen.Recording.2024-11-19.at.23.21.03.mov 是的，确实可以在点击弹窗区域后显示，但应该在弹窗打开后立即显示，而不是点击后。
GJS Helper
你遇到的问题源于 GrapesJS的 CodeViewer （内部使用 CodeMirror）与 React 的渲染生命周期相互作用，尤其是在嵌入自定义模态中时。React 组件管理自己的 DOM，外部库如 CodeMirror 需要明确附加和管理在该 DOM 中。 根本原因： 当你调用 editor.CodeManager.getViewer('CodeMirror').set({ ... })时，你得到的是CodeViewer的实例。这个实例有一个 render() 方...
#63072024年11月12日作者 maxming23331 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 130.0.6723.117 可复制演示链接 https://grapesjs.com/demo-mjml 描述一下那个虫子 如何复现这个漏洞？随机选择一个组件，比如演示页面的第二个 mj-section 在编辑器中将该组件悬停（你可以看到它可以悬停）找到该组件的ID，并执行 editor.Components.getById('iv19a').tagUpdated()再次尝试悬停该组件，发现无法悬停。 预期的行为是什么？ 没有报错，你可以继续悬停 目前的行为是什么？ 错误会被报告且无法悬停 <img width=“668” alt=“im...
GJS Helper
你遇到的问题是调用 MJML 组件时tagUpdated()导致其悬停功能失效并报错，原因在于 tagUpdated() 的设计与 MJML 组件在 GrapesJS内的渲染生命周期不匹配。 根本原因 GrapesJS 中的 tagUpdated() 方法主要用于将标准 GrapesJS 组件的 HTML 标签更改（例如，从div 变成 span）。该方法向组件视图（ComponentView）信号，其底层 DOM 元素的标签发生变化，可能会触发元素及其关联事件监听器的重新...
#62962024年11月5日作者 maneeshp972 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Arc v1.61.1 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-n6sff 描述一下那个虫子 @artf首先感谢你提供这个了不起的库。我当时试图在 grapesjs 中创建自定义React组件，偶然发现了之前报告的React集成问题中的一个沙盒链接。 [https://codesandbox.io/s/grapesjs-react-components-n6sff] 我通过引用沙盒后成功让自定义React组件工作，但有一个问题依然存在。每当自定义React组件被拖...
artf
是的，从演示的角度来看这是正常的。 你可以玩代码找到解决办法，但我会关闭这个，因为它不是核心漏洞。
GJS Helper
你观察到的行为，即自定义 React 组件被包裹在带有GrapesJS特定属性的额外div中，这对 GrapesJS 管理 DOM 组件至关重要。这个div在 GrapesJS 语境中不是“额外”包装器;它就是GrapesJS组件本身。 根本原因解释 GrapesJS组件结构：在GrapesJS中，画布中的每个组件都由对应的DOM元素表示。默认情况下，该元素是一个div。该元素作为组件在DOM中的根节点，使GrapesJS能够： 附加其内部属性（例如，data-gjs-ty...
#62902024年11月4日作者 svex992 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefix v132.0 可复制演示链接 https://jsfiddle.net/skdegqun/4/ 描述一下那个虫子 如何复现这个漏洞？运行小提琴的日志可以看出，编辑器初始化时传递的数据源未被加载。 预期的行为是什么？ 将项目数据源加载到编辑器数据源管理器（editor.DataSources） 目前的行为是什么？ 当编辑器加载项目数据时，数据源并未被加载，而是数据源列表是空的。 这个问题既在编辑器初始化时传递项目数据，也在从远程存储加载项目数据时出现（虽然在小工具里重现起来稍微难一些，但希望修复了第一个情况能解决这个问题）。我...
artf
你需要等编辑准备好再做。 “''js editor.onReady（（） => { console.log（“数据来源总数应为1：”，编辑。DataSources.getAll（）.length） console.log（'test-source should exist：'， editor.DataSources.get（“test-source”））; }); ```
GJS Helper
你遇到的问题是GrapesJS DataSources模块在编辑器初始化或从存储加载时，不会自动从projectData中的dataSources属性中水化状态。虽然projectData用于加载核心组件、样式和资源，但DataSources模块需要显式填充。 根本原因： GrapesJS核心editor.load()方法负责处理projectData（初始化时传递或从存储中获取），主要关注加载主画布内容（组件）、样式和资源。其他专业模块，如DataSources，通常需要...
#62812024年10月30日作者 sumasal3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新的Chrome、Firefox、Edge 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？在图层管理器中拖动一个组件，尝试将其置于本体下方的其他物品之间不允许。允许筑巢 预期的行为是什么？ ...嵌套和重新排序都应被启用 目前的行为是什么？ ...顶层仅启用嵌套 行为准则 [X] 我同意遵守本项目的行为准则
artf
下次版本会修复。 感谢@sumasal的报告，也感谢@mohamedsalem401的修复 🙇 ♂️
sumasal
期名被删减了。我的意思是，它似乎能在较旧版本如0.21.8及以下运行
GJS Helper
GrapesJS层管理器设计成允许在同一层级重新排序组件，也可以在其他层级内嵌套组件。根据官方GrapesJS演示（https://grapesjs.com/demo）和最新版本的GrapesJS，该功能运行正常。 你遇到的问题可能源于在图层管理器中拖放物品时需要的精确度，以区分重新排序和嵌套。 理解层管理器拖放行为 当你在图层管理器中拖动组件时，视觉反馈会显示预期操作： 重新排序（同一级别）: 要将组件重新排序到与其兄弟级别相同（例如，将组件移动到另一个组件上方或下方，该...
#62712024年10月25日作者 padcom4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Linux和Mac上的Firefox 131.0（64位） 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？开始拖动“悬停我”按钮尽量把它放在“所有文本块都可以轻松编辑......”的上面。 预期的行为是什么？按钮可以随处放置图层管理器可用于重新组织元素 目前的行为是什么？按钮只能在容器开头放置图层管理器内的拖拽也有同样的限制行为准则 [X] 我同意遵守本项目的行为准则
padcom
你们太棒了！正是时候，正好及时:)我今天下午有个演讲，现在我也能演示它在Firefox上的工作了！
padcom
我已经追踪到Firefox版本109.0的重大变更。这是第一个有问题的。108.0.2版本运行良好。希望这些信息对你有帮助。
padcom
我也测试了2024-10-24-21-16-15-mozilla-central的133.0a1，问题依然存在。
#62692024年10月25日作者 bt-mkt4 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome 版本 130.0.6723.59（官方版本）（arm64） 可复制演示链接 https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 描述一下那个虫子 如何复现这个漏洞？打开控制台。在画布内放置多个组件（例如用三列方便复现）。将extra类别末尾添加的test-comp组件拖曳到新增组件上。 预期的行为是什么？ 组件model和 viewInit 事件（至少不确定是否有其他）应该只在将组件放入画布时触发，而不是每次拖到可丢弃组件上方时触发。 目前的行为是什么？ 组件model和view初始...
artf
@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？ “''js const wrapper = this.getShallowWrapper（）; srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效; ```
mohamedsalem401
@artf 是的，我怀疑这和“浅层编辑器”有关。希望临时方案能奏效，然后我再开永久居民申请
bt-mkt
@mohamedsalem401这很可能是因为编辑器太浅了。我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？“''jsconst 包装器 = this.getShallowWrapper（）;srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效;``` 你好，@artf， 上面看到的改动（我看到已经实现了）似乎并没有解决我遇到的问题。它和0.22.1版本一样。 我已经把手写笔升级到了0.22.3（ht...
#62632024年10月24日作者 yashvi20264 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO描述一下那个虫子 如何复现这个漏洞？使用 RTE 添加词语链接，添加链接组件现在在链接组件后输入一个不留空格的词，再次选择该词，添加链接。添加后，点击文本框外。 预期的行为是什么？ 第二个新增链接应包裹在第一个链接和文本上。 目前的行为是什么？ 新增了两链接组件。 代码 var url = window.prompt('Enter the URL to link to:'); rte.insertHTML（<a class="link" href=$...
sirbeagle
点燃——唯一的坏处是我们可能永远不知道最终的修复结果。 @artf - 我觉得我们可以结束这个问题了。
sirbeagle
我已经玩了不少，能在@yashvi2026提供的Codepen上重现出这个错误。我大多数情况下的繁殖步骤非常相似： 在文本框中输入两个单词，中间有许多空格。 双击单词或用鼠标手动选择单词，选中第一个单词 使用自定义RTE添加链接 跳出框框点击 在现有文本中的链接后双击返回 在链接后高亮单词，并用鼠标将高亮扩展为包含第一个链接的首字母 使用 RTE 添加另一个链接 点击文本框外 然而，我在开发环境中无法复现这种效果。经过多次反复试验，我发现Codepen使用的是GrapesJ...
yashvi2026
是的，升级到最新版本后，这个问题就不出现了。
#62602024年10月24日作者 hr12012 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Microsoft Edge 130.0.2849.46可复制演示链接 https://jsfiddle.net/uwybfd98/描述一下那个虫子 如何复现这个漏洞？选择旋转木马组件点击图片右上角或左下角的空格并选择 div; 克隆二次 预期的行为是什么？ 克隆只触发一次 目前的行为是什么？ 它递归，导致卡壳 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![DC23C5C8E486B07C53A673E38406a1e]（https://github.com/user-attachments/assets/44686398-451a...
artf
@hr1201 onRender可以多次触发，如果你不好好清理，就绝不应该在那里附加监听器。 你的逻辑也完全是模型相关的，所以它不应该出现在视图里，只需在“model.init”方法中移动代码
GJS Helper
谢谢你举报，@hr1201。 关于在组件中使用 component：clone 时出现的错误，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...