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

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#59052024年5月24日作者 gladykov2 个回答
0 个反应

点击组件再点击“块”后,无法再次打开组件设置

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Opera 10.0.5130.23 |Linux 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 透明帆布从方块菜单中添加 1 Column 组件 -> Settings 标签会自动打开 :ok_hand: 点击编辑器框内新添加的组件进入 Blocks 标签页再次点击组件 预期: 设置再次打开 实际情况: 设置未打开。 注意:我理解当组件之前未被选中时,这个功能正常工作。通过添加两个组件来验证这个行为很容易。但它会引入两种不同的行为,取决于之前的用户操作。我预计点击组件总是会打开 Setti...

artf

谢谢@gladykov,但这和核心无关,只是演示中实现的一个示例行为。

GJS Helper

这是关于GrapesJS用户体验的一个有效观察。你描述的行为不是功能失效的bug,而是用户体验上的不一致,点击已选中的组件后,如果用户手动切换到另一个面板(比如“块”),“设置”面板并不总是能重新激活。 根本原因 当组件最初添加或选择时,GrapesJS通常会激活“设置”或“样式管理器”面板。然而,如果组件已选中,用户随后手动导航到另一个面板(例如“块”、“图层”),GrapesJS会记住上一个激活面板。再次点击同一个已选中组件不会触发通常会强制面板切换回“设置”的“选择变...

#58982024年5月22日作者 afrinxnahar1 个回答
0 个反应

资产管理链接断裂

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 火狐 可复制演示链接 https://grapesjs.com/docs/modules/Assets.html#initialization 描述一下那个虫子 如何复现这个漏洞?访问 https://grapesjs.com/docs/modules/Assets.html#initialization点击下方截图所示的链接 ![grapesjs2](https://github.com/GrapesJS/grapesjs/资产/125039325/b1dbd167-16b2-4bbb-b4fe-0f1eaf3db3be) 该页面重定向至...

GJS Helper

感谢你报告这个问题。你正确地识别了资产管理公司GrapesJS文档中的一个断链。 根本原因: AssetImage.ts文档中提供的链接错误地指向了GrapesJS仓库的dev分支。虽然文件路径src/assetmanager/model/AssetImage.ts正确,但dev分支要么不存在,要么不包含该路径的文件,导致GitHub上出现了404页面。 预期行为与修复: 链接应指向master分支,即AssetImage.ts文件所在的主分支。 链接断裂(文档中): ht...

#58852024年5月14日作者 vincepv3 个回答
1 个反应

