GrapesJS 问题

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

找到 877 个问题

🔍 question
#56892024年2月20日作者 mitcht4 个回答
0 个反应

<> 在开头引入 editor.getHtml()

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 121.0.6167.185(官方构建)(64 位)可复制演示链接 https://jsfiddle.net/ja50kzne/4/描述一下那个虫子 如何复现这个漏洞?我之前有个 grapesJS 版本的网页,可以正确加载到 Grapes。 你可以从小提琴上看到这一点。 GrapesJS 最新版本“创建”了小提琴中看到的 JSON。 我没有操控它。注意grapesJS确实能加载,控制台里没有错误。 执行 editor.getHtml(用于数据库存储)时,我看到有一个空元素 '<>' 正在被引入注意console.log 预期的行为是什...

mitcht

我把json删减了不少,发现输出中可能有一些可能无效的JSON? 就像是“逃脱双引号”的引入有点不对劲。 JSON.stringify 和 JSON.parse 似乎不在意它,但肯定有问题。

artf

页面的根组件应该是一个“封装器”,在你的情况下是“textnode”(例如,这可能会破坏很多东西),其中有一个空的“tagName”(这就是“<>”的原因),并且不知为何是“content: ”undefined“(?) <img width=“377” alt=“截图 2024-02-22 00 44 33” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/0e76b02e-097b-463f-a921-...

mitcht

这是从Grapes 0.18.4中输出的,因此它是由Grapes生成的。 我预计如果内容是“未定义”的,葡萄要么会剥离它,要么忽略它。 目前我只是在自己这边剥离<>,但我想和你分享一下。

#56832024年2月15日作者 JonathanRiche2 个回答
0 个反应

Commands.runCommand 在内置命令中无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 克罗姆V121 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?进入 graepesjs.com/demo 页面,打开控制台,使用全局编辑器对象 运行editor.runCommand('sw-visibility')方法——内置网格线 而且即使面板上设置了命令,命令也运行不了,我在项目里设置过这个,最近从0.20.3升级到最新的v0.21.8,发现editor.runCommand('sw-visibility',{force:true})也无法使用,但还是没用 预期的行为是什么?...

JonathanRiche

首先需要运行visualEditor.stopCommand('sw-visibility'),不确定这是不是新用来切换的runCommand,之前需要运行停止

ClaudeCode

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

#56772024年2月12日作者 soundharya23252 个回答
0 个反应

