GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

状态

排序

找到 203 个问题

🔍 enhancement

#67072026年2月13日作者 saeedhbi1 个回答

0 个反应

缺陷画布 keyboard 提问增强

无法读取 Canvas 模块中空属性（读取“hasFocus”）的属性

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome（版本142-144）、Safari（版本16.3、26.1），可能还有其他版本可复制演示链接 https://jsfiddle.net/saeedhbi/tqfe7p04/ 描述一下那个虫子如何复现这个漏洞？初始化 GrapesJS 编辑器（v0.22.11 或 v0.22.14）在iframe完全加载前，按下键盘快捷键（例如Ctrl+Z、Delete或任意命令键）命令系统在 iframe 准备好前调用 'Canvas.hasFocus（）' 观察“类型错误：无法读取空属性（读取”hasFocus“）” 预期的行为是什...

GJS Helper

GrapesJS Canvas模块中的TypeError: Cannot read properties of null (reading 'hasFocus')是已知的问题，源于竞争条件。当键盘命令（如Ctrl+Z、删除）在编辑器的iframe文档完全加载前或被销毁/卸载后尝试调用editor.Canvas.hasFocus()时，就会出现这种情况。根本原因 Canvas.hasFocus()方法内部调用this.getDocument().hasFocus()。thi...

查看详情

#66872026年1月13日作者 rhaarhoff1 个回答

0 个反应

依赖提问增强安全 undo-manager

依赖：主干撤销已弃用（NPM）——有什么替代方案吗？

GrapesJS版本 0.22.14（最新版本截至2025-11-20）预期的行为是什么？ GrapesJS 安装树中没有弃用依赖（或替换指南/路线图）。现在的行为如何？安装[email protected]会发出npm/pnpm弃用警告，因为它依赖于[email protected]（在npm上弃用）。繁殖步骤 PNPM [email protected]（或 NPM I [email protected]）注意主干网[email protected]的弃用警告补充背景这本身不是漏洞报告;这是维护/支持风险（供应链问题）。相关历史问题：#3443 涉及下划线咨询路径;本报告专门讨论软件包弃用状态。问题：是否有计划移除或替换骨干...

GJS Helper

安装GrapesJS时对[email protected]的弃用警告是关于依赖维护的一个合理担忧。让我们来分析一下情况及其对GrapesJS用户的影响。根本原因：弃用依赖 GrapesJS 目前利用 backbone-undo 作为其核心的撤销/重做功能。该库提供了管理编辑器内更改历史的底层机制，允许用户回退或重新应用操作。backbone-undo包本身在 npm 上被标记为弃用，安装时会触发警告。影响与风险评估虽然弃用警告通常应被认真对待，但backbone-...

查看详情

#66782025年12月17日作者 J-Wick41 个回答

0 个反应

提问缺陷画布组件增强

YouTube 现在要求嵌入视频 iframes 使用 referrerpolicy=“strict-origin-when-cross-origin” 属性才能正常播放。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？勇敢可复制演示链接不描述一下那个虫子如何复现这个漏洞？试着在落地页添加YouTube视频，看看情况如何。预期的行为是什么？ YouTube 视频渲染并可播放目前的行为是什么？ YouTube会出错，要求用户访问 YouTube.com 观看视频，因为iframe代码中额外要求一个属性。问题：YouTube 现在要求 referrerpolicy=“strict-origin-when-cross-origin” 属性在嵌入视频iframe上进行正确播放。 renderYoutube（）和 renderYoutubeNoCo...

GJS Helper

这确实是一个有效的bug报告。YouTube已经更新了嵌入要求，如果iframe上没有referrerpolicy="strict-origin-when-cross-origin"属性，视频可能会无法播放，出现错误或需要用户直接访问 YouTube.com。GrapesJS核心对YouTube嵌入的ComponentVideoView缺少了这一关键属性。根本原因 GrapesJS中的ComponentVideoView，特别是 renderYoutube() 和 ren...

查看详情

#66742025年12月14日作者 OfirD12 个回答

0 个反应

style-manager 提问组件缺陷增强

带有哈希导航的锚点链接在预览模式下无法使用

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 143.0.7499.41 可复制演示链接 https://jsfiddle.net/mghzw41k/2/ 描述一下那个虫子在预览模式下，带有哈希导航的锚点链接（例如 href=“#section”）无法使用。默认的浏览器导航行为被阻止了，尽管预览模式（我认为）应该允许正常的页面交互。如何复现这个漏洞？初始化GrapesJS编辑器添加带有锚点链接的内容，指向一个部分：“<a href=”#about“>前往”，</a> 添加目标部分：“<section id=”about“>关于部分</section>” 进入预览模...

