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太粗糙😅，甚至连编辑器都加载不了。
也许你可以分享全栈的跟踪，看看具体发生在哪里？
GrapesJS的键盘处理器中的TypeError: Cannot read properties of undefined (reading 'toLowerCase')是一个已知问题，当某些键盘事件，尤其是用于中文、日语或韩语等语言的输入法编辑器（IME）中，从GrapesJS画布的输入字段中发出时就会出现。根本原因是在 IME 组合过程中，event.key属性可以在提交字符前被合法地为keydown事件而undefined。GrapesJS的内部Keymaps模块试图直接调用event.key.toLowerCase()，未检查其存在，导致TypeError并导致应用程序崩溃。 根本...
相关问答
通过相似的问题讨论继续研究。
问题 #6706
TypeError：e.getRoot 不是函数（样式管理器中的竞态条件）
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 所有浏览器（Chrome、Safari、Firefox、Edge） 可复制演示链接 https://jsfiddle.net/saeedhbi/powxyjdq/3/ 描述一下那个虫子 如...
问题 #3861
按“s”或“w”键时 JS 错误——无法读取未定义属性（读取“indexOf”）
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 94.0.4606.81（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞？选择...
问题 #4192
Drag boundary issue with dragMode: absolute/translate
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome，Firefox 可复制演示链接 https://jsfiddle.net/drashti/9xk5ph8j/1/ 描述一下那个虫子 我正在用 Grape JS构建器来为我的...
问题 #5334
在画布中选择自定义组件类型无法正常工作
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正试图让它像这里描述的那样工作[[问题] C...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Introducing Search on GJS.Market
GJS.Market now has one search across everything we publish — plugins, articles, community questions, guides, authors and services. Press ⌘K from any page.
教程
2026年构建一个SaaS页面构建器需要多少钱？
2026年构建一个SaaS页面构建器的成本是多少？探索实际的开发成本、时间表、功能，以及使用 GrapesJS 如何降低成本
教程
PageKit：你无论如何都得自己开发 GrapesJS 应用
一个围绕开源GrapesJS核心的源代码可用Next.js应用——发布、自定义域名、潜在客户、结账和插件加载器。
浏览插件分类
直接跳转到市场上的插件分类页面。