#46122022年9月23日作者 Drew-Daniels2 个回答
葡萄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（...
#46062022年9月22日作者 bit-ocean2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 与问题无关 可复制演示链接 https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 描述一下那个虫子 嘿，与其为这么小的变动创建拉取请求，我直接在这里分享。 Basic Scripts at https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 的引入代码遗漏了一个关键词，可能会让新用户感到困惑或误导，因为页面上没有其他声明组件脚本的示例： “''js 型号：{ 默认值：{ 脚本， 行为准则 [...
artf
“脚本”就在上面 ![CCC]（https://user-images.githubusercontent.com/11614725/192133350-34390584-4b07-4533-ac1b-15dcf33f1195.png） 附注：如果你不是在报告bug，可以使用讨论区
ClaudeCode
感谢你报告，@bit-ocean。 在“Commponent & JS”文档页面出现脚本延迟错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）—...
#46012022年9月21日作者 bit-ocean4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬104 可复制演示链接 https://jsfiddle.net/aw8p0h9j/ 描述一下那个虫子 如何复现这个漏洞？打开 jsfiddle 链接。点击两个div之间，然后在任一div和背景之间点击。 预期的行为是什么？ 在较早的 grapesjs 版本（0.17.26）中，更新会被触发，控制台记录点击，执行 update（） 代码。 目前的行为是什么？ 在 grapesjs 0.20.1 版本中，切换不同目标时更新不会触发，至少在 1 个目标之间是这样。组件无房产价值，2.组件价值相同，...... JS： “''js const edito...
ronaldohoch
和这里描述的一样，没问题：https://github.com/artf/grapesjs/issues/4350
artf
是的，但即使是自定义UI，如果值没变，更新也会被跳过，因为没必要。
bit-ocean
我粘贴的代码是用标准API，基本上是从文档里复制粘贴的。显然，更新的机制在不同版本之间已经发生了变化。 之前如果目标元素被更改，更新会被触发，我们可以运行代码在特定条件下重新渲染组件。@artf你现在会提出什么最佳替代策略？我应该添加自定义监听器来针对变更事件吗？你有什么建议的实现方式，才能确保更好地跟进Grapesjs的核心变更？ 简而言之，当目标被更改时，我需要能够调用可调用的对象，同时获取并设置自定义类型输入的值。
#45922022年9月15日作者 harsh2011 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 104.0.5112.102 可复制演示链接 https://jsfiddle.net/harsh201/obng5cy2/ 描述一下那个虫子 如何复现这个漏洞？在文本块内拖拽“Textable Component”。尝试编辑可文本块内的文本。 预期的行为是什么？ 当双击可文本组件时，光标应移动到可文本块，因为它正在扩展文本。 目前的行为是什么？ 当双击可文本组件时，光标仍聚焦于父文本块，焦点不会切换到文本组件。 粗略浏览时，每当我们双击文本块时，“contenteditable”属性会变为true，允许用户编辑该文本块。同样的行为也适用于嵌套在文本...
ClaudeCode
谢谢你举报，@harsh201。 关于文本组件在文本块中丢弃后变成不可编辑的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...
#45762022年9月12日作者 benryanwilliams4 个回答
葡萄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' 钩子，如下，解决了这个问题： 这看起来有点老套，如果你能想到更好的方法，请告诉我。
#45732022年9月9日作者 ahmafi3 个回答
葡萄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...
#45722022年9月9日作者 stljeff14 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 镀铬 可复制演示链接 https://jsfiddle.net/1hza4t9n/ 描述一下那个虫子 如何复现这个漏洞？初葡萄创建事件处理程序，用于页面更新时使用。更新页面观察事件处理程序未触发 预期的行为是什么？ 页面事件处理程序：更新触发 目前的行为是什么？ 没什么 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement： 0， pageManager： { 页码：[ { 编号：“索引”， 风格：'身体 { 颜色：红色; }'，...
artf
更新页面 你是如何更新页面的？ 值得一提的是，“page：*”事件只针对页面模型触发，而不是页面内容，比如： “''js 编辑。Pages.getSelected（）.setName（'我的页面'）; ```
stljeff1
任何更新、拖动方块、更改文字颜色。文本内容的变更。在 JS Fiddle 里，我拖动文本块，更改内容，换颜色。我更新时没有看到触发事件，所以我开始质疑自己的期望 我正在尝试了解如何构建自定义存储管理器。我用Grapes已经很久了，Grapes和我的服务器/数据库之间有很多“中间件”。我正在升级Grapes，所以想了解最合适的事件来跟踪所做的更改。 最终，我正在更多地了解店长，我有信心这会带我达到目标。 不过，我想了解页面管理器......我得好好考虑你说的页面模型。
artf
好吧，'page：update' 事件不是你需要的，因为它不会在内容更改时触发（所以我决定关闭这个问题，因为事件正常工作）。 你能解释一下你想构建哪种自定义存储管理器吗？存储管理器本身在内容更改时已经会触发，所以我不明白你为什么要重建这个功能。
#45702022年9月8日作者 rahul-singh-bv2 个回答
葡萄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安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定...
#45462022年9月2日作者 FaisalShaikhHA4 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 版本 104.0.5112.101（官方构建）（arm64）可复制演示链接 https://codepen.io/faisal-praella/pen/rNvOwgR描述一下那个虫子 如何复现这个漏洞？选择组件，双击，然后 ctrl+a 选择文本，然后点击退格键。注意组件消失，且不可选择或编辑。 预期的行为是什么？ 该组件不应消失。 目前的行为是什么？ 组件会消失，且无法选择或编辑。 https://user-images.githubusercontent.com/102785785/188111128-9b174ea7-590b-4552-86d2-...
artf
这都是因为这些风格造成的。 ![Schermata 2022-09-08 alle 15 09 38]（https://user-images.githubusercontent.com/11614725/189107885-adadd470-96ff-4458-ab75-b29df6bd60ee.png） 把它们拿掉，它就能正常工作了。
artf
@FaisalShaikhHA你能提供一个可复现的演示吗？因为我无法从官方演示中复现它。
FaisalShaikhHA
@artf这里是演示版：https://codepen.io/faisal-praella/pen/rNvOwgR 选择一个组件，双击，然后 ctrl+a 选择文本，然后点击退格键。 注意组件消失了，且无法选择或编辑。 即使我们尝试更新文本，链接组件也会消失。 请参考上面的视频。
#45372022年8月29日作者 salemkode2 个回答
葡萄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...