GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#49122023年2月6日作者 lexoyo3 个回答
1 个反应

文档中的链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 不 描述一下那个虫子 自从从 artf 迁移到 GrapesJS 后,我相信许多链接仍然指向原始仓库 https://github.com/GrapesJS/grapesjs/search?q=artf 我应该尝试替换它,还是我们只能信任GitHub的重定向? 行为准则 [X] 我同意遵守本项目的行为准则

lexoyo

我做了个人最佳,希望没漏掉什么,几乎每个链接都测试过

artf

我觉得有些内容会重定向,但有些可能坏了,如果有人愿意帮忙🙏,我会很感激

ClaudeCode

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

#49062023年2月6日作者 panditlakshya2 个回答
0 个反应

Grapesjs 在通过脚本设置 innerHTML 时无法识别组件类型。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v108.0.5359.98 可复制演示链接 https://codesandbox.io/s/grapes-js-template-literal-forked-6kgvrb?file=/src/App.js 描述一下那个虫子 我正在尝试创建一个自定义组件,通过脚本注入HTML代码后,能够识别内部HTML组件类型。 如何复现这个漏洞?直接通过脚本注入 HTML 预期的行为是什么? Canvas 应该能在注入代码后识别文本、图片等组件类型。 目前的行为是什么? 注入部分被识别为整个文本组件。(注入代码可以包含带有图像或文本的div元素)...

artf

