#66682025年12月4日作者 msftedad2 个回答
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 用户影响： 屏幕阅读器用户无法识...
GJS Helper
这是一个合理的无障碍问题。GrapesJS编辑器的画布被渲染在一个<iframe>元素中。为了让屏幕阅读器正确识别并宣布该iframe的目的，它需要一个可访问的名称，通常由title属性或aria-label提供。 根本原因： 默认情况下，GrapesJS不会自动为主编辑器 iframe 分配 title 或 aria-label 属性。虽然 iframe 的内容（可编辑页面）可能有自己的标题，但 iframe 容器本身需要一个描述性名称，以便辅助技术告知用户其在页面中的角...
#66462025年11月11日作者 soul-media3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 与 Firefox 可复制演示链接 描述一下那个虫子 如何复现这个漏洞？ Chrome 和 Firefox： 为图片/文本添加填充 有时会出现错误，有时不会发生。 https://github.com/user-attachments/assets/01270f08-974d-4898-bde0-83233f9258e0 目前的行为是什么？ 铬 错误如下：Uncaught InvalidCharacterError：未能在“Element”上执行“setAttribute”：“0”不是有效的属性名。 这是我添加填充前的文字样子。...
trebor94
我也遇到了同样的问题，同时也在使用grapesjs-mjml插件。显然，只有在加载一个项目时，且该项目在组件attributes上存在style属性时才会出现。每次在编辑器中做了一次更改后，style属性都会被扩展，old value会加上最新的值，项目的JSON会呈指数增长。 我尝试了不同版本的 grapesjs，从版本 0.22.2 开始往上。到了版本 0.22.6 时问题开始出现，所以在发布 0.22.5 到 0.22.6 之间某个时候，这个 bug 应该被引入了。在...
trebor94
很遗憾，我没能弄清楚在导出之前加载的项目数据时，'style'属性会在哪里、什么时候被添加到组件的'style'里。也许有人能找出问题的原因。 @soul-media：顺便说一句，给“mjml”组件补丁“init”方法作为变通方法似乎有效，并且阻止了“style”属性在项目数据导出时添加（即使加载了之前保存的项目）。这似乎即使在“0.22.14”版本下也能正常工作，JSON输出会和你截图右侧的差不多。 要修补该函数，可以使用 'grapesjs-mjml' pluginsO...
GJS Helper
看起来你在 GrapesJS遇到了一个bug，特别是在使用MJML组件并应用样式（如填充）时，导致生成和存储无效属性。这个问题似乎是回归，因为它在旧版本（0.22.2）中有效，但在新版本中失败。 根本原因分析 问题的核心在于 GrapesJS 如何序列化和反序列化组件属性，尤其是针对MJML元素。当你添加填充或其他样式时， GrapesJS 有时会错误地生成纯数字名称的属性（例如， 0="font-size:30px"， 1="font-size:30px"），覆盖在 mj...
#66342025年10月28日作者 ssteele3 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 141.0.7390.123 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 我们的应用服务于要求所有页面对所有用户均可访问的客户。我正在运行最新的 Grapesjs 库： “package.json “grapesjs”： “0.22.13”， “grapesjs-blocks-basic”： “1.0.2”， “grapesjs-preset-webpage”： “1.0.3”， <img width=“1728” height=“1117” alt=“Image” src=“...
artf
这与 https://github.com/GrapesJS/preset-webpage 相关 你可以自由地在插件上更新样式，或者提交带有修复的PR。
GJS Helper
在像GrapesJS这样复杂、动态的网页编辑器中实现完全无障碍合规需要仔细考虑和定制。WAVE评估工具经常会发现缺少ARIA属性、对比度不足以及交互组件中使用的非语义元素等问题。虽然GrapesJS提供了坚实的基础，但一些默认UI元素可能缺乏获得满分所需的明确无障碍属性。 以下是WAVE等工具报告的常见无障碍问题的详细说明，以及如何在您的 GrapesJS 实施中解决这些问题： 1.缺少ARIA属性和角色（例如面板按钮、标签页） GrapesJS UI中的许多互动元素，如面...
#65832025年8月5日作者 msftedad2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Edge 版本 135.0.2535.51（官方构建）（64 位），Chrome 版本 135.0.6422.112（官方构建）（64 位） 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 测试环境： 操作系统：Windows 11[版本24H2（操作系统构建版24631.3593）] Edge：版本 135.0.2535.51（官方版本）（64 位） Chrome：版本 135.0.6422.112（官方构建）（64位） 屏幕阅读器：NVDA（2024.4.2） 测试网址：https://grapesj...
artf
嘿，@msftedad网站仓库在[这里]（https://github.com/GrapesJS/website），欢迎提交修复后的永久注册（[file]（https://github.com/GrapesJS/website/blob/main/src/app/（demos）/GrapesEditor.tsx））。我决定关闭这个问题，因为它和核心无关。
GJS Helper
这是一份有效且重要的无障碍漏洞报告，适用于GrapesJS演示页面。问题源于GrapesJS标志的<img>标签中alt属性为空，错误地向屏幕阅读器传达该图像纯属装饰性。对于同时作为首页链接的标志来说，这是一个有意义的元素，需要描述性替代文本。 根本原因 虽然alt属性存在于演示页面GrapesJS标志的HTML中，但它被设置为空字符串（alt=""）。根据网页内容无障碍指南（WCAG），空alt属性应仅用于纯装饰性且不传递信息的图片。在这种情况下，GrapesJS标志是一...
#58292024年4月19日作者 Mustufask3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 123.0.6312.123可复制演示链接 未捕获类型错误：_webpackrequire_.r 不是 ./nodemodules/grapesjs/dist/grapes.mjs （grapes.mjs：1：1） 在 _webpackrequire （bootstrap：789：1） at fn （bootstrap：150：1） 在 ./src/Demo/Templates/TextEditor.js （Templates.js：31：1） 在 webpackrequire （bootstrap：789：1） at fn （boots...
Mustufask
@artf请帮我解决这个问题，因为这个节点模块文件不允许 Grapesjs 在我的基于 react 的环境中工作 项目
artf
相关讨论 https://github.com/GrapesJS/grapesjs/discussions/5400 请在开启问题前使用搜索功能。
GJS Helper
你遇到的Uncaught TypeError: _webpackrequire.r is not a function错误是Webpack常见的特有问题，涉及其处理ES模块（以.mjs结尾的文件）及其内部模块互操作逻辑。webpackrequire.r函数是Webpack的辅助工具，用来标记模块为ES模块（例如，Object.defineProperty(exports, 'esModule', { value: true });）。当该函数被报告为not a functi...
#56772024年2月12日作者 soundharya23252 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞？插入带有链接的<a>标签。将浮点数向桌面单元格（td）赋予左或右。 预期的行为是什么？ 在表格单元格中添加浮点右/左后，对齐应该只会改变 目前的行为是什么？ 表格单元格被改成了表格行/表格正体 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![表格行]（https://github.com/GrapesJS/grapesjs/assets/159787750/8f713b75-b3d8-4f40-a9f8-be9784...
GJS Helper
你遇到的问题是，当应用float: right或float: left时，<td>元素的显示行为（表现为table-row或table-body）并不是GrapesJS特有的bug。相反，这是CSS float与HTML表元素内在显示模型交互的基本行为。 根本原因解释 HTML 表格元素（<table>， <tbody>， <tr>， <td>）具有独特且严格的显示模型（display: table， display: table-row-group， display: t...
#55562023年12月13日作者 pittleCheung2 个回答
GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ editor.addComponents(` <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0" role=“tablist” data-te-nav-ref > <li role=“演示”> <a class="my-2 block border-x-0 border-b-2 border-t-0 border-tra...
artf
已经报告并修复了 https://github.com/GrapesJS/grapesjs/issues/5525
GJS Helper
你遇到的问题是，当添加和选择包含大量实用类的元素时（尤其是像Tailwind CSS这样的框架或使用data-[...]属性的组件库），GrapesJS崩溃或无响应，是已知的性能瓶颈。 根本原因 GrapesJS默认会尝试解析 HTML 内容中发现的每个唯一类，并将其注册到内部类管理器中。这些类随后会在样式管理器面板中提供，供选择和取消使用。当添加一个具有极多实用类（例如 px-7 pb-3.5 pt-4 text-xs font-medium uppercase lead...
#40292021年12月22日作者 jloguercio2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v96可复制演示链接 没有演示描述一下那个虫子 如何复现这个漏洞？在块管理器中添加超过1000个方块，我这里是7864个字体的超棒图标。尝试从方块面板拖拽任意方块 解释 我把所有字体 Awesome Pro 图标都加成了单块，使用下面的代码，其中 jsonIcons 是一个包含所有 7,864 个图标的 json 变量，我需要用 archieve 把列表里的每个图标拖拽到 canvas 上 主要问题是当我尝试拖动图标方块时，拖拽事件和放置方块的速度太慢，绿色下落标记也是如此，我该如何解决这个问题？有没有办法在大量方块的情况下提升性...
artf
针对你，我建议创建一个[自定义块管理器]（https://grapesjs.com/docs/modules/Blocks.html#customization），你可以根据需要调整块的界面（比如搜索、DOM虚拟化等）。
GJSBlock
谢谢你举报，@jloguercio。 关于在拥有1000+自定义块时，拖块到Canvas性能的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...
#37592021年9月8日作者 throne19864 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome新版本可复制演示链接 https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo？file=/src/Editor.js描述一下那个虫子 如何复现这个漏洞？只需将图片块拖放到画布上还可以在落地页面块中找到拖放自定义图片块到 Canvas Live demo ： [https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo？file=/src/Editor.js]（url） 预期的行为是什么？ 当用户丢弃自定义图片块、默认图片块，或者双击C...
throne1986
我已经解决了这个问题，方便以后参考 首先我移除了这个功能： editor.on（“component：add”， （model， argument） => { if （model.getName（） === “Image”） { modal.setContent（ModalImages）; } }); 我用这个功能替换了 编辑。Commands.add（'open-assets'， { run（editor， sender， opts = {}） { dispatch（se...
artf
当你运行“editor.command.run（'open-assets'）”时，你必须传递选项，比如 “''js editor.command.run（'open-assets'， { 目标：editor.getSelected（）， }) ```
throne1986
@artf我解决了问题，问题是关闭问题，解决方案就是通过以下选项传递URL。 编辑。Commands.run（“open-assets”， { 目标：editor.getSelected（） 网址：imageUrl }); 编辑。Commands.add（“open-assets”， { run（editor， sender， opts = {}） { dispatch（setIsOpen（true））; console.log（“imageUrl”，opts.url）;...
#35292021年6月10日作者 tmrowe1231 个回答
你好， 我对这个很棒的项目还比较新，但我正在尝试在从dropMenu选中组件ID后，更改另一个组件onClick的显示。我在选择 dropMenu 特性后，试图为组件添加 onClick 属性遇到了困难。我似乎无法从 addAttributes（） 中访问 dropMenu 特性的值。我也无法使用外部的 addAttributes（） 变量，比如 'var comp = document.getElementById（this.get（“traits”）.where（{name： “dropMenu”}）[0].get（“value”）'，包括 editor.getSelected（）。 提前感谢大家 '编辑。Components...
GJSBlock
谢谢你举报，@tmrowe123。 感谢你分享关于尝试在组件中添加onClick属性的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序修复...