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

GrapesJS 问题

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

找到 3,464 个问题

#63542024年12月13日作者 RakulAgn2 个回答
0 个反应

未捕获的类型错误:无法设置空属性(设置为“_isEditor”)

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞?直接访问画布尚未渲染的演示网站 Grapesjs 预期的行为是什么? 画布应该被渲染 目前的行为是什么? 未捕获的类型错误:无法设置空属性(设置为“_isEditor”) 画布上的空白行为准则 [X] 我同意遵守本项目的行为准则

artf

关闭了这个,演示看起来运行正常,可能是浏览器缓存或扩展出了问题

GJS Helper

Uncaught TypeError: Cannot set properties of null (setting 'isEditor')错误,尤其是在GrapesJS演示网站上出现空白画布时,表明编辑器初始化过程中发生了关键故障。该错误意味着GrapesJS正在尝试在预期存在但目前null的对象或DOM元素上设置内部属性(isEditor)。 根本原因分析 在GrapesJS的语境中,_isEditor属性常用于内部标记编辑器UI或核心结构中的元素(例如主容器、面板等)...

#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 不需要内容的...

#63452024年12月6日作者 VanTranTrucPhuong2 个回答
1 个反应

无法选择 + SHIFT 来选择批量文本

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 131.0.6778.109(官方构建)(64 位) 可复制演示链接 https://grapesjs.com/demo-newsletter-editor 描述一下那个虫子 如何复现这个漏洞?将鼠标指针放在你想选择文本的起始位置。按住SHIFT键。将鼠标指针移动到文本选择的目标端点。 预期的行为是什么? 所选文本应自动带有高亮背景,表示已被选中。 目前的行为是什么? 所选文本没有高亮的背景。 行为准则 [X] 我同意遵守本项目的行为准则

sirbeagle

