#64462025年3月15日作者 brighterfrog2 个回答
描述 我想申请一个新的组件类型来处理交互式图表。 使用场景 在页面构建器中创建数据可视化 支持动态图表更新 与现有数据源的集成 预期行为 该组件应当： 支持多种图表类型（条形图、直线图、饼图） 允许通过组件面板输入数据 为图表元素提供样式选项 补充背景 这将增强GrapesJS的数据可视化能力。
artf
你好@brighterfrog我们只用GH Issues来报告错误。 请查看这些内容，了解我们如何管理功能请求和插件： [路线图流程]（https://github.com/GrapesJS/grapesjs/discussions/5291） [插件推荐流程]（https://github.com/GrapesJS/grapesjs/discussions/5985） 顺便说一句，你可能已经找到你想要的东西了：[GrapesJS Chartjs 插件]（https://g...
GJS Helper
GrapesJS 高度可扩展，允许你自定义组件类型以满足特定需求，比如集成交互式图表。这包括定义新的组件模型、视图逻辑以及用户交互的相关特征。我们将以Chart.js为示例图表库。 步骤1：包含图书馆Chart.js 首先，确保Chart.js包含在你的项目中。你可以通过CDN添加，或者通过npm安装。 步骤2：定义自定义图表组件 我们将定义一个名为 chart的新组件类型。这包括设置模型（默认属性、特征）和视图（渲染和更新方式）。 步骤3：为图表组件添加块 要让你的新 c...
#64222025年2月27日作者 sumasal2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 截至2025年2月27日，Chrome 133 带开发分支 可复制演示链接 克隆开发仓库截至2025年2月27日 描述一下那个虫子 如何复现这个漏洞？ ...克隆仓库，构建并开始 ...在演示页面点击进入预览模式，尝试拖动组件。它是全编辑模式，画布会以半编辑模式运行，直到用预览按钮回收 预期的行为是什么？ ...编辑模式下不应禁用拖曳或任何编辑功能 目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 ``` 行为准则 [x] 我同意遵守本项目的行为准则
GJS Helper
看起来你发现了GrapesJS dev分支中的一个bug，即即使编辑器处于预览模式，组件拖拽仍然可能。这确实与预期行为相反，因为预览模式应禁用所有编辑操作，包括拖动、调整大小和选择组件，以提供真正的只读视图。 预期行为 当调用editor.setPreview(true)时，GrapesJS设计为切换为非交互模式。这通常包括： 隐藏编辑器面板和工具栏。 禁用组件选择和高亮功能。 防止所有组件的拖放操作。 禁用调整尺寸的把手。 根本原因（假说） 虽然editor.setPre...
#64162025年2月22日作者 clonefunnels2 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 和 Chrome 可复制演示链接 我无法做远程存储的演示 描述一下那个虫子 导入任何标签旁边带有“>”的标签> 示例：'<a href=“#”>></a>' 还有类似的情况： '<a href=“#”>首页</a> > <a href=“#”>商店</a>>' 这也破坏了它...... '<span class=“test”>主页</span> > <span class=“test2”>购物</span>>' ![图片]（https://github.c...
artf
我无法做远程存储的演示 远程存储不需要演示。 本地存储和远程存储使用同一个接口，这意味着如果你无法用本地存储复制，问题很可能出在你的后端。 我觉得保存后重新加载内容没有问题 <img width=“646” alt=“Image” src=“https://github.com/user-attachments/assets/da829381-5803-49fc-b57b-40a5b2c27208” />
GJS Helper
这是一个关键的错误报告。当 HTML 实体 >（大于 符号）存在时，尤其是靠近 HTML 标签，GrapesJS 显示“未定义”且无法加载内容的问题，表明 GrapesJS内部的 HTML 解析或组件转换逻辑存在问题。 根本原因分析 GrapesJS依赖HTML解析器（通常在浏览器中DOMParser）将原始HTML字符串转换为其内部组件模型。虽然DOMParser本身在处理HTML实体方面通常较为稳健，但问题很可能出现在GrapesJS后续将解析后的DOM节点处理成...
#62812024年10月30日作者 sumasal3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新的Chrome、Firefox、Edge 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？在图层管理器中拖动一个组件，尝试将其置于本体下方的其他物品之间不允许。允许筑巢 预期的行为是什么？ ...嵌套和重新排序都应被启用 目前的行为是什么？ ...顶层仅启用嵌套 行为准则 [X] 我同意遵守本项目的行为准则
artf
下次版本会修复。 感谢@sumasal的报告，也感谢@mohamedsalem401的修复 🙇 ♂️
sumasal
期名被删减了。我的意思是，它似乎能在较旧版本如0.21.8及以下运行
GJS Helper
GrapesJS层管理器设计成允许在同一层级重新排序组件，也可以在其他层级内嵌套组件。根据官方GrapesJS演示（https://grapesjs.com/demo）和最新版本的GrapesJS，该功能运行正常。 你遇到的问题可能源于在图层管理器中拖放物品时需要的精确度，以区分重新排序和嵌套。 理解层管理器拖放行为 当你在图层管理器中拖动组件时，视觉反馈会显示预期操作： 重新排序（同一级别）: 要将组件重新排序到与其兄弟级别相同（例如，将组件移动到另一个组件上方或下方，该...
#62022024年10月9日作者 klipto-inc2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 129 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 const newEditor = grapesjs.init({ fromElement： true， // 允许HTML中的组件 容器：“#editor”， 画布：{ 剧本：[ “https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js”， ], }, 高度：“100VH”， 插件：[ gjsPreset网页， GjsBlockBasic， gjsForms， pluginTool...
artf
@klipto-inc，请制作带有正确且可复现的实时演示的错误报告
GJS Helper
你遇到的 Preline.js 在 GrapesJS 画布上无法工作的问题，尽管它通过 canvas.scripts包含，是依赖 DOMContentLoaded 初始化的 UI 库常见的时序问题。 根本原因 许多JavaScript UI框架和库，包括Preline.js，设计为在浏览器DOMContentLoaded事件触发时自动初始化其组件。该事件表示初始HTML文档已被完全加载和解析。 当你在GrapesJS中包含canvas.scripts脚本时，脚本确实会加载到...
#61722024年9月25日作者 yashvi20262 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 --- 描述一下那个虫子 如果你能在编辑器里切换主题，那就太好了，这样我就能根据喜好在深色和浅色之间切换。行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
GrapesJS 没有内置暗/浅主题切换器，因为其界面可以通过 CSS 高度自定义。不过，你可以通过利用 GrapesJS对 CSS 变量的广泛使用，并在编辑器根元素上切换自定义 CSS 类，轻松实现暗色主题支持。 该方案包含三个主要部分： HTML 结构： 一个用于GrapesJS的容器和一个用于切换主题的按钮。 CSS 样式： 通过覆盖 GrapesJS在特定类内默认的 CSS 变量来定义暗色主题样式。 JavaScript 逻辑： 初始化GrapesJS，处理主题切换...
#60862024年8月23日作者 jdkcoder3 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Edge v128可复现演示链接https://codesandbox.io/p/devbox/github/jdkcoder/cv-builderhttps://stackblitz.com/github/jdkcoder/cv-builder 描述一下那个虫子 我在Nuxt.js 3项目中使用GrapesJS，每次在 /components/common/LeftSidebar.vue 运行 clearAll（） 函数后，错误Cannot read properties of undefined (reading 'lastComponent'...
artf
你可以跳过移除组件（'instance.value.Components.clear（）'），因为你本来就会破坏编辑器 “''js if （确认（'你确定要清理画布吗？'）{ localStorage.clear（） reRender（） } ``` 这不应该产生任何错误
WilliamDASILVA
@jdkcoder 通过注释 reRender 函数，问题就解决了。 lastComponent 错误源于编辑器中的 this.get('selected') 在某个时刻未定义。通过检查调试器，当调用reRender时，确实会变成未定义，因为它重新初始化了 grapes。 关于调整大小，我没看到你给的Stackblitz例子有什么问题。你可能应该单独开一个期刊，详细说明你遇到的行为和预期。
GJS Helper
看起来你在GrapesJS Nuxt.js 3项目中遇到了两个截然不同的问题。让我们来拆解并提供解决方案。 第1期：Cannot read properties of undefined (reading 'lastComponent')之后clearAll() 根本原因 当GrapesJS的内部状态，特别是与画布或活动组件相关的状态在所有组件被移除后变得不一致时，通常会出现这种错误。当你调用instance.value.DomComponents.clear()时，画布上...
#60472024年8月7日作者 danstarns1 个回答
GrapesJS 仓库构建工件发布过程中存在以下问题： 工件应直接来自开发者的机器。- https://github.com/GrapesJS/grapesjs/pull/6041 该过程没有文档 我们有多个软件包要发布，也需要完善的文档。该工单旨在标准化并记录 GrapesJS OSS 仓库的发布流程，使其与行业标准工作流程保持一致。这项工作将确保所有贡献者的一致性、可靠性和易用性。
GJS Helper
GrapesJS发布流程的问题——特别是对开发者机器的依赖以及缺乏文档——凸显了对标准化、自动化和透明工作流程的需求。采用行业标准的CI/CD（持续集成/持续交付）流水线将解决这些问题，确保所有贡献者的一致性、可靠性和易用性。 根本原因分析 核心问题源于缺乏正式化、自动化且文档化的发布流程。依赖单个开发者机器来构建和发布工件会带来若干风险： 不一致： 不同的开发环境可能导致构建输出的差异。 可重复性问题： 很难保证构建能被完全复制。 安全风险： 直接从本地机器发布可能会暴露...
#60322024年8月3日作者 aswinkumar8632 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v126 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？打开 [demo]（https://grapesjs.com/demo）双击任意现有的图像组件以打开资产管理器。将视频文件拖拽到图片上传区。等待视频文件上传。点击上传的视频资源选择它。 注意： 这个问题只在拖拽时出现。视频组件也受此影响。 预期的行为是什么？ 图片组件应当防止错误的文件类型选择。如果资产管理器第一步阻止上传错误文件类型，会更好。 行为准则 [X] 我同意遵守本项目的行为准则
artf
感谢@aswinkumar863报告。我很乐意合并修复的PR。
GJS Helper
你提到的问题，GrapesJS Image组件允许通过拖放上传和选择视频文件，这是默认资产管理器拖放处理程序未明确强制文件类型限制时常见的情况。虽然原生的 HTML input type="file" 元素使用 accept 属性过滤文件选择对话框，拖放操作则需要自定义验证逻辑以防止处理不需要的文件类型。 根本原因 演示中所见的默认GrapesJS资产管理器提供了基本的上传机制。当文件被拖放时，浏览器会提供对这些文件的访问。如果拖拽事件处理程序或后续上传函数没有明确的客户端...
#60012024年7月13日作者 thigh1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ MS Edge 126.0.2592.87（官方版本）（arm64） 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞？...使用 grapesjs的0.21.11或0.21.12版本，创建一个多页项目。在页面A时，图层管理器正常工作。切换到页面B同样正常。 ...切回页面A会导致图层管理器停止响应，使其无用。实际上，切换到之前加载的任意页面会导致这个问题，但首次切换到任意页面则正常。 切回v0.21.10问题解决 预期的行为是什么？ ...图层panager应反映当前加载页面的组件并允许交互。 目前的行为是什么？ ...图层管理器停...
GJS Helper
看起来你在0.21.11和0.21.12版本中遇到了已知的回归GrapesJS与多页面项目中层管理器行为相关的现象。问题出现在切回之前加载过的页面时，导致层管理器失去响应。 根本原因解释 GrapesJS层管理器由一个负责渲染组件树的 LayerManagerView 驱动。该视图维护对应显示组件的collection的参考，通常是 editor.DomComponents.getWrapper().get('components')（当前页面根组件的子节点）。 当你在Gr...