doudou673

我也遇到过同样的问题。

GJS Helper

你遇到的锚点链接（哈希导航）在GrapesJS预览模式下无法正常工作的问题，是GrapesJS在画布内处理交互时常见的现象。在编辑模式下，GrapesJS会拦截元素上的点击事件，尤其是链接，以防止导航，转而允许选择和操作组件。虽然这对编辑器功能至关重要，但这种事件预防有时会持续存在，甚至干扰浏览器的原生行为，即使编辑器处于预览模式，理想情况下正常页面交互应被启用。根本原因： GrapesJS 将事件监听器附加到 canvas iframe 文档中，以管理组件选择并防止非意...

查看详情

#66682025年12月4日作者 msftedad2 个回答

0 个反应

画布 accessibility 缺陷增强提问

Windows中的iframe没有定义可访问名称。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge（版本 143.0.3650.46）、Chrome（版本 143.0.7499.41）可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子测试环境：操作系统：Windows 11 版本 25H2（系统构建 26220.7271）浏览器：Edge（版本143.0.3650.46）、Chrome（版本143.0.7499.41）屏幕阅读器：NVDA（2025.3.1），JAWS（2025.2508.120）网址：https://grapesjs.com/demo 用户影响：屏幕阅读器用户无法识...

msftedad

大家好，这个问题有最新进展吗？

GJS Helper

这是一个合理的无障碍问题。GrapesJS编辑器的画布被渲染在一个<iframe>元素中。为了让屏幕阅读器正确识别并宣布该iframe的目的，它需要一个可访问的名称，通常由title属性或aria-label提供。根本原因：默认情况下，GrapesJS不会自动为主编辑器 iframe 分配 title 或 aria-label 属性。虽然 iframe 的内容（可编辑页面）可能有自己的标题，但 iframe 容器本身需要一个描述性名称，以便辅助技术告知用户其在页面中的角...

查看详情

#66512025年11月17日作者 DavidHarvey2 个回答

0 个反应

提问组件缺陷增强 typescript

将可文本组件移动到文本时，可丢弃功能被忽略

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 142.0.7444.61 可复制演示链接 https://codepen.io/DavidHarvey-the-lessful/pen/ZYWeMbG 描述一下那个虫子当将“可丢弃”组件移动到“文本”组件时，组件“可丢弃”状态会被忽略。如何复现这个漏洞？尝试将可文本组件拖拽到文本组件中，使用“droppable： false”。预期的行为是什么？作为用户，我认为将 droppable 设置为 false 可以防止内部组件丢失。目前的行为是什么？放弃是允许的。行为准则 [x] 我同意遵守本项目的行为准则

artf

https://github.com/GrapesJS/grapesjs/pull/6652#issuecomment-3551018995

GJS Helper

你遇到的问题是，当textable组件被拖入GrapesJS text组件时，droppable: false会被忽略，这是GrapesJS集成富文本编辑器（RTE）并处理textable组件时已知的行为。根本原因在GrapesJS中，组件上的droppable属性主要控制在GrapesJS组件树结构中是否可以作为子组件添加其他GrapesJS组件。例如，如果你有一个div组件，droppable: false，你不能将另一个div组件作为子组件拖入该组件。然而，Gr...

查看详情

#66032025年9月4日作者 nanto2 个回答

1 个反应

提问组件缺陷增强 typescript

属性值中不逃避 & 符号

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v142.0.7392.0 （canary）可复制演示链接 https://jsfiddle.net/xce183nm/1/ 描述一下那个虫子如何复现这个漏洞？创建一个编辑器实例，加载包含字符引用的 HTML 代码。 “''js const editor = Grapesjs.init（{ 组件： '<body><p title=“< & >”></p></body>'， }); 预期的行为是什么？属性值中的符号通过字符引用转义。“p”元素的“title”属性值被解析为“< & >...

artf

谢谢你提供的所有信息和细节，这很有帮助。也谢谢你的宣传。

GJS Helper

