GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#42852022年4月25日作者 zauchad2 个回答
0 个反应

工具栏宽度调整不正确

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v100.0.4896.127可复制演示链接 没有演示链接。描述一下那个虫子 如何复现这个漏洞?直接在工具栏内放置更大的图标(例如font awesome class: fa-2x): 预期的行为是什么? 组件的动作工具栏应该正确调整其宽度、填充和相对于组件的位置(目前每个图标的单元宽度是硬编码的)。 目前的行为是什么? 这里有一个可视化示例,展示了更大工具栏图标和工具栏的样子: <img width=“1054” alt=“Zrzut ekranu 2022-04-25 o 11 08 41” src=“https://user-imag...

artf

保持工具栏项目大小固定有很多原因,如果你想让它们变大,可以直接更新CSS。

ClaudeCode

谢谢你举报,@zauchad。 关于[组件工具栏]工具栏宽度没有正确调整大小的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')...

#42632022年4月16日作者 omkar1111112 个回答
0 个反应

SSL证书怎么做?

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 可复制演示链接 描述一下那个虫子 抱歉在这里问。但我很着急。 我正在创建一个为客户托管网站的服务。 那么,对于每个新网站,GrapeDrop 会专门为该网站创建新的证书吗?假设我在GrapeDrop中指向我的域名来“在 example.com”。 它是专门为“example.com”创建SSL证书,还是使用已有的? 另外,如果GrapeDrop创建了新的证书。它是如何动态识别GrapeDrop Web服务器应服务哪个SSL证书的?如果你用的是Nginx,能给我看一个示例代码块吗? 行为准则 [X] 我同意遵守本项目的行为准则

artf

请避免使用 GrapesJS 的问题来解答非主题问题。

ClaudeCode

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

#42482022年4月7日作者 protozoo2 个回答
0 个反应

在 vscode 扩展 webview 中,块拖放交互失败

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? VSCode(VSCode 扩展中的 WebView) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?创建一个新的 vscode 扩展(或使用你已有的扩展)创建一个包含 HTML 文档的 Webview,加载 GrapesJS 演示的 iframe(见下方示例代码)运行扩展和 webview 以加载 GrapesJS 演示尝试在画布上拖拽葡萄块 预期的行为是什么? 拖曳的方块应加入画布 目前的行为是什么? 拖拽的组件不会被添加到画布中。 你可以在这里观看一个展示问题的视频:https...

artf

你好@protozoo我不太清楚具体原因,但看起来 vscode iframe(可能是沙箱的)阻碍了原生的 HTML5 拖放功能(这是块上用的操作)。 由于这与核心内容不完全相关,我就把这个问题移到讨论区。

ClaudeCode

谢谢你举报,@protozoo。 关于在VScode扩展网页视图中阻挡拖放交互失败的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#42472022年4月7日作者 gustavohleal2 个回答
0 个反应

组件在克隆、移动或添加时消失或未被渲染

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 v96 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞?添加一个单列组件选择列点击工具栏上的复制按钮重复步骤2和3,组件为两列、三列和导航栏链接,嵌入导航栏组件。移动组件或重复步骤3,第一个克隆体会出现 预期的行为是什么? 点击复制按钮时,克隆必须出现在原件的侧面。 目前的行为是什么? 克隆体不会在画布内渲染,而是出现在导出的代码中。 在从这些组件的渲染函数调试时,似乎组件渲染了几步后就消失在grapes.js的函数中。下面的视频展示了一个包含 de navbar 和 n...

artf

抱歉,demo-mjml 是一个插件,与核心无直接关联。因为我没看到组件的默认渲染器存在问题,可能和mjml渲染器有关,我也没有理由让这个问题继续存在。 尽管如此,如果有人能找到问题并且与核心有关,我愿意修复。

ClaudeCode

谢谢你举报,@gustavohleal。 关于组件在克隆、移动或添加时消失/未渲染的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somet...

#41572022年2月24日作者 Adham3803 个回答
0 个反应

调整画布大小会导致组件在导出时以“绝对”模式出现错误位置

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Microsoft edge 98.0.1108.56 可复制演示链接 https://jsfiddle.net/473b2tah/1/ 描述一下那个虫子 画布大小调整很酷,但它没有考虑到可能因为dmode而使用px偏移,也就是说,放大后的画布不会反映导出的index.html页面。导出后右侧整个区域是空的,因为图片从未被要求重新调整比例以适应导出后的版本。比如这里画布的缩放是0.85,这意味着图片应该被放大1.15倍,并相应地向右移动,但它们却卡在左边,导致右侧留下约15%的空隙。画布大小应该是大约1632像素,而导出宽度则比1920像素大15%。...

Adham380

我算是找到了一个变通办法...... 在CSS中将.gjs-frame-wrapper设置为所需宽度,然后在CSS中将iframe的“translate”(- x px, 0px)进行转换。那Canvas宽度就不对了(稍微小一点),但一切似乎都正常......不过我不会就此结案,因为作者的实现不当,正如之前所述,作者本可以非常轻松地修复这个问题。

