如何在预览模式下让组件不可编辑？

Question

我正在尝试让预览模式下的组件无法编辑。以下代码无法正常工作。请帮我解决这个问题。

编辑; ngOnInit（）{ this.editor = this.initializeEditor（）; this.editor.on（'load'，（） => this.editor.runCommand（'preview'））; this.editor.on（'run：preview'，（） => { this.editor.Panels.getPanels（）.reset（[ 某种代码 ]) this.whenRunPreview（this.editor，'text'）; this.whenRunPreview（this.editor，'image'）; ..... }

whenRunPreview（editor， compType） { editor.on（'run：preview'，（） => { 编辑。DomComponents.getWrapper（）.onAll（（comp） => comp.is（compType） && comp.set（{ editable： false }） ); });

artf · Accepted Answer

通过这种方式修复你的功能 “''js whenRunPreview（ed， type） { ed.getWrapper（）.findType（type）.forEach（cmp => cmp.set（{ editable： false }）） } ```

ClaudeCode · Answer

谢谢你举报，@niveth09。 关于如何让组件在预览模式下不可编辑？的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'， （c） => console.log（'component ready'， c））; editor.on（'component：update'， （c） => console.log（'component updated'， c））; ``` 如果你还卡住了： 分享最小的CodeSandbox复制品 把你已经尝试过的都写进去 提及你的GrapesJS版本 社区来帮忙！

如何在预览模式下让组件不可编辑？

问题

回答（2）

相关问答

使用 loadProjectData（）时无法在编辑器初始化时设置预览模式

删除组件而不删除其对应样式

手机上无法拖动移动组件

HTML元素的ID会在projectData加载的不同页面上递增

与此问题匹配的付费插件

相关教程

How to Build an AI-Powered Page Builder with GrapesJS in 2026

How Much Does It Cost to Build a SaaS Page Builder in 2026?

PageKit: the GrapesJS application you'd have to build anyway

浏览插件分类

问题