#60442024年8月7日作者 danstarns2 个回答
在整个代码库中，我们构建并关联了基于非常旧版本Node.js的依赖。 参见： https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/publish.yml#L15 https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/build.yml#L15 https://github.com/GrapesJS/grapesjs/discussions/5973 https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md?plain=...
danstarns
相关报道：https://github.com/GrapesJS/grapesjs/issues/6048https://github.com/GrapesJS/grapesjs/issues/6049
GJS Helper
谢谢你举报，@danstarns。 关于Node JS LTS版本的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed...
#60402024年8月6日作者 Vampire-V4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 127.0.6533.89（官方构建）（64 位） 可复制演示链接 描述一下那个虫子 请检查一下。select的值未定义。我在React里用过，遇到了错误异常。 /*返回所选组件的模型@return {Component|null}@public / EditorModel.prototype.getSelected = function （） { return this.selected.lastComponent(); }; ![图片]（https://github.com/user-attachments/assets/2eaf...
artf
@Vampire-V，请正确遵循bug问题模板。没有可复现的演示，我们无法帮你。
Aravinth-2020
### GrapesJS 版本[x] 我确认使用最新版本 GrapesJS### 你用的是什么浏览器？版本 127.0.6533.89（官方构建）（64位）### 可复制演示链接### 描述一下那个虫子请检查一下。已选值为未定义。我在React里用过，结果遇到了错误异常。/* 返回所选组件的模型 @return {组件|null} @public */ EditorModel.prototype.getSelected = 函数 （） { return this.selec...
Aravinth-2020
嘿，@Vampire-V，请正确遵循漏洞问题模板。没有可复现的演示，我们无法帮你。 你能分享一下解决办法吗？ 我选择开放图层管理器时也遇到同样的问题，这个问题是在我自定义左边栏面板中选择另一个页面后出现的。
#60382024年8月6日作者 dharma-glui2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 https://jsfiddle.net/6bn43a05/描述一下那个虫子 如何复现这个漏洞？为HTML标签添加点击事件 预期的行为是什么？ 加载到编辑器后不应该删除该事件 目前的行为是什么？ 它会从 HTML 中移除点击事件 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 同样的问题在这里报告： https://stackoverflow.com/questions/78496572/grapesjs-移除点击属性如何防止-做-做 ![截图（37）]（https://github.com/user-attachmen...
artf
这是出于安全考虑，但你可以用“config.parser.optionsHtml.allowUnsafeAttr”选项禁用它（风险自负）：https://github.com/GrapesJS/grapesjs/blob/819bfcf44bb23d51990eba3b4330e9932df59cde/src/parser/config/config.ts#L116
GJS Helper
你遇到的问题是， onclick 属性在加载到 GrapesJS时从 HTML 元素中被移除，这是 GrapesJSHTML净化流程中的一个有意设计的安全功能。 GrapesJS，像许多现代HTML编辑器一样，会去除潜在不安全的属性和标签，以防止跨站脚本（XSS）漏洞，并维护其组件模型的干净、可预测的DOM结构。 像 onclick、 onload、 onerror等内联事件处理程序，通常被认为是现代网页开发中的不良做法，原因在于安全性问题和关注点分离（结构用 HTML，风...
#60322024年8月3日作者 aswinkumar8632 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v126 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？打开 [demo]（https://grapesjs.com/demo）双击任意现有的图像组件以打开资产管理器。将视频文件拖拽到图片上传区。等待视频文件上传。点击上传的视频资源选择它。 注意： 这个问题只在拖拽时出现。视频组件也受此影响。 预期的行为是什么？ 图片组件应当防止错误的文件类型选择。如果资产管理器第一步阻止上传错误文件类型，会更好。 行为准则 [X] 我同意遵守本项目的行为准则
artf
感谢@aswinkumar863报告。我很乐意合并修复的PR。
GJS Helper
你提到的问题，GrapesJS Image组件允许通过拖放上传和选择视频文件，这是默认资产管理器拖放处理程序未明确强制文件类型限制时常见的情况。虽然原生的 HTML input type="file" 元素使用 accept 属性过滤文件选择对话框，拖放操作则需要自定义验证逻辑以防止处理不需要的文件类型。 根本原因 演示中所见的默认GrapesJS资产管理器提供了基本的上传机制。当文件被拖放时，浏览器会提供对这些文件的访问。如果拖拽事件处理程序或后续上传函数没有明确的客户端...
#60122024年7月21日作者 aswinkumar8631 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v126 可复制演示链接 https://codepen.io/aswinkumar863/pen/VwJaVYG 描述一下那个虫子 如何复现这个漏洞？打开[演示]（https://codepen.io/aswinkumar863/pen/VwJaVYG）。点击编辑正文中的“点击我”部分。导航到Style Manager并选择General > Top。在输入框中输入任意数字，但不点击外部。点击上或下箭头。 注意： 此行为仅在输入字段未被点击时观察到。数字特征也受此问题影响。 预期的行为是什么？ 输入数字应与当前输入的值递增或...
GJS Helper
你准确指出了GrapesJS中的一个bug，就是风格管理器和特性管理器中的input type="number"字段在使用上下箭头时，无法正确保留手动输入的数值，除非先模糊输入。这导致箭头是从模型最后保存的值开始增减，而不是输入字段当前显示的值。 根本原因 根本原因在于GrapesJS的事件处理机制，PropertyNumberView（样式管理器属性）和TraitNumberView（组件特征）。这些视图通常监听输入字段上的change事件以更新底层GrapesJS模型。...
#59892024年7月4日作者 ihatov083 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/vbu18q5f/2/ 描述一下那个虫子 如何复现这个漏洞？如果标签嵌套，则无法在画布上选择 Demolink中的第2节块在section标签里面有div标签。 第2节 块无法在Canvas中选择部分标签，div标签被选中。 这带来了两个问题。选中了div标签，所以当你尝试删除画布上的方块时， 只有 div 标签会被删除，section 标签会保留。 你不能从画布中删除所有方块元素，所以要删除所有方块元素，必须在图层管理器...
ihatov08
@artf 抱歉，框架并不像你说的那样解决所有问题。 我以后会认真阅读文档。 谢谢你的回复。
artf
这不是个bug，更像是与HTML整体工作方式相关的用户体验问题，这也是我们在工具栏里提供“选择父”按钮的确切原因。 不要指望框架能帮你解决所有问题，提供用户友好界面和更好的用户体验是开发者的责任，有很多[组件属性]（https://grapesjs.com/docs/api/component.html#properties）可以帮上忙。
GJS Helper
这是像 GrapesJS 这样的可视化编辑器中常见的挑战，因为元素嵌套且视觉上重叠或维度相似。问题的核心在于 GrapesJS （以及浏览器整体）如何处理画布上的点击事件和组件选择。 根本原因 GrapesJS的默认选择机制，类似于标准的浏览器事件气泡，优先考虑点击坐标处最内侧的元素。当子元素（例如你在“第2区”中的 div ）完全覆盖或与其父元素具有相同的有效可点击区域（section）时，点击事件总是会先在子组件上注册。这防止了通过画布点击直接选择父组件。 这种行为导致...
#59692024年6月25日作者 uncldrw1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome LTS 可复制演示链接 / 描述一下那个虫子 我注意到导出代码时@container指令缺少空白。 这是我提供的代码： 要在自定义块中使用它，我会把CSS保存到块的style属性里，看起来是这样的： 为了确保间距，我尝试加了一个“逃脱”空格，但没成功： 打开导出代码时，@container名后面缺少空格，导致CSS损坏，在HTML中无法正常工作。 结果CSS： 需要解决这个问题，以确保导出的 CSS 中@container查询能正常运行。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你在处理指定名称的@container指令时，发现了GrapesJS的CSS序列化过程中的一个合法错误。问题源于内部的CSS解析器/导出器在导出时剥离了容器名称与查询条件之间的重要空白，导致CSS无效。 根本原因 GrapesJS 内部处理 CSS，通常会规范化或压缩 CSS。虽然这通常有益，但在命名@container规则（例如 @container portable (max-width: 639px)）的情况下，序列化器错误地移除了容器名称（portable）与查询条...
#59422024年6月12日作者 adarshsingh1972 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 镀铬 可复制演示链接 我在期刊中提供了代码 描述一下那个虫子 [截图时间：2024-06-12 下午3：09：58 IST.webm]（https://github.com/GrapesJS/grapesjs/assets/130237200/d5bbb21e-2e44-4564-a407-4768776c1cd8） 问题是，刚应用任何加粗或斜体后，点击某处就会消失。 onMounted（async （） => { componentsTypeScript.value = {}; componentsDefaults.value = {}; a...
artf
从官方演示来看，它似乎按预期工作，所以我猜这和你的自定义逻辑有关。 请提供一个简短且可复现的问题演示。
GJS Helper
你遇到的问题是，加粗或斜体格式在应用后点击后消失，这是自定义GrapesJS富文本编辑器（RTE）时常见的同步问题custom: true。 根本原因 当你在GrapesJS配置中设置richTextEditor: { custom: true }时，实际上是在告诉GrapesJS你将完全控制RTE的工具栏及其操作。因此，GrapesJS不会为“加粗”和“斜体”等动作提供默认实现，即使它们在actions数组中列出。 你的代码随后尝试用 rte.add('bold', {...
#59412024年6月11日作者 shahsalmanbukhari3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 125.0.6422.113 可复制演示链接 <script src=“https://grapesjs.com/js/toastr.min.js”></script> 描述一下那个虫子 如何复现这个漏洞？只需点击这些链接中的任意一个，他们会显示404页 预期的行为是什么？ 它应该能从CDN加载文件 目前的行为是什么？ 文件不会从CDN加载 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
artf
嘿，@shahsalmanbukhari你说的不是CDN，而是公开网站上的简单资源。请不要使用它们，因为没有版本控制，甚至不保证不会被迁移（因为网站迁移导致的）。 请使用真实的CDN作为使用方式 https://unpkg.com/grapesjs
shahsalmanbukhari
嘿@shahsalmanbukhari你说的不是CDN，而是公共网站上的简单资源。请不要使用它们，因为没有版本控制，甚至不保证不会被迁移（因为网站迁移导致的）。使用真实的CDN作为 https://unpkg.com/grapesjs 你好@artf 非常感谢，让我试试你建议的解决方案
GJS Helper
你遇到的 404 错误是关于提供的 GrapesJS 链接，是因为你误解了 GrapesJS 资源通常的提供方式。你分享的链接，比如 https://grapesjs.com/js/toastr.min.js 和 https://grapesjs.com/stylesheets/grapes.min.css，是直接指向 grapesjs.com 网站上托管的资源的路径。这些主要用于网站内部演示和页面， grapesjs.com 并非用于外部项目的公开 CDN。 根本原因：...
#59222024年5月30日作者 omerson-cruz2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ v125.0.6422.113（官方构建）（64位） 可复制演示链接 https://codesandbox.io/p/sandbox/eloquent-leaf-vd68cf?file=%2Findex.js%3A9%2C47 描述一下那个虫子 如何复现这个漏洞？将视频内容拖到画布上。 选择视频组件和角色设置/特征选择“YouTube”作为提供者粘贴YouTube源的视频ID。确保“控制”特性已启用尝试点击播放或调整视频分量的音量，但不起作用 预期的行为是什么？ 预期：当 Video 的“控制”启用后，用户可以使用视频界面的控制，比如“播...
artf
编辑过程中你不能与iframe互动，否则就无法从画布中选择它。 不过预览时你会检查iframe的互动。
GJSBlock
谢谢你举报，@omerson-cruz。 关于无法使用视频组件UI控件的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...