artf

https://github.com/artf/grapesjs/issues/3770#issuecomment-1059784514

ClaudeCode

谢谢你举报,@Adham380。 *调整画布大小会导致同伴在导出dmode时出现错误位置的问题,'absolute'似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeS...

#40972022年1月24日作者 Joshmamroud3 个回答
1 个反应

MousePosFetcher 在 resizer config & change:style listener 无法工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢 V1.34.81 可复制演示链接 https://jsfiddle.net/joshmamroud/vkrcxuzb/41/ 描述一下那个虫子 如何复现这个漏洞?在画布上添加一个网格块调整列大小注意 mousePosFetcher 和 this.listenTo(this, 'change:style', ...) 的控制台日志没有显示。 预期的行为是什么? 当 mousePosFetcher 被叫时,也应呼叫 CB 当从this.listenTo(this, 'change:style', this.updateWidth)调用“change...

artf

你好@Joshmamroud呼叫 CB,当 mousePosFetcher 被呼叫时 这并没有发生,因为“可调整”选项并不会直接传递给调整器,而是通过[“resize”命令(https://github.com/artf/grapesjs/blob/master/src/commands/view/Resize.js)传递。你可以看到鼠标PosFetcher被画布处理。我可以更新命令以实现这种自定义,但请记住画布会做更多逻辑来获得正确的坐标。目前,你可以自己[扩展命令](h...

Joshmamroud

谢谢@artf!这说得通。

ClaudeCode

谢谢你举报,@Joshmamroud。 关于 mousePosFetcher 在 resizer 配置和 change:style 监听器无法工作的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on(...

#40822022年1月20日作者 jloguercio3 个回答
0 个反应

从画布框中移除一些初始样式

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v96 可复制演示链接 没有演示 描述一下那个虫子 当我加载某个模板时,编辑器会添加一些初始样式,比如下面的图片,我该如何设置或移除某些样式?举个例子:我需要移除Webkit的滚动条样式,因为它会修改模板内侧的所有滚动条。 ![test123](https://user-images.githubusercontent.com/12191804/150230086-60edec9c-c0a8-45dc-a91b-4ec583952266.PNG)行为准则 [X] 我同意遵守本项目的行为准则

artf

检查主编辑器的配置选项(例如“baseCss”)https://github.com/artf/grapesjs/blob/dev/src/editor/config/config.js 请不要用问题漏洞来提问,这种情况下请开启讨论。

jloguercio

非常感谢

ClaudeCode

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

#40332021年12月28日作者 0xcrypto2 个回答
1 个反应

文档中有错误的链接和拼写错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 无 可复制演示链接 https://github.com/artf/grapesjs/blob/849a28757dc8dcd059c5ee6e6ac1bfd8b49a78b2/docs/modules/Blocks.md?plain=1#L138 描述一下那个虫子 只是一个小错别字,链接在localhost上。 行为准则 [X] 我同意遵守本项目的行为准则

artf

谢谢@0xcrypto会修好的 👍

ClaudeCode

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

#40012021年12月8日作者 javadsamiee2 个回答
0 个反应

当第一次输入的自动值时,无法保持当前单位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 96.0.4664.93 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?创建新块,例如Text块导航维度>宽度(默认为自动)换成大众然后移除自动,输入一个值,例如100按回车键后,单元将改为100像素,而非100vw 预期的行为是什么? 更换单元并输入非自动值后,它应该保持当前单元(VW),而不是把它改成 PX 目前的行为是什么? 进入默认(PX)后的单元 行为准则 [X] 我同意遵守本项目的行为准则

artf

从当前的试玩版来看,似乎已经修复了。

ClaudeCode

谢谢你举报,@javadsamiee。 关于第一次输入自动值时无法保持当前单位的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something c...

#38322021年9月29日作者 Sudhin354 个回答
0 个反应

每次重载后,CSS 类都会被移除,并且每个 HTML 标签的自动生成 ID(例如:ivj5m-2)都会被更改

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 不是在那里 描述一下那个虫子 如何重现这个bug? 在 React 应用中安装葡萄 js 进入编辑器,拖动一个组件。(示例:文本组件) 使用样式管理器为组件做样式 保存到数据库,在编辑器里查看代码 重新加载页面 请参见编辑器中的代码 预期的行为是什么?该 ID 的 html 标签 id 和 css 不应被更改或删除,即使重新加载编辑器 目前的行为是什么?如果我们在任何更改后重新加载编辑器,html 代码中的 id 会改变,而该 id 的 css 也会被删除 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: const edit...

Sudhin35

请指点我

artf

关闭“autoload: true”,你会把所有东西加载两次

Sudhin35

谢谢@artf。这解决了我的问题

浏览所有主题