GrapesJS 问题

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

找到 3,464 个问题

#46692022年10月18日作者 micker2 个回答
0 个反应

渐变插件在1.20版本上无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬与火狐 可复制演示链接 https://codepen.io/artf/full/bYwdQG/ 描述一下那个虫子 Implément gradiant plugin produce js error https://github.com/artf/grapesjs-style-gradient https://github.com/artf/grapesjs-style-gradient/issues/24 行为准则 [X] 我同意遵守本项目的行为准则

artf

是的,这次发布里有说明 https://github.com/artf/grapesjs/releases/tag/v0.18.1 我还没找到时间更新那些插件(任何帮助都非常感谢)

ClaudeCode

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

#46682022年10月18日作者 GoodPHP3 个回答
0 个反应

CKEditor5 + Froala + Tinymce6 转入 GrapesJS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 描述一下那个虫子 CKEditor5: https://gjs.market/products/tinymce-6-inline-text-editor 弗罗阿拉: https://gjs.market/products/froala-inline-text-editor Tinymce6: https://gjs.market/products/tinymce-6-inline-text-editor 抱歉:) 行为准则 [X] 我同意遵守本项目的行为准则

micker

有趣的功能

GoodPHP

有趣的功能 谢谢 ✅

ClaudeCode

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

#46542022年10月11日作者 malonecj3 个回答
0 个反应

文本节点自定义组件,包含特殊字符

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v105 可复制演示链接 https://codesandbox.io/s/fancy-brook-ppyc8v?file=/index.js 描述一下那个虫子 背景: 我正在尝试配置 grapesjs,使其能够编辑包含 [Liquid 模板语言](https://shopify.github.io/liquid/)的标记。因此,我想创建两种类型的自定义组件。一个模板块,形式为“{{some_variable}}”一个条件块,形式为“{% 如果条件 .... %}” 自定义组件应配置为允许用户修改组件的某些方面。 然而,似乎在实现第二个...

artf

你好@malonecj我不太确定你具体如何期望看到和管理这些组件(尤其是当你在条件内组合模板时),但我觉得你目前在“isComponent”中的处理方式不太正确,因为你必须处理文本节点。 在你的liquidhandle 'isComponent'里,你用的是'el.textContent',我觉得这应该和liquid condition用'el.nodeValue'类似,因为它只在文本节点上可用(可能最好确认一下它是否真的是文本节点'el.nodeType === 3')。...

artf

我决定关闭这个,因为核心本身没有问题,如果你还有其他问题@malonecj告诉我。

ClaudeCode

谢谢你举报,@malonecj。 关于文本节点自定义组件,包含特殊字符的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行...

#46462022年10月6日作者 javadsamiee2 个回答
0 个反应

偶数/奇数状态没有按预期工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 106.0.5249.91 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?拖拽“1列”方块在列中添加四个“文本”块选择列并选择“偶数/奇数”状态,然后在排版中将颜色改为红色 预期的行为是什么? 偶数或奇数条目应为红色,而所有文本块则为红色 <img width=“1486” alt=“截图 2022-10-06 上午11:22 29” src=“https://user-images.githubusercontent.com/65819265/194249480-58a06cd1-...

artf

如果你预期文本组件颜色会不同,我觉得应该给它们应用偶奇。当该列应用偶数/奇数时,效果会在多个列中显现。 我要关闭这条,因为这不是bug,而是[':nth-of-type'](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)的工作原理

ClaudeCode

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

#46212022年9月27日作者 shelendravashishtha24 个回答
1 个反应

没有找到在单一画布上显示多页的选项

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 无链接 描述一下那个虫子 你好, 我用的是 Grapsjs 和 React,到目前为止觉得非常有用,但我想把应用中创建的所有页面展示出来,以便在 Canvas 上预览,却找不到类似的选项或替代方案。你能帮我一下吗?行为准则 [X] 我同意遵守本项目的行为准则

stljeff1

我认为你需要自己做一个组件来显示多个页面并点击它们之间。 这里有我在这些论坛上找到的一个示例,展示了如何创建自己的页面管理器组件。https://codepen.io/artf/pen/XWpJQoY

artf

@shelendravashishtha2正确使用Bug Issues,如果有问题,请使用讨论区。

dali-97

你好,有人能帮忙吗?我需要一个能让我创建多custem页面的东西,比如Grapesjs,我需要它来做我的外交,谢谢

#46182022年9月26日作者 TanyaKulikovskaya2 个回答
0 个反应

没有哈希的颜色输入不会更新颜色选择器

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/ 描述一下那个虫子 用颜色输入配合哈希(十六进制颜色)时一切正常。 但是,如果我在输入中添加一个没有哈希值(只有数字)的十六进制值并按下回车键,颜色预览不会更新,但颜色会应用到页面上的元素上(但重新加载后元素的默认颜色)。行为准则 [X] 我同意遵守本项目的行为准则

