TypeError：无法读取键盘处理程序中未定义属性（读取“toLowerCase”）
你好@artf，在深入挖掘全栈跟踪后，我发现错误不在 GrapesJS 里。 “event.key.toLowerCase（）”调用来自我们自己的应用代码——一个全局代码 'window.addEventListener（“keydown”， ...）我们在代码库中其他地方有处理程序， 与GrapesJS并行运行。因为我们的webpack构建将多个模块捆绑成同一个块 （'dist/1348'），哨兵框架具有误导性，我们错误地将来源归于GrapesJS。 GrapesJS 自己的键盘处理使用 'event.keyCode'，不涉及此错误。这是 完全站在我们这边，我们已经解决了问题。 关于 jsfiddle，这是真诚地试图孤立问题，而...
阅读下方完整回答 ↓问题
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/tdsLa6qe/ 描述一下那个虫子 如何复现这个漏洞？ 创建一个基础的GrapesJS编辑器（版本0.22.11或0.22.14） 向画布添加输入字段组件 聚焦输入场 发送一个键盘事件，其中“event.key”为“未定义”，用于IME作曲事件（主要是中文/日文/韩文键盘） 观察“类型错误：无法读取控制台中未定义属性（读为”toLowerCase“）” 预期的行为是什么？ 键盘处理器应优雅地处理“event.key”未定义“的情况，以及以下情况： 跳过未定义键的处理，或 使用默认值/备用值，或 在调用 '.toLowerCase（）' 之前，请检查 'event.key' 的有效性 不应出现任何错误，键盘功能应能正常运行。 目前的行为是什么？ 当键盘事件源自输入字段且“event.key”属性为“未定义”时，GrapesJS 会抛出“TypeError”。内部键盘处理器在未进行空/未定义检查的情况下调用“event.key.toLowerCase（）”，导致应用程序崩溃。 错误信息： 行为准则 [x] 我同意遵守本项目的行为准则
回答（3）
你好@artf，在深入挖掘全栈跟踪后，我发现错误不在 GrapesJS 里。 “event.key.toLowerCase（）”调用来自我们自己的应用代码——一个全局代码 'window.addEventListener（“keydown”， ...）我们在代码库中其他地方有处理程序， 与GrapesJS并行运行。因为我们的webpack构建将多个模块捆绑成同一个块 （'dist/1348'），哨兵框架具有误导性，我们错误地将来源归于GrapesJS。 GrapesJS 自己的键盘处理使用 'event.keyCode'，不涉及此错误。这是 完全站在我们这边，我们已经解决了问题。 关于 js...
嘿，@saeedhbi，你在我们的代码里到底在哪里看到“event.key.toLowerCase（）”？你确定不是你这边的吗？ 可惜jsfiddle帮不上忙，感觉AI太粗糙😅，甚至连编辑器都加载不了。
也许你可以分享全栈的跟踪，看看具体发生在哪里？
谢谢你举报，@saeedhbi。 关于TypeError：无法读取键盘处理程序中未定义属性（读取“toLowerCase”）的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'componen...
相关问答
通过相似的问题讨论继续研究。
问题 #6706
TypeError：e.getRoot 不是函数（样式管理器中的竞态条件）
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/powxyjdq/3/ 描述一下那个虫子 如...
问题 #3861
按“s”或“w”键时 JS 错误——无法读取未定义属性（读取“indexOf”）
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 94.0.4606.81（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞？选择正体元素按...
问题 #4192
DragMode：absolute/translate 时拖拽边界问题
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome，Firefox 可复制演示链接 https://jsfiddle.net/drashti/9xk5ph8j/1/ 描述一下那个虫子 我正在为我的客户使用Grape JS构建器来设置构...
问题 #5334
在画布中选择自定义组件类型无法正常工作
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正在尝试让它像这里描述的那样工作[[问题] Canva...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
教程
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
浏览插件分类
直接跳转到市场上的插件分类页面。