我认为我查明原因在于无法同时选择多个方块。评论 “''t” this.clearSelection(this.Canvas.getWindow()); ``` 在 [/src/editor/model/Editor.ts](https://github.com/GrapesJS/grapesjs/blob/46b3292a9682f77076ddebe6015cfa247a55a844/packages/core/src/editor/model/Editor.ts#L53...

GJS Helper

你遇到了一个常见问题:GrapesJS富文本编辑器(RTE)中的文本选择不会直观高亮所选文本,尽管选择本身是可行的(例如,你可以复制文本)。这种行为在官方演示中是可复现的,并表示存在样式冲突。 根本原因 该错误的根本原因通常与CSS有关。浏览器使用::selection伪元素来为所选文本进行样式化(例如应用蓝色背景)。在像网页构建器这样带有富文本编辑器(GrapesJS使用 ProseMirror 作为 RTE)的复杂环境中,自定义 CSS、全局重置或特定编辑器配置可能会无...

#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...

#63242024年11月22日作者 badiuciprian4 个回答
2 个反应

Sorter.setDragHelper 不是块拖拉的函数

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 131.0.6778.86可复制演示链接 https://jsfiddle.net/badiuciprian/qe28obhr/1/描述一下那个虫子 如何复现这个漏洞?尝试将任意方块拖到画布上 预期的行为是什么? 组件被渲染到画布上 目前的行为是什么? 什么都没发生,浏览器控制台显示错误: BlockView.ts:103 未捕获类型错误:a.setDragHelper 不是函数 在o.startDrag(BlockView.ts:103:12) 在 HTMLDivElement.t (cash-dom.ts:765:36) 在我的真实应用中,...

mohamedsalem401

我成功复现了它。这只发生在“nativeDnD: false”上。这可能让块视图使用旧排序器的API。我会尝试解决这个问题。

artf

@mohamedsalem401你能帮我检查一下这个吗?

badiuciprian

谢谢你帮我处理这件事。我会关注更新。

#63182024年11月20日作者 tonypapousek4 个回答
3 个反应

无法在Block media svg中使用透明填充

GrapesJS 版本[X] 我确认使用最新版本 [email protected] 本问题提交时间你用的是什么浏览器? Firefox 132,Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子 如何复现这个漏洞?添加一个自定义方块, media 属性设置为带有透明填充的SVG查看方块标签,然后 注意填充会自动设置为 currentColor 预期的行为是什么? 填充应该是透明的 ![截图 2024-11-20 10 38 00](https://github.com/user-attachments/assets/4e1b546c-9b65-47ec...

samex

我认为这取决于具体使用的SVG。如果你检查其他SVG图标,你会发现它们主标签上没有填充属性(内联),<svg>而是在子<path>标签上。通过在该SVG的两个元素上设置fill=“none”属性<path>,图标应该会正确显示。希望这些建议能帮你解决这个问题!

tonypapousek

@samex 指定“fill=”none“后解决了问题,谢谢!这肯定能让我的自定义内容更可预测地工作。 除此之外,我觉得主要的痛点是尝试使用第三方SVG(比如“反应图标”)或所见即所得输出,但这些输出没有明确设置“填充”属性。考虑到这些用例,除非维护者希望关闭,否则我暂时会保持这个漏洞开放。

artf

是的,我会关闭这个,因为它和核心本身关系不大,但谢谢你指出

#63082024年11月13日作者 maxming23333 个回答
0 个反应

React 自定义界面“模态”无法显示“代码”

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 130.0.6723.117 可复制演示链接 https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx 描述一下那个虫子 如何复现这个漏洞?开 https://grapesjs-react-custom-ui.stackblitz.io/点击此按钮 <img width=“537” alt=“image” src=“https://github.com/user-attachments/assets/35d33966-60b6-4a88-96c6-0c26...

danstarns

你好@maxming2333,试着点击文本框中高亮区域内的任意位置,对我来说它加载代码...... https://github.com/user-attachments/assets/89f61dc6-466a-476a-b437-d0f8ae51c7ef

maxming2333

嗨@maxming2333,试着点击文本框中高亮区域内的任意位置,对我来说它会加载代码......Screen.Recording.2024-11-19.at.23.21.03.mov 是的,确实可以在点击弹窗区域后显示,但应该在弹窗打开后立即显示,而不是点击后。

GJS Helper

你遇到的问题源于 GrapesJS的 CodeViewer (内部使用 CodeMirror)与 React 的渲染生命周期相互作用,尤其是在嵌入自定义模态中时。React 组件管理自己的 DOM,外部库如 CodeMirror 需要明确附加和管理在该 DOM 中。 根本原因: 当你调用 editor.CodeManager.getViewer('CodeMirror').set({ ... })时,你得到的是CodeViewer的实例。这个实例有一个 render() 方...

#63072024年11月12日作者 maxming23331 个回答
0 个反应

MJML 组件 'tagUpdated' 将使“悬停”变得不可能

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 130.0.6723.117 可复制演示链接 https://grapesjs.com/demo-mjml 描述一下那个虫子 如何复现这个漏洞?随机选择一个组件,比如演示页面的第二个 mj-section 在编辑器中将该组件悬停(你可以看到它可以悬停)找到该组件的ID,并执行 editor.Components.getById('iv19a').tagUpdated()再次尝试悬停该组件,发现无法悬停。 预期的行为是什么? 没有报错,你可以继续悬停 目前的行为是什么? 错误会被报告且无法悬停 <img width=“668” alt=“im...

GJS Helper

你遇到的问题是调用 MJML 组件时tagUpdated()导致其悬停功能失效并报错,原因在于 tagUpdated() 的设计与 MJML 组件在 GrapesJS内的渲染生命周期不匹配。 根本原因 GrapesJS 中的 tagUpdated() 方法主要用于将标准 GrapesJS 组件的 HTML 标签更改(例如,从div 变成 span)。该方法向组件视图(ComponentView)信号,其底层 DOM 元素的标签发生变化,可能会触发元素及其关联事件监听器的重新...

#62962024年11月5日作者 maneeshp972 个回答
0 个反应

自定义的 React 组件会被包裹在一个 div 里

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Arc v1.61.1 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-n6sff 描述一下那个虫子 @artf首先感谢你提供这个了不起的库。我当时试图在 grapesjs 中创建自定义React组件,偶然发现了之前报告的React集成问题中的一个沙盒链接。 [https://codesandbox.io/s/grapesjs-react-components-n6sff] 我通过引用沙盒后成功让自定义React组件工作,但有一个问题依然存在。每当自定义React组件被拖...

artf

是的,从演示的角度来看这是正常的。 你可以玩代码找到解决办法,但我会关闭这个,因为它不是核心漏洞。

GJS Helper

你观察到的行为,即自定义 React 组件被包裹在带有GrapesJS特定属性的额外div中,这对 GrapesJS 管理 DOM 组件至关重要。这个div在 GrapesJS 语境中不是“额外”包装器;它就是GrapesJS组件本身。 根本原因解释 GrapesJS组件结构:在GrapesJS中,画布中的每个组件都由对应的DOM元素表示。默认情况下,该元素是一个div。该元素作为组件在DOM中的根节点,使GrapesJS能够: 附加其内部属性(例如,data-gjs-ty...

#62902024年11月4日作者 svex992 个回答
1 个反应

从项目数据加载数据源时,数据源会被忽略

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefix v132.0 可复制演示链接 https://jsfiddle.net/skdegqun/4/ 描述一下那个虫子 如何复现这个漏洞?运行小提琴的日志可以看出,编辑器初始化时传递的数据源未被加载。 预期的行为是什么? 将项目数据源加载到编辑器数据源管理器(editor.DataSources) 目前的行为是什么? 当编辑器加载项目数据时,数据源并未被加载,而是数据源列表是空的。 这个问题既在编辑器初始化时传递项目数据,也在从远程存储加载项目数据时出现(虽然在小工具里重现起来稍微难一些,但希望修复了第一个情况能解决这个问题)。我...

artf

你需要等编辑准备好再做。 “''js editor.onReady(() => { console.log(“数据来源总数应为1:”,编辑。DataSources.getAll().length) console.log('test-source should exist:', editor.DataSources.get(“test-source”)); }); ```

GJS Helper

你遇到的问题是GrapesJS DataSources模块在编辑器初始化或从存储加载时,不会自动从projectData中的dataSources属性中水化状态。虽然projectData用于加载核心组件、样式和资源,但DataSources模块需要显式填充。 根本原因: GrapesJS核心editor.load()方法负责处理projectData(初始化时传递或从存储中获取),主要关注加载主画布内容(组件)、样式和资源。其他专业模块,如DataSources,通常需要...

浏览所有主题