#65622025年7月9日作者 jsxOverdose3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 138.0.7204.101 可复制演示链接 https://jsfiddle.net/u3L89ejh/1/ 描述一下那个虫子 如何复现这个漏洞？ 调整图像大小 把它拖到画布上的别处 点击其中一个小蓝色缩小方块 观看图像跳跃到不同位置 预期的行为是什么？ 应该留在我放的地方 如果顶部/左/右/底部的值没有单位，则将值当作“px”来处理，而不是“%”。 目前的行为是什么？ 当你移动图像时，上下两侧的像素值表现良好。 但你一碰到缩放按钮，它就会切换到“%”，然后突然跳到画布上全新的位置。 行为准则 [x] 我同意遵守本项目的行为准则
artf
@jsxOverdose推送了这次新版本的修复：https://github.com/GrapesJS/grapesjs/releases/tag/v0.22.11
jsxOverdose
@artf 在新版本中，还有另一个bug：当你点击Y轴上的缩放手柄时，图片会明显变大。这是试玩版：https://jsfiddle.net/du81zL6r/
GJS Helper
你遇到的元素在移动后跳到错误位置并与调整器交互的问题，是GrapesJS处理CSS top和left属性时的已知行为，尤其是在应用position: absolute且单位未明确定义时。 根本原因 当画布上移动带有position: absolute的元素时，GrapesJS正确地使用px单位应用top和left样式。然而，top和left属性的默认StyleManager配置（在Position类别下）定义了可能units的列表（例如['px', '%', 'em', '...
#65492025年6月25日作者 yashvi20264 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/YPXdgmj 描述一下那个虫子 如何复现这个漏洞？ 上传图片 将其切换为移动视图 调整图像大小 ![图片]（https://github.com/user-attachments/assets/99f43e87-39bd-488c-8d64-e13ed698d49f） 预期的行为是什么？ 在样式管理器中手动更改宽度和高度时，图片会被调整大小。 目前的行为是什么？ 无法调整图片大小 原因是在Canvas中调整图像大小时不会添加重要，所以原始样式不会被覆盖。 行...
mosh-tudor
@yashvi2026 那是因为你用了自定义的CSS代码。 去除这一部分： “''js 样式：'.image{最大宽度：100%;@media（最大宽度：480px） {.image {display： inline-block;高度：自动 ！重要;宽度：100% ！重要;最大宽度：100%;}}, `` 来自“编辑部”。BlockManager.add（'image'， {'
artf
我确认组件调整现在没考虑“重要”，但我大致会按照@mosh-tudor的建议来做。 你不需要去掉所有“样式”，我猜你需要的就是这个，但我觉得没必要把“！important”放在上面。如果你需要“！important”，问题很可能出在图像组件之外。
yashvi2026
我需要在风格中使用'！important'。 我注意到在其他组件中，当默认样式中包含“！important”时，通过样式管理器添加的样式也会包含“！important”，以确保它们覆盖默认样式。 ![图片]（https://github.com/user-attachments/assets/0ce9b9ce-86da-41d5-9795-50221d792bce） 所以，当在样式管理器中手动更改样式时，会添加 ！important。 同样地，调整组件大小时，样式也应该加上...
#65352025年6月6日作者 MikeCraig4183 个回答
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 把你的版本从 1.0.48 改到 1.0.47 描述一下那个虫子 如何复现这个漏洞？ 从Word复制丰富的内容 粘贴到 Grapes 我正在使用自架选项 预期的行为是什么？ 内容应在编辑器中持续存在 目前的行为是什么？ 内容错误 行为准则 [x] 我同意遵守本项目的行为准则
MikeCraig418
补充说明，Grapes 的 HTML 格式内容会消失。HTML存储字符串如下：
artf
你用的是什么富文本编辑器？ 你能提供复现它的方法吗（比如我能复制相同的文本）？
GJS Helper
你在 v1.0.48 GrapesJS 遇到的问题，就是粘贴丰富内容（尤其是来自 Microsoft Word 等来源）会导致属性值分裂成单个属性，这是一种已知的回归现象。这通常表现为 style="color: red; font-size: 12px;" 属性被错误解析成 color="red" 和 font-size="12px"等独立属性，导致内容损坏和渲染错误。 根本原因 根本原因很可能是 GrapesJS内部HTML解析或净化逻辑的回归，该逻辑是在1.0.47和...
#65152025年5月13日作者 jsxOverdose2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 136.0.7103.93 可复制演示链接 https://jsfiddle.net/L4pu0tzc/ 描述一下那个虫子 如何复现这个漏洞？ 向编辑器添加多个图像元素。 为每张图像赋予相同的类名（例如，class=“shared-class”）。 选择并调整其中一张图片的大小。 预期的行为是什么？ 只有选定的图片应该被调整大小，无论共享的类名或其他属性如何。 目前的行为是什么？ 所有同类元素都会同时调整大小，即使只选中一个。 系统似乎在设置样式时优先考虑类名而非 ID，导致无意中出现全局样式更改。 行为准则 [x] 我同意遵守...
artf
确保开启此选项：https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors
GJS Helper
你遇到的问题是，在 GrapesJS中，用共享类调整元素大小会影响所有该类元素，这是 中已知的行为，源于它管理和应用 CSS 样式的方式。默认情况下，GrapesJS 通常会通过在类选择器下将样式分组来优化 CSS。当你调整组件大小时，GrapesJS可能会把这解读为关联类的样式变化，而不是对具体组件实例应用内联样式。 根本原因： 当组件大小被调整时，GrapesJS会更新其width和height属性。如果组件有一个或多个类，GrapesJS的内部样式管理逻辑可能会决定更...
#64942025年4月15日作者 yashvi20261 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/QwwLjBQ 描述一下那个虫子 如何复现这个漏洞？ 点击创建，然后快速且反复地摧毁。 调试时，我发现错误由以下代码引起： 未定义的“allcomponents”错误由：（editor.select 代码）引起。 未定义的“最后组件”错误： 将样式添加到组件会触发 stylable：change 事件，如果你的侧面函数仍在运行并且在此期间点击 Destroy，会报错。 ![图片]（https://github.com/user-attachments/asse...
GJS Helper
你遇到的 GrapesJS问题，即反复快速创建和销毁编辑器导致 undefined 'allcomponents' 和 undefined 'lastcomponent'等错误，是异步操作或快速生命周期变更中竞赛条件和状态不一致的经典例子。这通常发生在新编辑器实例初始化时，而前一个实例仍在被销毁过程中，或者内部GrapesJS事件监听器或计划任务试图对部分或完全销毁的编辑器实例进行操作。 根本原因分析 editor.select(wrapper)与undefined 'al...
#64852025年4月10日作者 yashvi20262 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/GgRbMyg 描述一下那个虫子 如何复现这个漏洞？ 添加文本框。启用RTE。 点击最后一个选项。 变色 点击 好 预期的行为是什么？ 重新打开颜色选择器时，选中的颜色应该是可见的。 目前的行为是什么？ 重新打开选色器时，选中的颜色不会显示。 ![图片]（https://github.com/user-attachments/assets/e5f02996-120b-486c-ade6-f75e7d2e776f） 行为准则 [x] 我同意遵守本项目的行为准则
mosh-tudor
@yashvi2026 你的代码有很多问题，这就是它无法正常工作的原因。 这和GrapesJS无关。 如果你不确定问题出在哪里，可以考虑用AI工具检查代码。
GJS Helper
你遇到的问题，GrapesJS的富文本编辑器（RTE）中的自定义颜色选择器在重新打开时不会显示之前选中的颜色，这源于自定义颜色选择器的onOpen实现没有正确初始化其界面，并未正确初始化GrapesJS当前的颜色值。 根本原因 当GrapesJS打开通过rte.colorPicker定义的自定义颜色选择器时，它调用onOpen函数，传递一个包含当前选中文本（如果有）color的opts对象，一个onSelect回调来应用新颜色，以及一个el（选择器应渲染的DOM元素）。你当...
#64462025年3月15日作者 brighterfrog2 个回答
描述 我想申请一个新的组件类型来处理交互式图表。 使用场景 在页面构建器中创建数据可视化 支持动态图表更新 与现有数据源的集成 预期行为 该组件应当： 支持多种图表类型（条形图、直线图、饼图） 允许通过组件面板输入数据 为图表元素提供样式选项 补充背景 这将增强GrapesJS的数据可视化能力。
artf
你好@brighterfrog我们只用GH Issues来报告错误。 请查看这些内容，了解我们如何管理功能请求和插件： [路线图流程]（https://github.com/GrapesJS/grapesjs/discussions/5291） [插件推荐流程]（https://github.com/GrapesJS/grapesjs/discussions/5985） 顺便说一句，你可能已经找到你想要的东西了：[GrapesJS Chartjs 插件]（https://g...
GJS Helper
GrapesJS 高度可扩展，允许你自定义组件类型以满足特定需求，比如集成交互式图表。这包括定义新的组件模型、视图逻辑以及用户交互的相关特征。我们将以Chart.js为示例图表库。 步骤1：包含图书馆Chart.js 首先，确保Chart.js包含在你的项目中。你可以通过CDN添加，或者通过npm安装。 步骤2：定义自定义图表组件 我们将定义一个名为 chart的新组件类型。这包括设置模型（默认属性、特征）和视图（渲染和更新方式）。 步骤3：为图表组件添加块 要让你的新 c...
#64452025年3月14日作者 bgrand-ch3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 136.0.1（64位） 可复制演示链接 https://grapesjs.com/docs/api/editor.html#editor 描述一下那个虫子 如何复现这个漏洞？ 去 https://grapesjs.com/docs/api/editor.html#editor 预期的行为是什么？ 展示活动列表。 目前的行为是什么？ '{REPLACE_EVENTS}' 行为准则 [x] 我同意遵守本项目的行为准则
artf
文档更新：https://grapesjs.com/docs/api/editor.html#available-events
artf
谢谢@bgrand，我很快🙇 ♂️会修好的
GJS Helper
感谢你报告这个问题。你正确地识别了 GrapesJS 文档网站上的一个漏洞。 根本原因： {REPLACEEVENTS} 占位符表明文档生成过程未能正确注入编辑器事件列表到 editor.html API 页面。这是文档生成器的构建时问题，而非 GrapesJS 库本身的漏洞。 当前状态： 我们承认本部分文档不完整，使用户难以发现所有可用的编辑事件。 寻找编辑活动的变通方法： 在文档修复过程中，你可以通过几种方法发现编辑器事件： *通过 editor.on(''):程序化...
#64252025年2月27日作者 asabryil1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器，最新版本 可复制演示链接 可在官方演示中复刻 描述一下那个虫子 如何复现这个漏洞？ 添加一个方块，将高度和最小高度设为0 添加一个法线块 添加一个容器 尝试把高度为0的块直接放到容器上，它会移除或重复一些组件，在某些情况下，0高度块无法上下拖拽。 预期的行为是什么？ 拖动方块不应该取决于元素的高度。 目前的行为是什么？ 拖拽方块取决于元素的高度，且必须大于0才能正常工作。 行为准则 [x] 我同意遵守本项目的行为准则
GJS Helper
这是GrapesJS中已知的行为，与其拖放系统（通常依赖视觉边界框）与零高度元素的交互有关。理想情况下，拖放机制应足够稳健，能够处理元素，无论其视觉尺寸如何，但height: 0（和min-height: 0）状态可能导致计算投放区和拖拽指示器位置时出现问题。 根本原因 GrapesJS拖放功能，像许多类似系统一样，依赖于准确确定DOM中元素的视觉边界和可用空间。当元素具有height: 0和min-height: 0时，其垂直维度完全崩溃。这使得拖放逻辑难以实现： 计算投...
#64202025年2月25日作者 peterchon1 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 133.0.6943.127（官方构建）（arm64） 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 创建文本块 开始输入任何日文字符 从自动建议浮动框中选择一条条目 预期的行为是什么？ 所选条目应输入文本块 目前的行为是什么？ 已输入“选择”条目但不可见，新的返回条目会加在文本块底部 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 无 https://github.com/user-attachments/assets/3dd992d8-dc13...
GJS Helper
你在GrapesJS中遇到的日语输入问题，即所选条目不可见且额外返回，这是依赖contenteditable和输入法编辑器（IME）的富文本编辑器中常见的问题，比如GrapesJS默认RTE使用的ProseMirror。这通常是由于IME合成阶段事件处理冲突所致。 根本原因 在输入日语（或其他需要IME的语言）时，输入会经历一个“组合”阶段，字符被组合并建议。Enter键通常用于确认IME自动建议框中选中的建议。该错误的根本原因是GrapesJS的底层富文本编辑器Prose...