GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#64852025年4月10日作者 yashvi20262 个回答

0 个反应

ShowSelectionPalette 无法与自定义色彩选择器配合使用

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://codepen.io/Harshsne/pen/GgRbMyg 描述一下那个虫子如何复现这个漏洞？添加文本框。启用RTE。点击最后一个选项。变色点击好预期的行为是什么？重新打开颜色选择器时，选中的颜色应该是可见的。目前的行为是什么？重新打开选色器时，选中的颜色不会显示。 ![图片]（https://github.com/user-attachments/assets/e5f02996-120b-486c-ade6-f75e7d2e776f）行为准则 [x] 我同意遵守本项目的行为准则

mosh-tudor

@yashvi2026 你的代码有很多问题，这就是它无法正常工作的原因。这和GrapesJS无关。如果你不确定问题出在哪里，可以考虑用AI工具检查代码。

GJS Helper

你遇到的问题，GrapesJS的富文本编辑器（RTE）中的自定义颜色选择器在重新打开时不会显示之前选中的颜色，这源于自定义颜色选择器的onOpen实现没有正确初始化其界面，并未正确初始化GrapesJS当前的颜色值。根本原因当GrapesJS打开通过rte.colorPicker定义的自定义颜色选择器时，它调用onOpen函数，传递一个包含当前选中文本（如果有）color的opts对象，一个onSelect回调来应用新颜色，以及一个el（选择器应渲染的DOM元素）。你当...

查看详情

#64582025年3月20日作者 accvi4 个回答

1 个反应

提问 style-manager 组件缺陷文档

Sector.setName 不工作

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/qbpodnm4/ 描述一下那个虫子如何复现这个漏洞？在画布中选择一个组件。访问风格管理器，检查“General”是否被重命名为“Allgemein”。预期的行为是什么？画面显示了“Allgemein”。目前的行为是什么？画面显示“将军”。例如sector.setOpen（true）即可。行为准则 [x] 我同意遵守本项目的行为准则

mosh-tudor

@accvi https://github.com/GrapesJS/grapesjs/discussions/6031#discussioncomment-10234496

accvi

难道是我在代码里做错了什么吗？AI帮不上忙。

artf

[@accvi]（https://github.com/accvi） [#6031（回复帖中）]（https://github.com/GrapesJS/grapesjs/discussions/6031#discussioncomment-10234496） ☝️

查看详情

#64482025年3月15日作者 brighterfrog2 个回答

0 个反应

增强常规

功能请求：暗黑模式支持

功能描述在编辑器界面中添加暗黑模式支持。动机减少夜间发育时的眼睛疲劳符合现代UI/UX标准支持系统级暗模式偏好拟议实施添加暗色模式色彩调色板创建主题切换机制用户偏好的持久化添加系统主题检测补充背景许多用户在夜间工作，并请求了此功能。

artf

与[这里]（https://github.com/GrapesJS/grapesjs/issues/6446#issuecomment-2729421252）相同

GJS Helper

为GrapesJS添加暗黑模式支持涉及CSS主题、用于主题切换和持久化的JavaScript，以及与系统偏好设置的集成。虽然GrapesJS没有内置暗黑模式切换，但其模块化特性允许实现稳健的自定义实现。以下是详细的做法： 1.定义暗模式色彩调色板（CSS）实现主题最有效的方法是使用CSS变量。你需要为光源主题定义一组变量，然后在应用到编辑器根元素的.theme-dark类（或类似类）中覆盖它们。这个自定义CSS应在GrapesJS默认样式之后加载，以确保覆盖生效。首先，...

查看详情

#64472025年3月15日作者 brighterfrog2 个回答

0 个反应

组件缺陷常规

故障报告：导航菜单无法响应

描述导航菜单无法正确响应移动设备上的屏幕尺寸变化。繁殖步骤打开页面构建器添加导航菜单组件在移动设备上预览或调整浏览器窗口大小观察菜单行为预期行为菜单在移动端应合并为汉堡菜单菜单项应合理间隔下拉菜单应适用于触摸设备当前行为菜单在移动端扩展项目重叠触碰响应差环境浏览器：Chrome 120 设备：iPhone 13 操作系统：iOS 17

artf

@brighterfrog遵守漏洞报告模板很重要。请开启一个有效的bug报告（附带可复现的演示）。

GJS Helper

你遇到的GrapesJS导航菜单在移动设备上不响应是常见的挑战，因为GrapesJS主要提供结构组件。实现一个完全响应式、可折叠的导航菜单（通常称为“汉堡菜单”）需要自定义的媒体查询CSS和切换功能的JavaScript。GrapesJS并不会自动将这种复杂行为注入默认组件中。根本原因 GrapesJS导航栏组件默认提供基本的nav结构，通常使用 flexbox 进行水平排列。然而，它不包含隐藏完整菜单并在小屏幕上显示汉堡图标的具体 CSS 媒体查询，也不包含在点击汉堡图...

查看详情

#64462025年3月15日作者 brighterfrog2 个回答

0 个反应

增强组件 typescript

功能请求：添加新的组件类型

描述我想申请一个新的组件类型来处理交互式图表。使用场景在页面构建器中创建数据可视化支持动态图表更新与现有数据源的集成预期行为该组件应当：支持多种图表类型（条形图、直线图、饼图）允许通过组件面板输入数据为图表元素提供样式选项补充背景这将增强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...