请仔细阅读[本指南](https://grapesjs.com/docs/modules/Components-js.html),“脚本”中的所有内容都不在编辑器的权限范围内。你可以用 [component.components](https://grapesjs.com/docs/api/component.html#components) 方法更新组件本身,或者直接在定义中指定 'components: '<div ....'。

ClaudeCode

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

#49002023年2月5日作者 handhikadj2 个回答
0 个反应

SetStyle/getCss() 生成重复的 CSS

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 最新动态可复制演示链接 https://codesandbox.io/s/silent-river-ifczcv描述一下那个虫子 如何复现这个漏洞?访问网站参见控制台。注意“”和“body”选择器 预期结果 不应重复 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js editor = grapesjs.init({ storageManager:false // ... }) editor.on(“update”, () => { 保存到后端 console.log(“editor getCSs”, editor.getCs...

artf

有一些默认样式应用,你可以简单地禁用(传递空字符串)https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147

ClaudeCode

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

#48972023年2月3日作者 rudacs4 个回答
1 个反应

Component:styleUpdate / component:styleUpdate:propertyName 未被触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 109.0.1518.70 可复制演示链接 https://jsfiddle.net/rudacs/kr2x1mnh/ 描述一下那个虫子 如何复现这个漏洞?在 StyleManager 中更改某些属性。更改 StyleManager 中的宽度属性。 预期的行为是什么? 事件 component:styleUpdate 被触发。 目前的行为是什么? 不会触发任何事件 component:styleUpdate。 行为准则 [X] 我同意遵守本项目的行为准则

artf

嘿,@rudacs你试过用'style:property:update'吗?

rudacs

这个活动奏效了。它被改成了这个吗? 而且只针对一处房产? 我该如何获得组件和属性被更改的? 特朗克。

SagarMaria

我来这里是因为我也有同样的问题。 使用建议的“style:property:update”似乎有效,但不知为何每次点击都会触发。 另外,我们如何针对某个特定的样式属性变更,比如“文本对齐”?

#48682023年1月26日作者 LukasSouza2 个回答
1 个反应

悬停的框在更改编辑器位置后显示错位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 109.0.5414.87 可复制演示链接 https://jsfiddle.net/o45ncveu/6/ 描述一下那个虫子 如何复现这个漏洞?打开小提琴链接在超时前悬停部分组件等待时间结束以添加边距并更改编辑位置再次悬停组件 预期的行为是什么? 悬浮方块应与组件边距对齐 目前的行为是什么? 更改编辑器位置后,悬停方块显示与组件错位行为准则 [X] 我同意遵守本项目的行为准则

artf

不幸的是,这是预期中的,你必须在“外部”布局更改后使用 'editor.refresh()'。

ClaudeCode

谢谢你举报,@LukasSouza。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在: 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本,可能已经解决了这个问题 如有稳定版,升级前先测试最新稳定版 如果漏洞非常严重,可以使用“npm audit fix --force”,但请务必彻底测试 理解风险: 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触...

#48592023年1月20日作者 zoilorys2 个回答
0 个反应

编辑 CSS 属性将样式设置为一个通用类,而不是元素

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v108可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞?设置 grapesjs 编辑器导入模板 https://pastebin.com/d9S2M0iS在模板的最底部,你会看到包裹的Facebook按钮选择它所在的表格单元格,尝试改变其宽度 预期的行为是什么? 当元素的样式属性被编辑时,样式应仅更新所选元素。 目前的行为是什么? 出于某种原因改变单元格宽度会编辑该模板中的通用类,该类也会应用到其他元素上,导致意外行为(见视频)。我无法在演示设置中复现这些,也无法向公众提供我们...

artf

你只需要启用这个选项: https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

ClaudeCode

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

#48552023年1月19日作者 ronaldohoch4 个回答
1 个反应

应用 loadProjectData 后,轮廓会消失

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?打开演示页面打开开发者工具运行: 'let projectData = editor.getProjectData()'跑:'编辑。DomComponents.clear()'运行:editor.loadProjectData(projectData); 预期的行为是什么? 组件轮廓应被展示。 目前的行为是什么? 应用项目后,组件的轮廓没有显示。行为准则 [X] 我同意遵守本项目的行为准则

allenhwkim

@ronaldohoch用Edge浏览器,它用的是你提供的命令。 'let projectData = editor.getProjectData();' “编辑。DomComponents.clear();' 'editor.loadProjectData(projectData);' 我觉得GrapesJS不支持Brave浏览器,而Brave浏览器在 https://github.com/browserslist/caniuse-lite 里没有列出。 <img wid...

ronaldohoch

我还运行了命令 'editor.runCommand(“core:component-outline”)',但又没显示,我需要点击按钮两次才能显示

ronaldohoch

你好,@allenhwkim,谢谢你的评论。但尴尬的是我没在其他浏览器里测试。 我相信我的客户不使用Brave,所以我打算放弃这部分。 不过,通过所有这些测试,我成功地让它按我想要的方式工作,应用了以下代码: “''js editor.loadProjectData(JSON.parse(sessionStorage.getItem(commandOpts.value))); if(editor.Commands.isActive(“sw-visibility”){ 编辑。...

#48512023年1月17日作者 chaegumi3 个回答
0 个反应

This.on('change:attributes:type', this.handleTypeChange)不支持数组类型

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 108.0.5359.125可复制演示链接 https://codesandbox.io/s/frosty-darkness-7po7xl描述一下那个虫子 如何复现这个漏洞?使用 myBlock点击测试按钮 预期的行为是什么? this.on(“change:list1”, this.handleList1Change); 每次都要工作 目前的行为是什么? this.on(“change:list1”, this.handleList1Change); 只跑一次 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 从“grap...

artf

监听者看不到深度变化,所以这种情况下你得重新创建一个数组 “''js component.set(this.traitName, [...this.items]); ```

chaegumi

谢谢@artf。 我用 JSON.stringify 和 JSON.parse 来处理数据。

ClaudeCode

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

#48482023年1月16日作者 NicoGGG2 个回答
1 个反应

内联编辑后,组件内容被设置为空字符串

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox v91.4.1 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?访问 grapesjs 基础演示:https://grapesjs.com/demo.html清理画布添加组件链接在浏览器控制台中执行 'editor.getComponents().models[0].attributes.content'。输出是“Link”,即链路组件的内容通过内联编辑来更改链接文本再次在浏览器控制台执行“editor.getComponents().models[0].attribu...

artf

这是与富文本编辑器相关的一些逻辑所预期的。 你可以用 'component.getInnerHTML()' 获取内部 HTML,或者用 'component.components()' 获取内部组件。

ClaudeCode

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

#48372023年1月10日作者 quentin-bettoum4 个回答
4 个反应

HTML元素的ID会在projectData加载的不同页面上递增

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好, 我注意到当我在 projectData 中加载多个 HTML 中使用相同“id”的页面时,葡萄会自动在每个页面上增加“id”,尽管这些是不同的页面。 为了演示这个问题,下面有一段代码,我用包含两个页面的“projectData”初始化 grapesjs,这两个页面在某些 HTML 标签上使用相同的 ID。 在最终的HTML列表中,你可以看到像“body”和“main-title”这样的id在第二页被递增为“body-2”和“...

artf

嘿,@bgrand-ch,我认为有一天所有Grapesjs实体都会有一个全局“UID”,所以从长远来看,我预计这个问题会被修复 🤞

quentin-bettoum

起初,我想把所有页面一起生成,这样所有页面都能输出一个统一的CSS输出。但现在我尝试另一种风格方案。 所以对于“id”问题,分别生成每个页面可能是解决方案。谢谢你的建议。

bgrand-ch

Grapes 使用一些数据属性(类似“data-grapes-id”)作为唯一标识符,以便让 id 留给某些前端脚本使用。 我喜欢这个想法 💯

浏览所有主题