#53302023年8月24日作者 rozek3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 没有 可复制演示链接 没有 描述一下那个虫子 yarn build 失败，有两个错误： 这可能只是TypeScript太挑剔的问题，因为你可以用 // @ts-ignore 禁用错误信息并重新编译测试会顺利运行。 但因为我刚接触 GrapesJS，不能自评。总之，通常不 // @ts-ignore TypeScript错误...... 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
感谢你报告这个问题。你已经准确识别出在test/specs/utils/Sorter.ts文件中运行yarn build时，GrapesJS提交4f0c5b1中出现了TypeScript编译错误（TS2532: Object is possibly 'undefined'）。 根本原因 TS2532错误的出现是因为TypeScript严格的空检查（现代GrapesJS配置默认启用）检测到变量或对象在访问其属性时可能被undefined。即使测试的运行逻辑确保该对象在实际中从...
#53282023年8月22日作者 sdimitrenco2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/sdimitrenco/wao1rh0q/30/ 描述一下那个虫子 那是我的组件结构 如果我在文本编辑器中更改span标签中的文本，然后移除焦点，它会返回文本之前的状态。组件的结构看起来正常，是链接，但内容在图片和文字标签内。 演示 ![图片]（https://github.com/GrapesJS/grapesjs/assets/39157717/1a21766a-d945-4d0b-9360-13390722c5dd） 现场演出 https://jsfiddle.net/sd...
GJS Helper
你遇到的问题是，嵌套span（text组件）中的可编辑文本在link组件中会因失去焦点而恢复到原来的状态，这是GrapesJS处理嵌套可编辑内容时已知的同步问题。 根本原因 当你使用富文本编辑器（RTE）编辑span内的文本时，GrapesJS会正确地直接更新DOM元素。当焦点失效（禁用RTE）时，text组件的模型会更新为新内容。这会触发text组件模型上的change:content事件。 问题在于，组件的link父节点是wrapper类型，在配置中已明确设置edita...
#53252023年8月21日作者 bohwaz1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 维瓦尔第 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？执行动作后按Ctrl+Z，以撤销动作被反转，但我的浏览器也会重新打开最后关闭的标签页 预期的行为是什么？ 阻止浏览器执行默认的按键绑定。 目前的行为是什么？ Ctrl+Z 事件传播在 JS 中不会被停止，因此浏览器仍然执行指定的快捷键。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的 Ctrl+Z 同时触发撤销和浏览器“重新打开最后关闭标签页”快捷方式GrapesJS问题，是因为 Ctrl+Z 的keydown事件在 GrapesJS内没有被阻止默认操作。虽然 GrapesJS 内部处理撤销命令，但事件可以被加载到浏览器，浏览器会执行自己的默认快捷方式。 要解决这个问题，你需要明确阻止GrapesJS激活时Ctrl+Z键组合的默认浏览器操作。实现这一点最有力的方法是利用GrapesJS的Keymaps API覆盖或增强默认undo键映射行为。...
#53202023年8月18日作者 SwapnilSoni19994 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞？我用的是[grapesjs-react]（https://www.npmjs.com/package/grapesjs-react），并且用 assetManager我的配置长这样 附言：我确实有一个能用的终端，已经测试过了。现在进入浏览器中的编辑器添加图像从系统中选择图像则不发送上传请求 预期的行为是什么？ 预期是它应该触发请求并将资产上传到给定的网址 目前的行为是什么？ 它没有上传，而是把 base64 图片放到 DOM 里行为准则 [X] 我同意遵守本项...
artf
刚试了同样的配置，一切正常。 可能和你的Grapesjs版本或者“grapesjs-react”本身有关。 如果你无法用最新版本的GrapesJS提供可复现的演示，请避免制造BUG问题。 我也强烈建议切换到[官方的GrapesJS React包装器]（https://github.com/GrapesJS/react），它也允许你为编辑器实现完全声明式的自定义UI。
#53192023年8月18日作者 AFriboulet-ii2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome V116.0.5845.96 可复制演示链接 https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/ 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/assets/128728949/e85b65c4-53ad-43d0-9f5f-74dc0a181dd0 如何复现这个漏洞？开放提供的小提琴 [此处]（https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/）删除一个组成部分的“段落”选择之前的组件，下...
artf
谢谢@AFriboulet-ii，我会在下次发布时修复。
GJS Helper
你描述的问题是GrapesJS中已知的行为，撤销管理器会正确还原组件的模型属性（包括其classes集合），但负责渲染组件的ComponentView在撤销操作后并不总是视觉上重新同步其DOM元素的classList。这导致视觉上的差异，组件仍然显示与已移除的类相关的样式。 根本原因 当你向组件添加类时，GrapesJS会更新组件的内部classes属性（即Selector模型的集合）。ComponentView监听该集合的变更，并调用其syncClasses方法更新实际D...
#53162023年8月17日作者 BenKhz3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v115.0.5790.170可复制演示链接 https://jsfiddle.net/BenKhz/yfwqc6mu/1/ 引用[此处文档]（https://grapesjs.com/docs/api/selector_manager.html#available-events）描述一下那个虫子开放式提供的小提琴 [此处]（https://jsfiddle.net/BenKhz/yfwqc6mu/1/）在 Canvas 上选择一个组件，并通过选择器管理器添加类别。（add 和 update 事件将被捕获）从类管理器中移除一个类e...
artf
你好，@BenKhz之所以这样，是因为“selector*”事件与全局Selectors容器有关（当你从组件中移除选择器时，Selector本身仍然存在，因为它可以在其他地方使用），如果你想跟踪组件选择器的变化，必须使用'component：update：classes'事件
BenKhz
啊！我误会了。谢谢你的澄清。继续加油！
GJS Helper
感谢你举报这个问题并对GrapesJS的善意评价！你提到了一个关于GrapesJS事件的常见困惑点，这是个很好的问题。 根本原因解释 selector:remove事件，正如选择器管理器的GrapesJS API所述，当选择器管理器的全局可选集合中移除Selector模型时触发。这与从特定组件中移除类（由Selector模型表示）不同。 当你通过界面向组件添加类时，如果该类（例如my-class）在选择器管理器的集合中还没有作为Selector模型存在，GrapesJS会为...
#53122023年8月17日作者 srinivas9772 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome V115可复制演示链接 https://jsfiddle.net/srinivas977/ahgLxv6e/10/描述一下那个虫子 如何复现这个漏洞？ 在提供的 JSFiddle 中，包含一对文本行并选择列表。接着，添加一个子列表，然后添加子列表。之后，点击选定元素外，子列表中的一个项目会消失。 这个现象也在这个视频链接中看到（从视频第30秒开始注意）： https://github.com/GrapesJS/grapesjs/assets/49796104/59de9aa5-5f3f-43ae-9ed1-358b86ac8b27...
artf
不幸的是，由于默认实现依赖于 [deprecated execCommand]（https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand），导致太多边缘情况难以处理，已经不值得再花时间去处理了。 我建议只用它来处理基本格式（例如加粗、斜体、下划线等），对于更复杂的元素，我强烈建议创建[自定义组件]（https://grapesjs.com/docs/modules/Components.htm...
GJSBlock
谢谢你举报，@srinivas977。 关于列表富文本编辑器缩进操作的问题的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进...
#53052023年8月13日作者 rajevar2 个回答
GrapesJS 版本 0.21.4[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 113.0.5672.63可复制演示链接 https://jsfiddle.net/szLp8h4n/11/描述一下那个虫子 如何复现这个漏洞？ 在页面上移动任何文本组件。 警报将会显示。 可能是倒退。 https://github.com/GrapesJS/grapesjs/issues/868 没看到重新开启bug的选项，所以新建一个。 预期的行为是什么？ 警报只会在向画布添加新组件时显示 目前的行为是什么？ 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则
artf
你好@rajevar我觉得你是在找“component：create”事件，因为“component：add”是正常工作的（比如用来跟踪某个组件内的任何新移动）
GJS Helper
你正确地指出了事件处理中常见GrapesJS混淆点。component:add事件确实不仅在新组件从块面板拖拽到画布上时触发，也在现有组件在画布上移动时触发。 根本原因解释 这种行为源于GrapesJS内部处理组件移动的方式。当你拖拽现有组件到画布的新位置时，GrapesJS执行一个内部操作，实际上包括： 将组件从其原始父/位置移除。 将组件添加到其新的父/位置。 因为组件内部被“添加”回DOM树（即使是同一个组件实例），component:add事件会被触发。这是一种简化...
#52972023年8月10日作者 FahemAhmad2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 115.0.5790.171（官方构建）（64位）可复制演示链接 https://codesandbox.io/s/1r0w2pk1vl?file=/index.html描述一下那个虫子 如何复现这个漏洞？...添加此表单类型和表单块 预期的行为是什么？ ...在 getJS 中，我希望编辑器中有相关的 js 代码，我不确定我的期望是否正确，如果不正确，请告诉我该如何实现 目前的行为是什么？ ...getJS（{component}） 返回空字符串 '' 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： @ar 行为准则[X] 我同意...
artf
'getJs' 返回的是你组件模型的 JS（你会放在 'model.defaults.script' 里的那个），而不是组件视图。 请仔细阅读 [组件与JS]（https://grapesjs.com/docs/modules/Components-js.html）
GJS Helper
你遇到的问题是，尽管自定义表单组件的view.events里定义了submit事件处理程序，editor.getJs({ component })却返回空字符串，这是预期行为，而不是GrapesJS中的bug。 根本原因 GrapesJS的getJs方法旨在提取 JavaScript 代码，这些代码旨在独立于 GrapesJS 编辑器运行于导出页面。然而，组件view.events对象中定义的事件处理程序主要用于使组件在 GrapesJS 编辑器的 iframe 上下文中保...
#52932023年8月10日作者 craigharman2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 篇章 1.1.1 可复制演示链接 https://jsfiddle.net/3bprucnv/3/ 描述一下那个虫子 如何复现这个漏洞？ 为 .gjs-selected 添加自定义 CSS 规则，例如：将边框颜色改为红色。 .gjs-selected { 轮廓颜色：红色; } 预期的行为是什么？ 在编辑器中选择元素时，选 grapesjs 边框应为红色。 目前的行为是什么？ 边框/轮廓保持蓝色。 注意：所有与选择/高亮相关的其他 CSS 覆盖均已成功覆盖（例如 highlighter、highlighter-sel） 行为准则 [X] 我同...
artf
请参考 https://github.com/GrapesJS/grapesjs/issues/3515
GJS Helper
你遇到的 .gjs-selected 类不接受你的 CSS 覆盖的问题，是因为 GrapesJS对该类的默认样式使用了 !important 规则。GrapesJS 对 .gjs-selected 应用outline: 3px solid #3b97e3 !important;，确保其选择边界在编辑器中一致显示，防止因不那么具体的 CSS 规则而意外覆盖。 当CSS属性标记为!important时，它优先于所有没有!important标志的其他声明，无论它们的具体性如何。你...