查看详情

#64452025年3月14日作者 bgrand-ch3 个回答

2 个反应

提问缺陷文档 typescript

医生网站上缺少信息

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Firefox 136.0.1（64位）可复制演示链接 https://grapesjs.com/docs/api/editor.html#editor 描述一下那个虫子如何复现这个漏洞？去 https://grapesjs.com/docs/api/editor.html#editor 预期的行为是什么？展示活动列表。目前的行为是什么？ '{REPLACE_EVENTS}' 行为准则 [x] 我同意遵守本项目的行为准则

artf

文档更新：https://grapesjs.com/docs/api/editor.html#available-events

artf

谢谢@bgrand，我很快🙇 ♂️会修好的

GJS Helper

感谢你报告这个问题。你正确地识别了 GrapesJS 文档网站上的一个漏洞。根本原因： {REPLACEEVENTS} 占位符表明文档生成过程未能正确注入编辑器事件列表到 editor.html API 页面。这是文档生成器的构建时问题，而非 GrapesJS 库本身的漏洞。当前状态：我们承认本部分文档不完整，使用户难以发现所有可用的编辑事件。寻找编辑活动的变通方法：在文档修复过程中，你可以通过几种方法发现编辑器事件： *通过 editor.on(''):程序化...

查看详情

#64252025年2月27日作者 asabryil1 个回答

0 个反应

提问组件缺陷 typescript

拖拽高度为0的元素会导致意外行为

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？所有浏览器，最新版本可复制演示链接可在官方演示中复刻描述一下那个虫子如何复现这个漏洞？添加一个方块，将高度和最小高度设为0 添加一个法线块添加一个容器尝试把高度为0的块直接放到容器上，它会移除或重复一些组件，在某些情况下，0高度块无法上下拖拽。预期的行为是什么？拖动方块不应该取决于元素的高度。目前的行为是什么？拖拽方块取决于元素的高度，且必须大于0才能正常工作。行为准则 [x] 我同意遵守本项目的行为准则

GJS Helper

这是GrapesJS中已知的行为，与其拖放系统（通常依赖视觉边界框）与零高度元素的交互有关。理想情况下，拖放机制应足够稳健，能够处理元素，无论其视觉尺寸如何，但height: 0（和min-height: 0）状态可能导致计算投放区和拖拽指示器位置时出现问题。根本原因 GrapesJS拖放功能，像许多类似系统一样，依赖于准确确定DOM中元素的视觉边界和可用空间。当元素具有height: 0和min-height: 0时，其垂直维度完全崩溃。这使得拖放逻辑难以实现：计算投...

查看详情

#64222025年2月27日作者 sumasal2 个回答

0 个反应

提问增强组件缺陷画布

在开发分支中，当预览启用时，不应该允许拖动组件，但实际上是允许的。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？截至2025年2月27日，Chrome 133 带开发分支可复制演示链接克隆开发仓库截至2025年2月27日描述一下那个虫子如何复现这个漏洞？ ...克隆仓库，构建并开始 ...在演示页面点击进入预览模式，尝试拖动组件。它是全编辑模式，画布会以半编辑模式运行，直到用预览按钮回收预期的行为是什么？ ...编辑模式下不应禁用拖曳或任何编辑功能目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 ``` 行为准则 [x] 我同意遵守本项目的行为准则

sumasal

给急躁者的临时变通办法：

GJS Helper

看起来你发现了GrapesJS dev分支中的一个bug，即即使编辑器处于预览模式，组件拖拽仍然可能。这确实与预期行为相反，因为预览模式应禁用所有编辑操作，包括拖动、调整大小和选择组件，以提供真正的只读视图。预期行为当调用editor.setPreview(true)时，GrapesJS设计为切换为非交互模式。这通常包括：隐藏编辑器面板和工具栏。禁用组件选择和高亮功能。防止所有组件的拖放操作。禁用调整尺寸的把手。根本原因（假说）虽然editor.setPre...

查看详情

#64202025年2月25日作者 peterchon1 个回答

0 个反应

提问缺陷 typescript

日语输入加空回

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 133.0.6943.127（官方构建）（arm64）可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子如何复现这个漏洞？创建文本块开始输入任何日文字符从自动建议浮动框中选择一条条目预期的行为是什么？所选条目应输入文本块目前的行为是什么？已输入“选择”条目但不可见，新的返回条目会加在文本块底部如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：无 https://github.com/user-attachments/assets/3dd992d8-dc13...

GJS Helper

你在GrapesJS中遇到的日语输入问题，即所选条目不可见且额外返回，这是依赖contenteditable和输入法编辑器（IME）的富文本编辑器中常见的问题，比如GrapesJS默认RTE使用的ProseMirror。这通常是由于IME合成阶段事件处理冲突所致。根本原因在输入日语（或其他需要IME的语言）时，输入会经历一个“组合”阶段，字符被组合并建议。Enter键通常用于确认IME自动建议框中选中的建议。该错误的根本原因是GrapesJS的底层富文本编辑器Prose...

查看详情

#64162025年2月22日作者 clonefunnels2 个回答

0 个反应

缺陷增强提问文档 typescript

HTMLENTITIES >破坏远程存储——显示未定义

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节点处理成...

查看详情

GrapesJS 问题

浏览所有主题