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

GrapesJS 问题

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

找到 231 个问题

🔍 general
#60922024年8月26日作者 MdShadabAhamad3 个回答
0 个反应
提问常规

@artf，我有个问题，我们能在Studio里实现自定义JS吗？意思是，有嵌入的 JavaScript 代码功能吗？

@artf，我有个问题，我们能在Studio里实现自定义JS吗？意思是，有嵌入的 JavaScript 代码功能吗？ Originally由@MdShadabAhamad在 https://github.com/GrapesJS/grapesjs/discussions/6080#discussioncomment-10449335发布

artf

@MdShadabAhamad请避免在讨论中开启问题，谢谢

icoco

看起来没有工作室的源代码，你能在哪里找到工作室？

GJS Helper

是的，GrapesJS 提供了强大的功能，可以在网页中实现和嵌入自定义 JavaScript 代码，无论是动态内容在画布上还是最终导出输出。实现这一点的方法有多种，取决于脚本是组件特定、通用片段还是全局页面级脚本。 1.使用 script 组件类型（推荐用于组件特定逻辑） GrapesJS 有一个专门为嵌入 JavaScript 设计的 script 组件类型。这是添加直接关联组件动态行为的最有GrapesJS原生方式。 工作原理： 你可以定义一个插入script分量的块。...

查看详情
#60492024年8月7日作者 danstarns1 个回答
0 个反应
安全性能常规

依赖关系

目前代码库依赖于过时的依赖关系。该票旨在： 将所有现有依赖更新到最新的稳定版本。 设置Dependabot，未来自动检查和更新依赖。 保持依赖系统的更新将提升安全性、性能以及与其他工具和库的兼容性。Dependabot 将确保依赖保持最新，减少手动更新的需求。

GJS Helper

保持项目依赖的更新对安全性、性能和兼容性至关重要。对于GrapesJS项目，通常使用Node.js和npm/yarn，这需要双管齐下的方法：最初手动更新，然后用Dependabot自动化后续更新。 1.手动更新现有依赖 在设置Dependabot之前，最好将所有当前依赖都恢复到最新的稳定版本。这个过程是任何Node.js项目的标准流程。 第一步：检查包裹是否过期 在终端中导航到项目的根目录，并运行： 该命令将列出你所有依赖及其当前、需要和最新版本。要密切关注主要版本差异，因...

查看详情
#60482024年8月7日作者 danstarns1 个回答
0 个反应
typescript缺陷常规

打字稿

代码库目前使用过时版本的 TypeScript。该票旨在： 升级到最新版本的TypeScript。 确保所有项目中的TypeScript配置一致。 将TypeScript集成到开发和CI流程中，实现自动类型检查。 更新和标准化 TypeScript 将提升类型安全性，减少错误，并提升整体代码质量。

GJS Helper

在GrapesJS代码库中升级和标准化TypeScript，是提升可维护性、早期发现错误和提升开发者体验的关键一步。本解决方案概述了实现这一目标的步骤，重点关注依赖升级、一致配置以及CI/CD集成。 1.升级到最新版本的TypeScript 首先，将typescript包和相关@types/定义更新到最新的稳定版本。建议使用像npm-check-updates（或yarn upgrade-interactive）这样的工具，方便识别过时的依赖。 安装typescript:...

查看详情
#60462024年8月7日作者 danstarns2 个回答
0 个反应
typescript常规

提交钩子

当前代码库依赖提交钩子来执行某些规则和检查。该票旨在： 移除现有的提交钩子。 配置配置配置执行器以执行这些检查，并在开发分支或拉取请求中报告问题。 将这些职责转交给CI跑者将简化开发流程，确保问题能够以集中方式持续被发现和解决。

danstarns

相关报道： https://github.com/GrapesJS/grapesjs/issues/6045

GJS Helper

移除客户端提交钩子并将其责任转交给CI执行者的请求，是提升开发工作流程一致性和可靠性的合理策略。虽然这是一种通用的软件开发实践，并非专属于GrapesJS功能，但这是维护任何稳健项目（包括使用GrapesJS构建的项目）的关键方面。这种方法集中质量检查，确保所有贡献均得到统一验证，无论开发者配置如何。 第一部分：移除现有提交钩子 提交钩子通常通过两种方式配置：在.git/hooks目录内手动配置，或通过专门的工具如 Husky 用于 JavaScript 项目。 1.手动提...

查看详情
#60452024年8月7日作者 danstarns1 个回答
0 个反应
缺陷typescript常规

线条处理，格式化

代码库目前使用过时的线条工具和格式化库。该票旨在： 升级到最新版本的线条处理工具和格式化库。 确保所有项目的线条和格式规则保持一致。 将这些工具集成到开发和CI流程中，实现自动化执法。 标准化这些工具将提升代码质量，减少错误，并创造更为统一的开发环境。

GJS Helper

标准化linting和格式化对于维护代码质量和GrapesJS代码库内的连贯开发环境至关重要。这一举措将显著提升开发者体验并减少潜在错误。以下是实现这一目标的全面方法： 1.升级到最新的打印和格式化工具 推荐工具： ESLint： 用于 linting JavaScript/TypeScript 代码。 更漂亮： 为了保持一致的代码格式。 安装/升级步骤： 首先，确保你安装了Node.js和npm/yarn。然后，更新你的 package.json 依赖。 2.确保模板和格...

查看详情
#60442024年8月7日作者 danstarns2 个回答
0 个反应
提问typescript常规

Node JS LTS 版本

