使用 loadProjectData（） 时无法在编辑器初始化时设置预览模式
声明一下，这其实不算是个bug，我能实现预期的行为，替换了'editor.onReady（（） => { editor.runCommand（“preview”）; }）;' 与 'editor.on（'update'， （） => { editor.runCommand（'preview'）; }）;`
阅读下方完整回答 ↓问题
GrapesJS 版本
- 我确认使用最新版本 GrapesJS
你用的是什么浏览器？
Chrome v111
可复制演示链接
https://codesandbox.io/s/grapesjs-react-components-forked-h3j496？file=/src/index.js
描述一下那个虫子
如何复现这个漏洞？
- 用 Reactjs 启动一个项目 grapesjs
- 编辑器初始化后立即使用
loadProjectData(data) - 通过
editor.onReady(() => { editor.runCommand("preview"); });（或任何其他方式）设置预览模式
预期的行为是什么？ 编辑器应该包含所有预览行为（例如组件上不滑鼠或样式选择）
目前的行为是什么？ 组件变得不可编辑，但仍有编辑模式的行为（例如组件上没有悬停或选择样式）
所有重现该漏洞的必要代码都在演示链接里
行为准则
- 我同意遵守本项目的行为准则
回答（2）
声明一下，这其实不算是个bug，我能实现预期的行为，替换了'editor.onReady（（） => { editor.runCommand（“preview”）; }）;' 与 'editor.on（'update'， （） => { editor.runCommand（'preview'）; }）;`
你遇到的问题是，尽管GrapesJS组件在loadProjectData()后运行了preview命令，仍然保留编辑模式的行为（比如悬停/选择样式），这是与异步操作相关的时序问题。 根本原因 当你初始化GrapesJS并立即调用editor.loadProjectData(data)时，这个操作是异步的。editor.onReady()回调会在编辑器实例本身完全初始化并准备交互时触发，但它不会等待loadProjectData()方法完成将项目组件渲染到画布上。 因此，当editor.runCommand("preview")在editor.onReady()中执行时，可能会将预览样式和行为...
相关问答
通过相似的问题讨论继续研究。
问题 #5346
删除组件而不删除其对应样式
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ <img width=“1665” al...
问题 #4851
This.on（'change：attributes：type'， this.handleTypeChange）不支持数组类型
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 108.0.5359.125可复制演示链接 https://codesandbox.io/s/frosty-darkness-7po7xl描述一下那个虫子 如何复现这个漏洞？使...
问题 #4187
Editor Destroy method throws an error in React
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬98 可复制演示链接 https://codesandbox.io/s/withered-rain-z74rst?file=/src/App.js 描述一下那个虫子 如何复现这个漏洞？...
问题 #5457
加载ProjectData 0.21.7时编辑器冻结
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 117.0 可复制演示链接 本地主持 描述一下那个虫子 grapesjs“： ”^0.21.7“， editor.loadProjectData({ “资产”： []， “...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
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年用 GrapesJS 构建AI驱动的页面构建器
我们构建GJSDocs的经验——从简单的AI文本生成到结构化、上下文感知的视觉编辑
教程
2026年构建一个SaaS页面构建器需要多少钱？
2026年构建一个SaaS页面构建器的成本是多少？探索实际的开发成本、时间表、功能，以及使用 GrapesJS 如何降低成本
浏览插件分类
直接跳转到市场上的插件分类页面。