GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#57392024年3月11日作者 rhoenerSBS1 个回答
0 个反应

ColorPickerOptions 界面输入错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 不适用 描述一下那个虫子 最新版本附带的ColorPicker界面定义了“preferredFormat”选项,期望获得“布尔值”,但Spectrum Colorpicker的文档显示必须是类型为“string”(文档:https://bgrins.github.io/spectrum/#options-preferredFormat) 这会导致 TypeScript 项目编译时出现错误。 如何复现这个漏洞?定义ColorPicker的“preferredFormat”选项,取自Spectrum文档中的值(即“...

ClaudeCode

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

#57152024年3月4日作者 afrinxnahar1 个回答
0 个反应

API 文档中的链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 版本 123.0(64 位) 可复制演示链接 不在 描述一下那个虫子 我猜大多数.js文件都已经变成打字稿了,但可能还有像下面这个那样的坏链接...... ![GJS3](https://github.com/GrapesJS/grapesjs/assets/125039325/a42d8156-13e5-4ba0-9cd5-6249ded1d75a)行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

谢谢你举报,@afrinxnahar。 API 文档中 断链的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原因 在报...

#57082024年2月27日作者 ravisaxena2 个回答
0 个反应

能够同时更改所有边距、填充等属性

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome最新 可复制演示链接 我们现在运行在本地机器上 描述一下那个虫子 你好,目前 grapesjs 内置了属性,比如边际、填充,允许用户逐一更改每个属性(margin-top、margin-bottom等)。 如果能同时更改所有这些属性会很不错。比如说,有个锁定按钮,启用后会同时更改所有属性,而不是一个一个。 行为准则 [X] 我同意遵守本项目的行为准则

artf

请避免在未阅读模板中漏洞问题的具体目的前打开BUG问题。

ClaudeCode

谢谢你举报,@ravisaxena。 能够将所有边距、填充等属性合并的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本...

#57052024年2月26日作者 bernesto4 个回答
0 个反应

编辑器大小调整时组件工具会出现错位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞?将编辑器放入容器中,然后通过程序调整容器的宽度。 预期的行为是什么? 编辑器及其所有子节点应相应调整大小。 目前的行为是什么? 编辑器中所有组件的画布位置都保留了画布调整前的偏移。注意,窗口大小调整会重置位置。这必须在窗口中以程序形式完成。用例是编辑者在一个页面上,有其他面板可以调整编辑可用空间大小。在下面的示例中,可以看到在将编辑器调整为更大宽度后,工具如何与相关元素对齐。工具会留在原来的位置,直到某个事件触发更...

artf

感谢@bernesto报告,但由于我们无法检测程序布局的变化而不影响性能,在这种情况下,你必须通过 ['editor.refresh()]](https://grapesjs.com/docs/api/editor.html#refresh) 手动更新编辑器布局(例如,在你的例子中,调用直接放在 resizeEditor 函数的末尾)

bernesto

你好,@artf,我其实不小心把这个混在你最后接受的拉取请求里(src/canvas/model/Frame.ts)。你可以看看我添加的内容,看看是否造成了问题。我们现在正在测试中,没有看到性能下降,而且它解决了问题。

artf

我其实把这个误混在你上次接受的拉取请求里了 我实际上删掉了,因为看起来没什么关系 🤣 补充回来没问题,但要考虑你的例子只有桌面设备才会有效。宽度填充了容器,这会触发iframe窗口的缩小(然后触发新增事件)。如果你换成更小的设备,这个方法就不行了,那时不会触发调整大小事件,所以你仍然需要刷新调用。

#56072024年1月10日作者 Ju99ernaut2 个回答
0 个反应

无法扩展之前空过的图层

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v120.0.6099.199 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?将第1列方块拖到画布上将任何其他块拖入单元格,例如文本选择单元打开图层面板 预期的行为是什么? 我们应该能够展开单元格,并通过图层选择单元格内的元素 <img width=“1438” alt=“截图 2024-01-10 下午5:42 36” src=“https://github.com/GrapesJS/grapesjs/assets/48953676/043150f3-9c71-488...

artf

说得好,我会修好的

ClaudeCode

谢谢你举报,@Ju99ernaut。 关于无法扩展之前空白的图层,这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something chang...

#55252023年11月19日作者 duydvu2 个回答
3 个反应

在单个组件中添加超过 20 个类时,性能问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge v119.0.2151.72 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好,感谢你创建了一个了不起的项目。我想报告使用GrapesJS时发现的一个问题。 如何复现这个漏洞?选择一个组件添加任意名称的类,直到组件超过20个类。选择另一个组件并重新选择该组件。 预期的行为是什么? 不应该有性能问题。 目前的行为是什么? 浏览器会卡顿一段明显的时间。新增的职业越多,卡顿时间越长。当组件有23个类时,我的浏览器会冻结10秒。 这是使用 TailwindCSS 时常见的问题,因为课程很多。例如,...

artf

同意建议,我会相应更新。谢谢@duydvu

ClaudeCode

谢谢你举报,@duydvu。 关于在单个组件中添加超过20个职业时性能问题的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethi...

#55032023年11月6日作者 MaxwellTheSecond3 个回答
1 个反应

ReplaceWith 方法没有字符串类型

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 没有 描述一下那个虫子 Component.ts 的 replaceWith 方法没有字符串类型。 预期的行为是什么? 我应该可以用字符串替换组件,比如示例中的“component.replaceWith(<div>'Some new content</div>');” 目前的行为是什么? ![葡萄问题](https://github.com/GrapesJS/grapesjs/assets/81811949/67837b49-a81f-4c07-a8b1-9d5481f457a1)行为准则 [X] 我同意遵守本项目的行为准则

MaxwellTheSecond

纪录:#5504

artf

合并 https://github.com/GrapesJS/grapesjs/pull/5504

ClaudeCode

谢谢你举报,@MaxwellTheSecond。 replaceWith 方法没有字符串类型的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——...

#55012023年11月5日作者 eko3alpha1 个回答
0 个反应

“入门演示”面板调整尺寸问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome/Safai/Firefox 可复制演示链接 https://grapesjs.com/docs/getting-started.html#layers 描述一下那个虫子 如何复现这个bug? 请前往 [此链接](https://grapesjs.com/docs/getting-started.html#layers)的 GrapesJS 入门文档。 尝试通过拖动图层面板的左边来调整它的大小。 注意面板的漂移行为。 预期的行为是什么? 调整图层面板大小时,宽度应该能平滑地调整,不会左右偏移。面板的右边应保持固定,只有宽度发生变化。 目前...

ClaudeCode

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

#54602023年10月12日作者 mapsmarketing4 个回答
1 个反应

从“pageManager”加载“组件”和“样式”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞?请参见 jsfiddle 中的“pageManager”对象 预期的行为是什么? 查看以下文档:https://grapesjs.com/docs/api/pages.html#pages 它应该能正确地从“pageManager”中加载“组件”和“样式”到编辑器中。 目前的行为是什么? 当你通过编辑器中的“查看代码”检查代码时,你会发现既没有完全相同的 HTML,也没有样式正确加载。“body”标签...

mapsmarketing

有个烦人的点是,编辑器会在下面默认样式前面加上,保存这些样式时会有许多重复的样式: 编辑: 查看文档后,我终于找到了“protectedCss”,设置为空时,样式的前置功能就停止了。

artf

你好@mapsmarketing目前 GrapesJS 无法正确导入 HTML 文档的字符串格式,所以解析器会跳过像 “html”、“head”、“body” 这样的元素,只返回“body”内部解析出来的内容,你现在可以做的一个变通方法是把组件作为对象传递 “''js 组件:{ 属性:{ ID: 'IGNT' }, components: '<div class=“my-el”>测试世界!</div>', }, ``` 关于样式,这是浏览器默认的CSSOM解析器问题,请参考...

mapsmarketing

你好@artf, 我找到了一种方法,可以通过以下方法正确保存“身体”属性和样式: 我注意到你的[Page.toJSON](https://github.com/GrapesJS/grapesjs/blob/e03dfc7483b7fd936f3580bee78fee6d03c2b055/src/pages/model/Page.ts#L134-L149)输出了指定页面的所有内容。不过,它似乎无法正确输出“样式”(我总是被设置为未定义),所以我通过编辑器检索了激活页面的样式,...

#54502023年10月10日作者 ChiragS-Prajapati2 个回答
0 个反应

该部分应与葡萄中存在重叠问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 117.0.5938.134(官方构建)(64位) 可复制演示链接 https://jsfiddle.net/ap404703/0e5zop1n/ 描述一下那个虫子 示例如下 葡萄 Js 文件 :- 初始化葡萄JS const editor = Grapesjs.init({ 画布:{ 风格:[ “https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”, “https://unpkg.com/swiper@7/swiper-bundle.min.css” ] }, styleManager...

artf

@ChiragS-Prajapati 你必须使用 [可拖拽/丢弃组件属性](https://grapesjs.com/docs/api/component.html#properties)来控制组件可以拖拽的位置,以及哪些组件可以被丢入其中。

ClaudeCode

感谢你报告,@ChiragS-Prajapati。 关于“Section should with the overlaping with grapes js”的问题,似乎是竞争条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的Grape...

浏览所有主题