GrapesJS 问题

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

找到 877 个问题

🔍 question
#46992022年10月31日作者 DhanaDSP11202 个回答
0 个反应

在文本块中 InsertHTML 无法正常撤销

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬V107 可复制演示链接 https://jsfiddle.net/4vacxuw2/2/ 描述一下那个虫子 我添加了一个自定义工具栏,通过rte.insertHTML选项在当前位置插入一些值,效果很好。但当尝试撤销(ctrl+z)时,新插入的 HTML 块并没有被移除 ![葡萄在insertHTML上撤销了问题](https://user-images.githubusercontent.com/54067384/198582651-26c3613a-003d-4907-a761-746d75f8880a.gif) 行为准则 [X] 我同意遵守本...

artf

你好@DhanaDSP1120是的,不幸的是,'rte.insertHTML' 会用自定义插入,所以这很正常。如果你需要保留原生的编辑撤销栈,可以使用这个 API “''js rte.exec('insertHTML', '<span ...') ```

ClaudeCode

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

#46822022年10月22日作者 nabtron4 个回答
0 个反应

模块未找到:错误:无法解决“utils/mixins”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬106可复制演示链接 本地主持描述一下那个虫子 我更新了包含 Grapesjs 的项目,但现在出现了这个错误: 当我运行我的项目时,会出现这个错误: 以下是module.js前两条线的特点: 我尝试安装了: 但它也失败了 请问我该怎么解决这个问题?行为准则[X] 我同意遵守本项目的行为准则

artf

你不应该尝试编译 Grapesjs 的源代码,因为源代码可能包含与捆绑包相关的内容(正如你提到的,它不是外部包)

nabtron

@artf你不应该在没看完工单前贸然关闭。 如果你看了这期,你会发现我提到“更新”时,我用 NPM I 更新了 Grapesjs 的版本,package.json 的版本改成了最新版本。 代码从0.19.4开始就坏了,因为你在modules.ts开始用.ts文件

artf

是的,我理解你只是更新了版本,但看起来你是在尝试读取 grapesjs 包的源代码,这是错误的(可能将来会删除,'src' 文件夹甚至会被移除)。

#46812022年10月21日作者 Aar-if3 个回答
0 个反应

资产管理器上传空对象到后端端点

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 匿名 描述一下那个虫子 目前的行为是什么? 我创建了一个自定义后端端点来存储我的资产,当我使用资产管理器的上传方法时,它没有向后端发送任何数据,而是发送一个空的对象,我在客户端检查器获取资产数据时也遇到同样的问题,同时在资产管理系统内使用 Axios 发送 资产管理人:{ 上传:“http://localhost:5002/api/grapesjs/assets”, }, 后端获得空物体 我也试过 资产管理人:{ 上传文件:异步 (e) => { var files = e.dataTransfer ?e.dataTr...

artf

抱歉,但仅仅尝试提交一个资源,我看到的负载是正确的,所以没有可复现的演示,这看起来是你后端的问题(确保有合适的身体解析器)。

Aar-if

谢谢,我用Multer解决了,问题出在身体解析器。

ClaudeCode

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

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

浏览所有主题