How to make components not editable in preview mode?
通过这种方式修复你的功能 “''js whenRunPreview(ed, type) { ed.getWrapper().findType(type).forEach(cmp => cmp.set({ editable: false })) } ```
阅读下方完整回答 ↓问题
我正在尝试让预览模式下的组件无法编辑。以下代码无法正常工作。请帮我解决这个问题。
编辑; 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 }) ); });
回答(2)
通过这种方式修复你的功能 “''js whenRunPreview(ed, type) { ed.getWrapper().findType(type).forEach(cmp => cmp.set({ editable: false })) }
谢谢你举报,@niveth09。 关于如何让组件在预览模式下不可编辑?的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) => console.log('comp...
相关问答
通过相似的问题讨论继续研究。
问题 #5019
使用 loadProjectData() 时无法在编辑器初始化时设置预览模式
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v111 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-forked-h3j496?file=/sr...
问题 #3634
How we can hide RTE for editable components ?
HI We have a requirement, where we don't want to show rte on editable components. how we can achieve that ?
问题 #3631
How to load dynamic content in the final HTML file?
我到处找过,包括问题部分,也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容(不仅仅是导出或通过编辑器保存时)。 我想在 grapejs 组件中加入一个脚本,它总是从网页抓取内容并更新组件。 比如,当我写博客并存储在数据库里时。现在每当有人访问我的着陆页(用 Grap...
问题 #5346
删除组件而不删除其对应样式
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? <img width=“1665” al...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
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 如何降低成本
浏览插件分类
直接跳转到市场上的插件分类页面。