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

GrapesJS 问题

已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 545 个问题

🔍 typescript
#64162025年2月22日作者 clonefunnels2 个回答
0 个反应

HTMLENTITIES >破坏远程存储——显示未定义

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 和 Chrome 可复制演示链接 我无法做远程存储的演示 描述一下那个虫子 导入任何标签旁边带有“&gt;”的标签&gt; 示例:'<a href=“#”&gt;&gt;</a>' 还有类似的情况: '<a href=“#”&gt;首页</a> &gt; <a href=“#”&gt;商店</a>&gt;' 这也破坏了它...... '<span class=“test”&gt;主页</span> &gt; <span class=“test2”&gt;购物</span>&gt;' ![图片](https://github.c...

artf

我无法做远程存储的演示 远程存储不需要演示。 本地存储和远程存储使用同一个接口,这意味着如果你无法用本地存储复制,问题很可能出在你的后端。 我觉得保存后重新加载内容没有问题 <img width=“646” alt=“Image” src=“https://github.com/user-attachments/assets/da829381-5803-49fc-b57b-40a5b2c27208” />

GJS Helper

这是一个关键的错误报告。当 HTML 实体 &gt;(大于 符号)存在时,尤其是靠近 HTML 标签,GrapesJS 显示“未定义”且无法加载内容的问题,表明 GrapesJS内部的 HTML 解析或组件转换逻辑存在问题。 根本原因分析 GrapesJS依赖HTML解析器(通常在浏览器中DOMParser)将原始HTML字符串转换为其内部组件模型。虽然DOMParser本身在处理HTML实体方面通常较为稳健,但问题很可能出现在GrapesJS后续将解析后的DOM节点处理成...

#64092025年2月18日作者 Shuja-Mahmood4 个回答
0 个反应

Cannot drag to move components on mobile

GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器? Chrome v133 可复制演示链接 https://jsfiddle.net/2hjdrb7L/1/ 描述一下那个虫子 如何复现这个漏洞? 使用grapesjs v0.22.x 初始化一个 grapesjs 编辑器,并使用 grapesjs-touch 插件 v0.1.1。 预期的行为是什么? 在移动端,使用工具栏的移动处理程序应该能像之前版本那样将组件移动到另一个位置。 [链接](https://jsfiddle.net/h1nzadq0/)用grapesjs v0.21.13演示,运行正常。 目前的行为是什么? 拖动组件时会出现下落指示...

bamiendev

同样的问题

federica-capobianco

你解决了吗?我也面临类似的问题

Shuja-Mahmood

问题在 v0.22.6 依然存在

#64072025年2月16日作者 gopukinapp2 个回答
0 个反应

自定义特征不会在自定义块内加载

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 133.0.6943.98 可复制演示链接 https://codesandbox.io/p/sandbox/loving-breeze-mdls43?file=%2Findex.js%3A77%2C6 描述一下那个虫子 我正在尝试给我的方块添加一些自定义 triats,但很遗憾我只能看到默认的 triats [id,title] 我的方块里有很少的 HTML 代码,但如果我移除所有 HTML 代码,只在组件属性里放一个字符串,比如 Hellow World,没有任何 html,triats 就会显示出来 行为准则 [x] 我同意遵守...

artf

你的组件有内部的“组件”,所以如果你选择其中一个,你会看到这些组件的特征,而不是“事件块”。 如果你正确选择“事件块”,你会看到你的特质。 <img width=“856” alt=“Image” src=“https://github.com/user-attachments/assets/a0913237-02f9-44f8-af51-6d151b618a37” /> 顺便说一句,这个 “''js this.view.el.querySelector(“[data-ev...

GJS Helper

你遇到的问题是,当自定义块的components属性包含复杂 HTML 但能加载简单字符串时,自定义特征不会加载,这是与 GrapesJS 解析和管理组件结构相关的已知行为,尤其是在处理 components 属性作为原始 HTML 字符串时。 根本原因 当你用一个原始HTML字符串定义组件的components属性,导致多个子元素(例如<h2>...</h2><p>...</p>),GrapesJS会将该字符串解析成子组件的树。在这种情况下,你的event-block组件...

#63942025年2月1日作者 spyjo1 个回答
0 个反应

Safari Mac 上的图层管理器 bug

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Safari 18.3 Macos 14.7.3 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? 在右侧面板打开图层管理器 尝试隐藏“身体”,或者打开它 或者点击一个元素,图层显示在图层管理器列表中,然后尝试隐藏/打开/拖动 预期的行为是什么? 隐藏、拖拽或打开图层的图标应该会出现 目前的行为是什么? 没有图标显示,拖曳也没用 下面是Safari上的截图: <img width=“760” alt=“Image” src=“https://github.com/user-a...

GJS Helper

看起来你遇到了Safari特有的渲染问题,特别是它处理flexbox布局以及可能的图标字体的方式。GrapesJS图层管理器使用Flexbox结构来管理图层物品,Safari有时会误解或折叠这些布局中的元素,导致图标缺失和拖拽手柄失效。 根本原因 该bug的主要原因通常与Safari对flexbox属性的独特解释有关,特别是Flex item的flex-shrink和min-width计算方式。在GrapesJS图层管理器中,.gjs-layer-item-actions容...

#63742025年1月17日作者 Harshsne262 个回答
1 个反应

光标位置错误

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/gbYjOWO 描述一下那个虫子 如何复现这个漏洞? 我已经在单击下调用了 onactive,这样我就能在一键内编辑文本框。 光标应该放在我点击的位置,这也是双击事件中发生的情况(双击变成单点击时预期的效果)。 预期的行为是什么? ...光标应该放在我点击的位置 目前的行为是什么? ...光标指向文本框的起始位置 ![图片](https://github.com/user-attachments/assets/3eccac92-94e7-4004-8034-...

mohamedsalem401

嘿,我检查过你的代码并尝试调试。在我看来,代码没有把鼠标事件传递给 onActive 方法,而 onActive 是必须的: “''js componentEl.addEventListener('click', (ev) => { component.view.onActive(ev); });

GJS Helper

谢谢你举报,@Harshsne26。 关于光标位置错误的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组...

#63732025年1月16日作者 ChipiKaf2 个回答
1 个反应

在父 Parent 中,使用绝对拖动调整 Child 的大小时,启用了 Position 的 Position 元素,但 Pat Null 是错误的

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 131.0.6778.265 可复制演示链接 https://codepen.io/chipikaf/pen/KwPexjL 描述一下那个虫子 如何复现这个漏洞? 将按钮组件放在中间部分 将按钮在该区域任意移动 元素调整大小 预期的行为是什么? 将元素调整到其原始位置 目前的行为是什么? 该元件被移到一个意想不到的位置 行为准则 [x] 我同意遵守本项目的行为准则

ChipiKaf

@artf我本地有解决办法。基本上我会检查元素是否有相对位置的父元素,然后如果存在且位置相对,则将矩形体偏移为父节点的高度。 如果可以的话,我可以帮它创建一个永久纪录?

GJSBlock

谢谢你举报,@ChipiKaf。 关于在启用绝对拖拽时,子节点调整大小时在父位置中出现了错误元素,但相对位置是错误的,这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.l...

#63692025年1月14日作者 hubermat2 个回答
0 个反应

边框半径的显示顺序不正确

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v130 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?在编辑器中选择任意元素在样式部分,前往边界半径 预期的行为是什么? 四个角落的边界半径设置显示如下: 左上右上 左下至右 目前的行为是什么? 底部角落的边框半径设置互换了: 左上右上 右下-左下 <img width=“217” alt=“Bildschirmfoto 2025-01-14 um 11 47 36” src=“https://github.com/use...

DarrenHou1993

这个改动解决了界面问题,但也带来了数值问题。设置左下角半径时,实际上是修改了右下角。

GJS Helper

你提到的 GrapesJS 风格管理器中 border-bottom-left-radius 和 border-bottom-right-radius 显示顺序互换的问题,是旧版 GrapesJS 或特定演示设置默认配置中的已知异常。你已经正确观察到 GrapesJS Studio 已经解决了这个问题,表明新设置或自定义实现中配置已修正。 根本原因 GrapesJS 风格管理器通过结构化配置定义 CSS 属性,包括像 border-radius这样的复合属性。border-...

#63582024年12月19日作者 rhoenerSBS2 个回答
0 个反应

BlockManager 配置中的“appendOnClick” 不再工作了

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v131 可复制演示链接 https://jsfiddle.net/0uaxn2vc/2/ 描述一下那个虫子 如何复现这个漏洞?打开小提琴链接选择可以添加组件的主体或其他组件尝试只通过点击方块添加组件,不要拖放以前能用,但现在即使在 BlockManager 配置里用 appendOnClick: true 也不能了 预期的行为是什么? 组件应仅点击添加 目前的行为是什么? 控制台错误:“BlockView.ts:58 未捕获类型错误:c.setDropContent 不是函数”,组件未被添加行为准则 [X] 我同意遵守本项目...

artf

感谢@rhoenerSBS问题已修复,[这里](https://github.com/GrapesJS/grapesjs/pull/6346),并将在下一个版本中提供。

GJS Helper

GrapesJS的 BlockManager 中的appendOnClick选项在最近版本中确实坏了,导致了Uncaught TypeError: c.setDropContent is not a function错误。这个问题源于BlockView在启用appendOnClick时点击事件处理方式的变化。 根本原因 在GrapesJS中,当用appendOnClick: true点击一个方块时,BlockView尝试模拟一个掉落动作。它试图调用目标组件(错误信息中的c)...

#63482024年12月7日作者 Frubl2 个回答
1 个反应

在 grapesjs 画布内可以拖拽任何东西

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?尝试选择,比如整个侧边栏工具/文本/所有功能抓取并放置在画布上 预期的行为是什么? 可能只复制粘贴文本或净化过的 html,或者可以拖拽只放我做成可删除的元素 目前的行为是什么? 我可以拖拽Canvas里的任何东西。 ![Screenshot_14](https://github.com/user-attachments/assets/11627411-14e5-4fda-a202-c6921cf64047) 行为准则 [x...

artf

你可以通过“canvas:dragdata”事件控制画布中丢失的内容 https://jsfiddle.net/artur_arseniev/87rcb24n/

GJS Helper

你报告的问题是, GrapesJS 画布外的任意元素(包括编辑器界面的部分)可以拖拽到画布中,这是浏览器原生拖放功能导致的常见行为。默认情况下,浏览器允许拖放大多数可选内容或元素。 GrapesJS的画布作为标准HTML元素,继承了这种行为。 根本原因: 当你拖动元素时,浏览器会为 DataTransfer 对象填充各种数据类型(例如, text/plain, text/html)。如果 GrapesJS 没有明确拦截并阻止这些 dragover 和 drop 不需要内容的...

#63322024年11月26日作者 tim-prom1 个回答
0 个反应

IMG SRCset 404 导致无限请求循环

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器? Chrome v131可复制演示链接 https://jsfiddle.net/cmq9end2/1/描述一下那个虫子 如何复现这个漏洞?在 canvas 中添加一个 img,但 srcset 里的 URL 是无效的检查Chrome开发控制台的网络标签页——资产请求正确返回了404,但浏览器却不断无限循环发送请求。 <img width=“646” alt=“截图 2024-11-26 上午9:40 17” src=“https://github.com/user-attachments/assets/e737d681-a0e0-4155-80ee...

GJS Helper

你描述的问题,即<img>标签的无效srcset属性(且没有src属性)会导致无限404请求循环,这是某些浏览器(如Chrome)的已知行为,而不是GrapesJS本身的直接bug。GrapesJS正确地渲染你提供的HTML,但浏览器的渲染引擎随后会解释并尝试加载图片资源。 根本原因 当<img>元素包含srcset属性但缺少src属性,且srcset中指定的所有图像候选都无法加载(例如返回404错误),浏览器有时会进入激进的重试循环。src属性至关重要,因为它作为不支持s...

浏览所有主题