在全屏模式下,颜色选择器是隐藏的

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefoxe 125.0.3(64位) 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?安装最新版本的 grapejs点击全屏选择带有颜色属性的文本或块点击开放样式管理器点击色彩选择器 ![grapesColor](https://github.com/GrapesJS/grapesjs/资产/26679806/3349a2ba-abb2-4d87-aa69-e7c7a00eb7ad) 你可以在这里转载:[https://grapesj...

vincepv

问题解决了。 我找到了解决办法。 当我启动 grapejs 时,我会用 colorPicker 传递对象配置 const config = { 容器:“#editor”, fromElement: true, 其他配置选项在这里 colorPicker: { 附录:'父', 偏移:{ 顶部:26,左:-166, }, } }

artf

谢谢@vincepv,可能会因为编辑器容器的渲染方式和位置,全屏命令和颜色选择器的默认配置之间存在冲突。 在大多数情况下,只要把颜色选择器放在同一个编辑器容器里,它们就能正常工作。 “''js Grapesjs.init({ 容器:“#gjs”, colorPicker: { appendTo: '#gjs' }, // ... }) ```

GJS Helper

你遇到的问题是,当 GrapesJS 处于全屏模式下,颜色选择器被隐藏,这是与堆叠上下文和全屏元素渲染方式相关的常见问题。这不是颜色选择器本身的bug,而是不同元素在页面上叠加方式存在冲突。 根本原因 当 GrapesJS 进入全屏模式(默认情况下,它将 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; 应用到主容器,通常为 #gjs),它实际上创建了一个覆盖整个浏览器视口...

#58822024年5月13日作者 Riddle10011 个回答
0 个反应

ID在更改后没有更新

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞?创建方块点击它进入特质标签页设置新ID进入样式标签页查看身份未变(类别下) 要查看身份证,您必须:执行前述步骤方块失焦(例如点击身体)聚焦方块 预期的行为是什么? 让ID更新时无需重新聚焦 目前的行为是什么? 需要重新聚焦才能看到ID的变化 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

这确实是GrapesJS中已知的同步问题,比如样式标签的选择器显示不会立即反映通过特性面板对组件ID所做的更改。你描述的行为是准确且可复现的。 根本原因 根本原因在于GrapesJS UI组件,特别是样式标签中的SelectorManager及其关联视图,如何对属性变化做出反应。当你通过Trait面板修改组件的ID时,底层组件模型的id属性会被更新。然而,负责显示活动选择器(包括ID选择器)的SelectorManager视图,不会在已选中组件的id属性变化时自动重新渲染或...

#58572024年5月2日作者 hasan-aa1 个回答
0 个反应

在渲染<tr>标签内的标签<template>时,标签会被裁剪,只保留字符串内容。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome v121可复制演示链接 https://jsfiddle.net/L27powtg/30/(修复也在那里,评论中删除了)描述一下那个虫子 如何复现这个漏洞?创建自定义的GJS模板标签组件,详见此处说明:https://github.com/GrapesJS/grapesjs/issues/244#issuecomment-324449748添加一个带有表行的模板组件作为子节点。例如: 检查 editor.toHTML() 的结果。 预期的行为是什么? toHTML 的结果不应修剪 tr, td 标签。 目前的行为是什么? 结果的H...

GJS Helper

这确实是处理在独立上下文中无效的HTML片段时的已知行为,比如<table>元素外的<tr>或<td>标签。GrapesJS,像许多HTML解析器一样,依赖浏览器原生的DOM解析机制(例如,innerHTML在div或DOMParser上)。 根本原因 浏览器中的默认HTML解析机制(因此在GrapesJS的parserHtml中默认如此)会隐式纠正或删除在特定上下文中被认为无效的HTML元素。当你提供一个HTML字符串,比如<tr><td>Cell content</td...

#58202024年4月17日作者 rhoenerSBS2 个回答
0 个反应

如果组件在添加后直接移动,图层中进行双重录入

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome v123可复制演示链接 https://jsfiddle.net/xwgons8z/描述一下那个虫子 我正在尝试通过程序将新增组件移动到父组件的特定位置,因为我有子组件,它们应该保持在最后一个索引,但图层中出现了一个bug,一旦组件移动,图层面板中会有两个对应的条目。 如何复现这个漏洞?开放小提琴将组件置于画布最后一个位置(此处不会发生)在画布最后一个位置丢弃一个组件(从现在起,掉落的组件在图层面板中有两个条目) 预期的行为是什么? 组件可以移动,图层面板中仍然只有一个条目。 目前的行为是什么? 移动的组件在图层面板中有两个对应的...

rhoenerSBS

我最初想通过父组件的可丢弃性质中的函数实现同样的行为,以防止组件在特定索引处丢弃,但遗憾的是该函数没有给出该函数的参数索引。

GJS Helper

感谢你报告这个问题。你发现了一个细微的时序错误GrapesJS涉及图层面板在组件添加后立即程序移动时的更新。 根本原因 问题源于component:add事件与后续程序parent.move()操作之间的时间冲突。当组件被投放到画布上时,GrapesJS首先将其添加到组件树中,触发component:add事件。负责渲染图层面板的LayerManager会监听该事件以显示新组件。 如果你随后在component:add事件处理程序中同步调用parent.move(),实际上...

#58122024年4月15日作者 jogibear99881 个回答
0 个反应

对合作感兴趣吗?

可复制演示链接 https://node-projects.github.io/web-component-designer-demo/index.html描述一下那个虫子 几年前我开始用 Webcomponents 设计网页的框架,现在发现了 GrapeJS。想说也许我们目标相同,可以互相受益?(目前不知道具体怎么做,但也许吧)(链接:https://node-projects.github.io/web-component-designer-demo/index.html) 目前我的流程布局设计支持缺失,但它在网格和Flexbox以及绝对定位元素中表现非常好。转换(旋转)内容也有效。我为此创建了一个VSCode扩展:https...

GJS Helper

感谢你的联系以及对 GrapesJS的关注!看到网页设计领域有其他创新项目真是太好了。你的Web Component Designer看起来非常有趣,尤其是它对网页组件的重视,高级布局能力(网格、灵活盒、绝对定位)以及VSCode集成。 GrapesJS 是一个开源、高度可扩展的网页构建框架,旨在为创建可视化编辑器提供坚实基础。虽然它已经支持网页组件并具备广泛的样式功能,包括 flexbox 和 grid,但我们始终期待不同方法如何提升用户体验和开发者工具。 探索项目间潜在...

#58102024年4月14日作者 ctrhub4 个回答
1 个反应

不必要的画布风格

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Arc 版本 1.35.0 / Chromium 引擎 123.0可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 我的特殊情况: 就我而言,所有插件和通用样式都放在头部。为了在编辑器中实现类似功能,我会把这些样式添加到画布头。当我在通用样式中指定背景色时,它会被GJS画布样式覆盖。这迫使我指定 规则,而我不想这么做。 ![截图 2024-04-14 19 51 32](https://github.com/GrapesJS/grapesjs/assets/108364491/1d2628a7-ed6...

artf

它的目的是存储画布样式,那些不会影响 hmtl/css 结果的样式,不会导出的样式,对吧? 正确默认的机身是白色背景,这似乎是所有浏览器的默认颜色,对吧? 是的,但“iframe”主体没有默认背景色,所以才有那个样式,所以你需要根据你的使用情境找到合适的。

artf

有 [canvasCss](https://github.com/GrapesJS/grapesjs/blob/99bc79c1e45da1a2db62aace97b62206eb103bc2/src/editor/config/config.ts#L154) 选项。 下次请开个讨论区,这不是核心漏洞,而是用法错误。

ctrhub

嘿,@artf。谢谢你的回答。我不确定我们是否完全理解对方,我想澄清一个细节。 是的,我知道canvasCss属性,而且我用它来更改所选组件的样式。我理解这个属性的本质:它旨在存储画布样式,那些不会影响 hmtl/css 结果的样式,不会导出的样式,对吧? 那为什么默认画布样式有这个 CSS 规则 '''body { background-color: white; }``` ?为什么我们有理由去覆盖它? 我理解选择了主体元素的情况,在这种情况下,为交互性应用一些样式是合理...

#58012024年4月11日作者 oliviermgx1 个回答
0 个反应

在 dist/index.d.ts 中出现打字错误

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 分部/index.d.ts 描述一下那个虫子 打字错误?property 而非财产 不知道严重吗 第8053/8054行 : ' addBuiltIn(prop: string, definition: Omit<PropertyProps, “property”> & { proeperty?:“弦”; 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

感谢您在GrapesJS TypeScript声明文件中报告了这个错别字错误。你说得完全正确;dist/index.d.ts的第8053/8054行确实有个拼写错误。 根本原因 问题在于一个简单的拼写错误,dist/index.d.ts文件中的PropertyProps接口定义中使用了proeperty而不是property。该文件是自动从GrapesJS源代码生成的,意味着拼写错误源自生成该声明的源TypeScript/JSDoc注释。 具体来说,相关系列包括: 影响 这...

#57882024年4月2日作者 lexoyo3 个回答
0 个反应

CSS 属性的默认值

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器? 无可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 大家好,!!<3 如何复现这个漏洞?打开[grapesjs官方网页演示](https://grapesjs.com/demo.html)点击容器,例如英雄区容器对容器应用font-weight: bold;样式 => 内部所有文本变粗选择其中一个文本,勾选属性font-weight,该属性设置为normal 预期的行为是什么? font-weight应该在空字符串或unset上'',这样我才能选择normal来取消应用font-weight: bold;...

artf

我需要选择别的,而不是普通 是的,如果没有值,默认界面会预选“默认值”,但这很容易更新 “''js 编辑。StyleManager.getProperty('typography', 'font-weight').set({ 默认: ' ' }); ``` 所以我猜这不是核心漏洞,而是“意外预期”的行为 🥲

lexoyo

哦,明白了,我以为你会希望默认值是预期的行为 😃 谢谢你的回答

GJS Helper

你好!感谢你报告这个问题。你准确指出了GrapesJS风格管理器中关于默认CSS属性值的一个常见混淆点和合理的可用性问题,尤其是在处理继承时。这种行为并不是指GrapesJS故障的bug,而是默认属性呈现方式上的设计选择,可能具有误导性。 根本原因解释 GrapesJS风格管理器定义属性时,defaults值。对于像font-weight这样的属性,默认定义通常包括defaults: 'normal'。当编辑器中选中元素且没有显式font-weight样式时,样式管理器的f...

浏览所有主题