在整个代码库中，我们构建并关联了基于非常旧版本Node.js的依赖。 参见： https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/publish.yml#L15 https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/build.yml#L15 https://github.com/GrapesJS/grapesjs/discussions/5973 https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md?plain=...

danstarns

相关报道：https://github.com/GrapesJS/grapesjs/issues/6048https://github.com/GrapesJS/grapesjs/issues/6049

GJS Helper

谢谢你举报，@danstarns。 关于Node JS LTS版本的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed...

查看详情
#59932024年7月5日作者 TutorialMan77272 个回答
0 个反应
提问缺陷常规

空面板显示

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 歌剧109 可复制演示链接 https://jsfiddle.net/9zmyrhoe/ 描述一下那个虫子 如何复现这个漏洞？ 打开上面的 jsfiddle 然后跑 预期的行为是什么？ 这些面板本不该展示 目前的行为是什么？ 黑色空面板 如果有任何额外信息，欢迎随时提问 行为准则 [X] 我同意遵守本项目的行为准则

TutorialMan7727

所以，下面的CSS没有工作。我不得不手动更改grapes.min.css文件里的CSS。 CSS 无法在 grapes.min.css 中覆盖 CSS。 .gjs-cv-canvas { 顶部：0; 宽度：100%; 身高：100%; }

GJS Helper

即使panels.defaults设置为空数组，GrapesJS编辑器中出现“空白黑色面板”的问题，源自GrapesJS初始化界面的方式。虽然设置panels.defaults: []会阻止任何按钮或内容添加到默认面板中，但这些面板的HTML容器默认仍会被创建并附加到编辑器的DOM。如果这些容器是空的且背景颜色（无论是GrapesJS的默认CSS还是浏览器的用户代理样式表），它们将以可见的空框形式出现。 你的设置是用appendTo blockManager、layerMa...

查看详情
#59372024年6月10日作者 nimisha7443 个回答
0 个反应
提问缺陷常规

图片发送至邮寄

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 镀铬可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html https://prnt.sc/SyoEBQMUJbO8描述一下那个虫子 如何复现这个漏洞？ 我正在制作PRAPES JS通讯演示版的演示，并处理HTML并发送邮件 预期的行为是什么？ 我想用那个模板发送图片，然后通过邮件传递。就像这是我的演示 => https://prnt.sc/iTHa6Bg0IfRr 目前的行为是什么？ 现在在演示视图里，图片看起来还不错，但当我发送邮件时，图片无法工作，IMG标签中也没有传递SRC 我收...

artf

@nimisha744该仓库中的问题仅针对核心框架相关的漏洞，演示只是为了展示框架能力。

nimisha744

你能帮我拿到这个代码吗？https://prnt.sc/qAb-i9M5c6SF 顺便说一句，我现在只收到 HTML let html = editor.getHtml（）;另外请提供通讯的选项 图片和侧边栏里我看到的是名字，不是图标，请分享选项配置 那种环境 2024年6月10日星期一 下午5：58 Artur Arseniev @.> 写道： 这个仓库里> @nimisha744 <https://github.com/nimisha744>问题只有核心框架相关的漏洞，...

GJS Helper

你遇到的问题是，图片在 GrapesJS 编辑器中显示正确，但在发送的邮件中显示 src="" 或加载失败，这是处理HTML邮件模板时非常常见的问题。根本原因在于邮件客户端如何处理图片源。 根本原因：电子邮件中的图片需要绝对且公开可访问的网址 与能够解析相对路径或访问本地文件的网页浏览器不同，电子邮件客户端在不同的环境中工作。它们不能： 访问本地文件： 如果你的图片 src 指向本地机器上的文件（例如 file:///C:/Users/YourUser/image.jpg）...

查看详情
#59142024年5月28日作者 viicslen2 个回答
0 个反应
提问缺陷常规

包含遮罩和图像的SVG渲染不正确

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Microsoft Edge 125.0.2535.51 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 预期的行为是什么？ 编辑器应该在SVG标签内渲染图像和遮罩 目前的行为是什么？ SVG组件没有可见内容行为准则 [X] 我同意遵守本项目的行为准则

artf

请提供一个有效且可复现的演示

GJS Helper

你遇到的问题是，使用内部url(#id)引用（如mask="url(#mask012)"或clip-path="url(#myClip)"）的SVG元素在GrapesJS编辑器中无法正确渲染，这是浏览器在<iframe>上下文中解析这些引用时已知的行为。 根本原因 GrapesJS 在<iframe>中渲染画布，以将编辑者的样式和脚本与主页隔离开来。当 SVG 被放置在该 iframe 中时，url(#id)引用相对于<iframe>的文档基 URI 进行了解析。通常，Gr...

查看详情
#58692024年5月7日作者 ajayagrahari092 个回答
0 个反应
缺陷提问常规

图标和形状选项

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬可复制演示链接 测试描述一下那个虫子 我没看到任何显示图标或形状的方法行为准则[X] 我同意遵守本项目的行为准则

artf

如有疑问，请使用讨论面板。

GJS Helper

GrapesJS作为一个高度灵活且无偏见的框架，默认不包含内置的图标或形状集合。相反，它提供了强大的 API，可以集成任何外部库或创建自定义组件以实现这一点。这种方法允许你选择图标库（例如 Font Awesome、Material Icons）或最适合项目需求的形状样式。 下面，我们将介绍如何集成Font Awesome图标，并利用GrapesJS自定义组件和块创建基础形状组件。 1.添加图标（例如，字体超棒） 添加图标时，通常会按照以下步骤操作： 加载图标库：将你所选图...

查看详情

浏览所有主题