PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5211💬 已回答提出于 2023年7月2日作者 Zafermushtaha971 个反应

Bug

快速解答作者 gxanshu❤ 1

你好!😊 我不认为这是GrapesJS的bug。我查看了你的复制链接,尝试在画布中添加组件,完全没问题。👍

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

v9.2

可复制演示链接

https://jsfiddle.net/szLp8h4n

描述一下那个虫子

我在 Vue3 项目中使用它 当我想添加新组件时,页面会挂机且没有响应 这是我的代码:

  const selectedComponent = this.editoren.getSelected();
      if (selectedComponent) {
        const newComponent = this.editoren.DomComponents.getWrapper().append({
          type: 'text',
          content: 'New text component',
        });
        selectedComponent.components().add(newComponent);
        this.editoren.refresh();
          }

行为准则

  • 我同意遵守本项目的行为准则

回答(3)

gxanshu• 2023年7月2日

你好!😊

我不认为这是GrapesJS的bug。我查看了你的复制链接,尝试在画布中添加组件,完全没问题。👍

GJS Helper• 2026年5月17日

你遇到的问题是,当程序性添加新组件时页面卡顿,源于组件创建和附加方式不当, GrapesJS。你本质上是在添加一个已经作为另一个组件子节点附加到编辑器根包装器的组件,导致无效状态并导致编辑器卡死。 根本原因 让我们拆解一下你的原始代码: this.editoren.DomComponents.getWrapper().append(...):该行根据提供的定义({ type: 'text', content: 'New text component' })创建一个新组件,并立即将其附加到编辑器的根包装器中。此时, newComponent 是一个 GrapesJS 组件模型实例,已经是编辑器...

相关问答

通过相似的问题讨论继续研究。

问题 #5131

JSON.stringify 之后,组件并非所有字段都存在

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://jsfiddle.net/sdimitrenco/rn8u4pc0/7/描述一下那个虫子 我不确定这是不是bug,但对我来说,这种行为看起来很奇怪 我有一个...

2 个回答更新于 2023年5月22日

问题 #4601

在切换某些目标时,添加到样式管理器的自定义类型 update() 不再被触发。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬104 可复制演示链接 https://jsfiddle.net/aw8p0h9j/ 描述一下那个虫子 如何复现这个漏洞?打开 jsfiddle 链接。点击两个div之间,然后在任一d...

4 个回答更新于 2022年9月25日

问题 #3779

Editor.getSelected().toHTML() encodes inline javascript

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 最新款(镀铬)可复制演示链接 https://jsfiddle.net/4j1k0wde/24/描述一下那个虫子 如何复现这个漏洞?创建带有脚本标签的方块。使用 editor.getSele...

3 个回答更新于 2021年9月22日

问题 #6409

Cannot drag to move components on mobile

GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器? Chrome v133 可复制演示链接 https://jsfiddle.net/2hjdrb7L/1/ 描述一下那个虫子 如何复现这个漏洞? 使用grapesjs v0.22.x 初始化一...

4 个回答更新于 2025年6月23日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。