artf

你好@TanyaKulikovskaya请提供一个可复现的演示,因为快速检查后,颜色选择器似乎没有哈希值

ClaudeCode

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

#46122022年9月23日作者 Drew-Daniels2 个回答
1 个反应

在 0.19.4 版本之后,无法将 MJML 组件丢弃到空白画布上

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 105.0.5195.125(官方构建)(x86_64) 可复制演示链接 https://codesandbox.io/s/grapesjs-grapesjs-mjml-react-bug-w7qtec?file=/src/index.js 描述一下那个虫子 如何复现这个漏洞?从一张空白画布开始尝试将“grapesjs-mjml”块编辑器组件拖到空白画布上。确认你无法登录,并收到此警告记录到控制台: ![图片](https://user-images.githubusercontent.com/62859552/192033463-a0341e69-...

artf

谢谢你的报告,Drew,这似乎和iframe的标准模式有关。目前,为了解决这个问题,我建议通过移除文档类型切换到个性模式: “''js Grapesjs.init({ // ... 画布:{ frameContent: '', // 默认为 '<!DOCTYPE html>' }, }) ``` 我决定关闭这个问题,因为它其实和核心没什么关系,很快我会更新 mjml 插件,以正确支持标准模式。

ClaudeCode

谢谢你报告,@Drew-丹尼尔斯。 关于在0.19.4版本之后无法将MJML组件丢到空白画布上的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log(...

#46082022年9月23日作者 FaisalShaikhHA4 个回答
1 个反应

从0.19.4升级到最新0.20.1后,图层管理器下的图标不再可见。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 104.0.5112.101(官方构建)(arm64) 可复制演示链接 截图:https://d.pr/i/AyHJyL 描述一下那个虫子 如何复现这个漏洞?升级到最新的葡萄品种。 预期的行为是什么? 图层管理器下的图标应该是可见的。 目前的行为是什么? 图层管理器下的图标是看不到的。 <img width=“1438” alt=“标记 2022-09-23 17 58 43” src=“https://user-images.githubusercontent.com/102785785/191963783-7a4295e1-1a97-483...

artf

谢谢@FaisalShaikhHA好的,我会修正的,因为这个规则很常见。

artf

你在这里看到的也是这种情况吗 https://grapesjs.com/demo.html?我能看清🤔那些图标

FaisalShaikhHA

不,演示页面的图标是正常可见的。 为了更新 Grapesjs,我先用“npm remove grapesjs”,然后用“npm install grapesjs”来移除旧版本,获取最新版本。 我还尝试删除node_modules中的 grapesjs 文件夹,然后用“npm install grapesjs”,但还是没有图标渲染。 我也用了“npm install grapesjs@latest”,但结果一样。 回到0.19.4版本后这个问题就解决了。

#46072022年9月23日作者 RomanGlazkov2 个回答
0 个反应

当带子元素移动时的 JS 错误

葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v104可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞?选择一个元素按住CTRL键,选择子元素尝试移动这些元素 预期的行为是什么? 编辑器不允许移动 目前的行为是什么? 搬家没有发生,但出现了 js 错误 ![偷看 2022-09-23 15-20](https://user-images.githubusercontent.com/66161402/191958965-85b27a78-9e0d-4598-9324-697d67aef2f2.gif)行为准则[X] 我同意遵守...

artf

我想我们应该避免一开始就选择已经选定组件的子节点。

ClaudeCode

谢谢你举报,@RomanGlazkov。 关于带子元素移动元素时出现的JS错误的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事...

#46062022年9月22日作者 bit-ocean2 个回答
0 个反应

“Commponent & JS”文档页面上的脚本延迟错误。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 与问题无关 可复制演示链接 https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 描述一下那个虫子 嘿,与其为这么小的变动创建拉取请求,我直接在这里分享。 Basic Scripts at https://grapesjs.com/docs/modules/Components-js.html#basic-scripts 的引入代码遗漏了一个关键词,可能会让新用户感到困惑或误导,因为页面上没有其他声明组件脚本的示例: “''js 型号:{ 默认值:{ 脚本, 行为准则 [...

artf

“脚本”就在上面 ![CCC](https://user-images.githubusercontent.com/11614725/192133350-34390584-4b07-4533-ac1b-15dcf33f1195.png) 附注:如果你不是在报告bug,可以使用讨论区

ClaudeCode

感谢你报告,@bit-ocean。 在“Commponent & JS”文档页面出现脚本延迟错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)—...

浏览所有主题