[X] 我确认使用最新版本的GrapesJS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞?在<a>表单元格(td)内插入带有链接的标签。将浮点数向桌面单元格(td)赋予左或右。 预期的行为是什么? 在表格单元格中添加浮点右/左后,对齐应该只会改变 目前的行为是什么? 表格单元格被改成了表格行/表格正体 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: ![桌排](https://github.com/GrapesJS/grapesjs/assets/159787750/8f713b75-b3d8-4f40-a9f8-be...

artf

提供有效且可复现的演示

ClaudeCode

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

#56742024年2月9日作者 mauriciolcs22 个回答
0 个反应

当一个元素最小高度为100vh时,无限画布的高度会无限增加

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Arc 版本 1.29.0 (46113)可复制演示链接 https://grapesjs-react-custom-ui-vrkhwc.stackblitz.io描述一下那个虫子 如何复现这个漏洞?启用无限画布至少在画布上添加两个组成部分为其中一个设置最小高度为100vh。 预期的行为是什么? 画布的高度不应无限增加。 目前的行为是什么? 画布高度在无限增加。 在这个演示中设置最小高度最直接的方法就是使用检查器。通过GrapesJS进行配置时也会出现同样的错误。行为准则[X] 我同意遵守本项目的行为准则

artf

避免使用无限画布,因为它从未被记录,甚至没有作为长片完成。

ClaudeCode

谢谢你举报,@mauriciolcs2。 关于无限画布在存在最小高度为100vh的元素时,会无限增加其高度,这是个很好的问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => conso...

#56682024年2月6日作者 addlistener2 个回答
1 个反应

CompoentTextView 的源码图无法加载

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 121.0.6167.139(官方构建)(x86_64) 可复制演示链接 没有。 描述一下那个虫子 如何复现这个漏洞?添加自定义断点并设置断点点击步出直到进入组件文本视图的逻辑 预期的行为是什么? 源图加载 目前的行为是什么? ComponentTextView 的 sourcemap 未加载,但已加载于 RichTextEditorModule <img width=“557” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/4531670/7b110b3d-4a19-...

artf

我只能建议你仔细检查源地图路径 <img width=“346” alt=“截图 2024-02-12 08 45 32” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/ee135460-a758-4aef-96fa-1d1b463c934d”> 例如,如果你尝试通过 CDN 加载 Grapesjs,比如像 'https://unpkg.com/grapesjs'(这里发生重定向),因为这种情况下 URL...

ClaudeCode

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

#56572024年1月31日作者 leo-budgetsimple1 个回答
0 个反应

HTML 评论标签 禁用文本编辑

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 120可复制演示链接 https://jsfiddle.net/btmry08e/描述一下那个虫子 如何复现这个漏洞?用这个html创建一个grapesjs编辑器: “<div><!-- -->你好,世界</div>” 预期的行为是什么? 以便能够编辑文本 目前的行为是什么? 无法编辑文本行为准则[X] 我同意遵守本项目的行为准则

ClaudeCode

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

#56502024年1月29日作者 Wayne-Mather2 个回答
0 个反应

当组件未同步时插入文本,文本会从现有模型中被覆盖

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 121.0.2277.83,Firefox 122 可复制演示链接 https://jsfiddle.net/50mga1t7/1/ 描述一下那个虫子 如何复现这个漏洞?创建一个工具栏动作来插入某些文本编辑文本节点并插入部分文本点击工具栏命令插入新的组件/文本textnode 会在编辑前重置为模型详情 预期的行为是什么? textnode 应该显示当前正在编辑的文本和新插入的文本 目前的行为是什么? 新文本是使用模型中的文本插入的,而不是当前视图行为准则 [X] 我同意遵守本项目的行为准则

artf

这不是bug,将当前DOM与组件合并需要更多努力。 已经有一个类似的API(https://github.com/GrapesJS/grapesjs/blob/fb5175fd1edd13a2db54d661193fb61a354f8625/src/richtexteditor/model/RichTextEditor.ts#L414),你可以根据自己的需求使用或重新实现(用组件定义代替HTML字符串)。

ClaudeCode

谢谢你举报,@Wayne-Mather。 关于在组件未同步时插入文本时,文本会被覆盖,这个问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('s...

#56412024年1月24日作者 yashvi20262 个回答
0 个反应

Undomanager.remove() 不工作

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v91可复制演示链接 https://codepen.io/Harshsne/pen/WNgZzPE描述一下那个虫子 如何复现这个漏洞?将图像附加到画布上并关闭图像模态。(所以该组件会从追踪中移除,因为我已经从UndoManager堆栈中移除了它) ' editor.on('asset:close', () => { console.log(“接近”) const selected = editor.getSelected(); 如果 (selected & & selected.is('image'))) { 编辑。UndoManager...

artf

这里的问题不在于“Undomanager.remove”,而是追踪了什么。 当你调整图像大小时,你不是在编辑“组件”本身,而是在编辑它的“CssRule”对象,所以它没有按预期工作。 我建议你干脆跳过那些你不想跟踪的操作的撤销管理器 “''js 编辑。UndoManager.skip(() => { // .... }); ```

ClaudeCode

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

#56332024年1月20日作者 kla-ko3 个回答
0 个反应

无法在“component:remove”处理程序中选择组件

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/opmwfvjn/ 描述一下那个虫子 如何复现这个漏洞?打开并拉动小提琴画布上有两个组成部分。一个是“你好世界”的分区,另一个是蓝色背景的分区。“hello world” div 是通过命令 ''editor.select(editor.getComponents().models[0]) 选择的;``当选择蓝色框并在画布位置选择删除时,调用“component:remove”处理程序。然而,“hello world” div 并...

artf

谢谢@kla-ko,实际上有一个逻辑会阻止在“组件:移除”事件中选择其他组件,我会在下一个版本修正,但我建议你切换到另一个事件。 “component:remove”事件会针对每个被移除的组件触发,这意味着它会针对你决定移除的组件内嵌套的组件触发。你可以使用“run:core:component-delete”事件,该事件在删除命令完成后只触发一次,目前应该能正常工作,无需修复。

kla-ko

谢谢@artf。这招管用得非常顺利! /

ClaudeCode

谢谢你举报,@kla子。 关于无法在“component:remove”处理程序中选择组件的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somet...

#56322024年1月20日作者 Harshsne262 个回答
0 个反应

在撤销管理器中添加更改

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v91 可复制演示链接 https://codepen.io/dhanadsp1120/pen/ExrRvOB 描述一下那个虫子 如何重现这个bug?通过调用 um.stop() 禁用撤销管理器。对内容进行修改。使用 um.start() 重新启用撤销管理器。 预期的行为是什么? 当撤销管理器恢复时,暂停后所做的任何修改应视为一次更改。这确保点击“撤销”会将所有更改恢复到撤销管理器中断前的状态。 目前的行为是什么? 撤销管理器停止后所做的更改不会在恢复后被包含在内。选择撤销选项后,更改会持续存在,不会如预期回滚。 另外我也尝试过在撤销管...

artf

当撤销管理器恢复时,暂停后所做的任何修改应视为一次更改。这确保点击“撤销”会将所有更改恢复到撤销管理器中断前的状态。 抱歉,这不是UndoManager的启动/停止方式。禁用后,所有更改都会直接跳过UndoStack。 你说的是一个程序化的变更组合,确实很有趣,但目前还不支持,所以我不认为这是个bug。 我建议在[路线图](https://github.com/GrapesJS/grapesjs/discussions/5291)中提出这个建议,如果更多人需要,我们可以考虑...

ClaudeCode

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

浏览所有主题