你发现了GrapesJSHTML序列化过程中关于属性值转义的一个关键漏洞。问题源于Component模型的renderAttributes方法，它直接将属性值插入HTML字符串，而没有正确的HTML实体转义。这导致输出中出现未转义字符，如&、<和>，破坏往返一致性，并可能导致其他工具的解析问题。根本原因当GrapesJS解析HTML，浏览器的DOM解析器会正确解释HTML实体（例如，<变为<，&amp;变为&）。这些未转义的值随后存储在内部Comp...

查看详情

#65912025年8月20日作者 CES-TechAdmin2 个回答

0 个反应

缺陷提问增强 keyboard

在 Safari 中，自 v0.22.1 起，拖放方块功能不再正常工作

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Mac 版 Safari 18.5 可复制演示链接 https://codepen.io/jmulik/pen/LEpdjZq 描述一下那个虫子如何复现这个漏洞？在Chrome中查看 https://codepen.io/jmulik/pen/LEpdjZq - 支持拖放方块。在Safari中查看。- 无法放置和放下方块。预期的行为是什么？变装和变装在Safari里应该能行。就像Chrome一样。目前的行为是什么？在Safari中，方块的拖放功能不起作用。观察 Safari 中的拖拽功能在 GrapesJS v0.21.13...

them7d

是的，它不能用，因为代码和Safari浏览器不完全兼容要解决这个问题，你需要在NextJS中使用 grapes ，比如这个页面 https://grapesjs.com/demo.html

GJS Helper

你遇到的拖放功能自 v0.22.1 以来在 Safari 中无法正常工作GrapesJS是与框架存储管理变更相关的已知行为。根本原因 GrapesJS v0.22.0 对其storageManager进行了重大更新，indexedDB成为默认存储驱动，以提升性能和容量。虽然 indexedDB 整体上很稳健，但 Safari，尤其是在某些情境下，比如 iframes（如你的 Codepen 演示所示）或启用了“防止跨站追踪”等隐私设置时，可能会有更严格的政策或针对inde...

查看详情

#65822025年8月5日作者 msftedad2 个回答

0 个反应

组件缺陷增强提问 keyboard

不提供单指针操作模式用于编辑元素拖拽操作。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge：版本 135.0.2535.51（官方构建）（64 位），Chrome 版本：版本 135.0.6422.112（官方构建）（64 位）可复制演示链接 https://app.grapesjs.com/studio?utmsource=grapesjs&utmmedium=mainTopNav 描述一下那个虫子测试环境：操作系统：Windows 11[版本24H2（操作系统构建版24631.3593）] Edge：版本 135.0.2535.51（官方版本）（64 位） Chrome：版本 135.0.6422.112（官方构...

msftedad

大家好，这个问题有最新进展吗？

GJS Helper

你提到的问题凸显了大量依赖拖拽交互的网页构建者常见的无障碍挑战。 GrapesJS默认主要通过鼠标/触摸拖放手势实现块和组件操作，这些操作本身无法通过键盘导航或单指针模式访问，而某些无障碍标准（如 WCAG 2.1 成功标准 2.5.1 指针手势，暗示了路径手势的替代方案）。你看到的“拖放控制”是为鼠标操作设计的，而非键盘激活。根本原因 GrapesJS 块管理器和添加新组件的画布交互基于指针设备（鼠标、触摸）的直接操作范式构建。没有内置机制仅通过键盘输入从块面板启动“拖...

查看详情

#64482025年3月15日作者 brighterfrog2 个回答

0 个反应

增强常规

功能请求：暗黑模式支持

功能描述在编辑器界面中添加暗黑模式支持。动机减少夜间发育时的眼睛疲劳符合现代UI/UX标准支持系统级暗模式偏好拟议实施添加暗色模式色彩调色板创建主题切换机制用户偏好的持久化添加系统主题检测补充背景许多用户在夜间工作，并请求了此功能。

artf

与[这里]（https://github.com/GrapesJS/grapesjs/issues/6446#issuecomment-2729421252）相同

GJS Helper

为GrapesJS添加暗黑模式支持涉及CSS主题、用于主题切换和持久化的JavaScript，以及与系统偏好设置的集成。虽然GrapesJS没有内置暗黑模式切换，但其模块化特性允许实现稳健的自定义实现。以下是详细的做法： 1.定义暗模式色彩调色板（CSS）实现主题最有效的方法是使用CSS变量。你需要为光源主题定义一组变量，然后在应用到编辑器根元素的.theme-dark类（或类似类）中覆盖它们。这个自定义CSS应在GrapesJS默认样式之后加载，以确保覆盖生效。首先，...

查看详情

GrapesJS 问题

浏览所有主题