GrapesJS 问题

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

找到 466 个问题

🔍 components
#34822021年5月25日作者 Palash-Mandal4 个回答
0 个反应

运行时更新的特性,不是编辑模式。

你好@artf 我遇到了关于某个特质的问题。当我拖放方块到画布时,它的特性在设置部分显示得很正常。但当我第二次保存并编辑,并在画布中选择了那个标签时,这个特征现在已经出现在设置的“Section”里了。 拜托拜托拜托帮帮我! '// 自定义标题组件 blockManager.add('header', { 标签:“标题”, 类别:“组件”, media: '<SVG XMLns=“http://www.w3.org/2000/svg” viewBox=“0 0 24”><path d=“M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-2-.2-.7-.3-1-.3h-.6v-.4h6.8v...

artf

你是在插件里定义自定义组件吗?

Palash-Mandal

你是在插件里定义自定义组件吗? 不。只需添加初始化函数 editor = grapesjs.init({ const dc = 编辑器。主导组件; 自定义标题组件 blockManager.add('header', { 标签:“标题”, 类别:“组件”, media: '<SVG XMLns=“http://www.w3.org/2000/svg” viewBox=“0 0 24”><path d=“M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-....

artf

定义新组件类型的第一个规则是将代码放入插件中。 摘自[docs](https://grapesjs.com/docs/modules/Components.html#define-custom-component-type)

#34702021年5月22日作者 iabhiyaan1 个回答
0 个反应

问题:当选中组件时,我们如何激活右上角面板的特性管理器

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ ] 是的[x] 不 预期的行为是什么? 详细描述那个漏洞...

ClaudeCode

谢谢你举报,@iabhiyaan。 问题:当选中组件时,我们如何激活右上角面板的特性管理器似乎是竞争条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于...

#34652021年5月19日作者 anatoli-dp3 个回答
0 个反应

更新会破坏一些CSS功能

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 最近一次是直接从 GitHub 克隆的 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ ] 是的[x ]...

artf

其实正确的 API 应该是 '.components('html string')',看起来工作正常,但我会去研究重置,因为我预计工作方式也是一样的

artf

看起来 Backbone 的重置方法注入了“静默”选项,阻止 CSS 集合渲染新增样式,所以目前我更倾向于避免设置错误条件来移除这个选项,建议坚持使用正确的 API

ClaudeCode

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

#34632021年5月18日作者 anatoli-dp4 个回答
1 个反应

检查员溢出故障

警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本: 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗?[ x] 是的[ ] 不 预期的行为是什么? 当将任何东西堆叠...

anatoli-dp

也许可以把控件放在文本前面,然后对每个缩进或叠加的项目稍微偏移整个框。这样你可以随意堆叠,我🤷最终会自己做解决方案来实现,但因为我不懂你的代码结构,帮不上太多忙。但如果默认是这样就更好了

artf

是的,不幸的是,默认图层面板的可扩展性不高,我们需要重新考虑渲染方式

artf

是的,把控件移到文本前面听起来很合理(比如只在我把鼠标悬停在组件时才显示)。 总之,虽然结构不那么混乱,我不会把这个问题放在优先级上,但如果能解决这种限制肯定很酷。 如果有人需要帮助,这里可以查看图层管理器的视图:https://github.com/artf/grapesjs/blob/dev/src/navigator/view/ItemView.js

#34622021年5月18日作者 ahmedderkaoui3 个回答
0 个反应

刷新/重新渲染画布中所有组件的特性

有没有办法重新渲染或刷新画布中所有组件的特性(这些特征是自定义的,不是内置的)?

iabhiyaan

“''js editor.on('component:selected', component => { component.set({ 特质:['名字','占位符'] }) }) ````

artf

嗯,这有什么意义?你的自定义特征应该已经能对组件变化做出反应(前提是你正确创建了它们)。

ClaudeCode

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

#34612021年5月17日作者 ahmedderkaoui1 个回答
0 个反应

在选定组件上重新渲染特征

我知道有一个函数可以重新渲染一个特征的视图。 不过,我仍然不知道该怎么用,也不知道该在哪里使用。

ClaudeCode

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

#34592021年5月16日作者 anlumo2 个回答
1 个反应

DomComponents 的配置错误

版本: 0.17.3 预期的行为是什么? 文档说我可以通过以下配置配置来配置包装器元素: https://github.com/artf/grapesjs/blob/0027dcd1194715eeaf4b24db878dd7ebac069cc4/src/dom_components/config/config.js#L6-L24 详细描述那个漏洞** 我觉得这种配置在其他地方都没被用过。在项目中搜索“wrapperName”,只显示我上面链接的地方。遗憾的是,由于大量误报,搜索“包装器”不可行。 我能在初始化后用 'editor.getWrapper()' 返回的对象配置包装器元素。

artf

是的,实际上名称默认是通过 [i18N](https://github.com/artf/grapesjs/blob/d00ccb945c610bf748b2ed36e4b2fddc1c40b5ba/src/i18n/locale/en.js#L23) 配置管理的。 从0.17.*版本开始,甚至“包装器”选项也不再必要,因为你应该像扩展其他组件一样扩展“包裹器”组件(在之前版本中,“包装器”是在插件出现之前初始化的)。 我会在下一次发布👍时移除它们

ClaudeCode

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

#34552021年5月12日作者 harsh2013 个回答
2 个反应

使用页面管理器在多页面插入组件时,样式会被清除

版本: 0.17.3 预期的行为是什么? 风格应在多页中保持一致 详细描述那个漏洞 我们有个用例是保存并重新加载 GrapesJS 的内容。我们希望利用页面管理器来减少渲染内容,并以更小的部分进行管理。 当我们尝试在多个页面加载内容时,问题就会出现。CSS 会被完全清除,因为之前插入的页面会被清除。 繁衍步骤插入第1页的组件和样式切换到第2页,插入组件和样式。切回第1页 当前行为 风格被抹去。 CodePen 的重要摘录 “JavaScript” const pageManager = 编辑器。页数; editor.setComponents('<p id=“abcd”>测试页面1</P>'); editor.setStyle(“...

artf

你好,所有页面都可以使用样式@harsh201,所以你不应该使用'editor.setStyle'(它会用新样式替换所有样式),而是用类似'editor.getStyle().add('...')''

harsh201

你好,@artf,有什么建议吗?

ClaudeCode

谢谢你举报,@harsh201。 样式在使用页面管理器在多页面插入组件时会被清除,看起来是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快...

#34542021年5月12日作者 TheDude703 个回答
0 个反应

RTE 插入链接不会更新 DOM

版本: "0.17.3" 你能重现演示中的bug吗?[X] 是的[ ] 不 预期的行为是什么? 使用默认RTE插入链接后,链接立即可在设置中进一步编辑,即设置HREF和目标 详细描述那个漏洞 在选择默认RTE的文本并将其转换为链接后,文本会被正确地包裹在<a>标签中,但直到取消选择并选择其他文本后,它才会作为链接组件出现,有时还需要重复两次才能被识别为GrapesJS组件。 你能附上截图、截屏或实时演示吗?**[ ] 是的(附上)[X] 不 这是我的编辑初始化: 有没有办法在插入链接后强制更新被编辑的组件?

artf

是的,目前就是这样运作的(内容只有在编辑完成后才会被解析和转换成组件)。我们大概可以用像[这样](https://github.com/artf/grapesjs/issues/610#issuecomment-768553776)的方法作为链接的默认行为。

artf

更新了本次发布的链接创建 https://github.com/artf/grapesjs/releases/tag/v0.18.3

ClaudeCode

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

#34492021年5月11日作者 chiragkataria223 个回答
0 个反应

切换页面会反复调用画布样式和脚本

嗨 我正在将页面管理器集成到我的项目中。但我遇到的问题是,每当我在页面之间切换时,它会反复加载 canvas 对象中初始化时给出的 CSS 和脚本文件。 这让页面切换变得缓慢。 实施: Grapesjs.init({ pageManager: { 页码:[ { id:“第1页”, styles: '', // 或样式的 JSON 组件:“'',// 或组件的 JSON 名称:“第1页”, }, ], }, 画布:{ 风格:[ '../assets/bootstrap/bootstrap.min.css', '../assets/platforma/platforma.min.css', '../资产/editor.css', ],...

chiragkataria22

@artf 你能帮帮我吗?

artf

不幸的是,切换页面会创建一个新的iframe,所以行为是正确的。 我更倾向于移除之前的iframe,以尽量降低内存占用。一个解决办法可能是想办法重用之前的iframe,但这可能会在外部JS中引发上下文问题......所以我不确定如何正确预防这种行为。 总之,说实话,我不指望第一次加载后切换会这么慢,因为浏览器应该会缓存外部文件......你能制作一个你的经历的屏幕录制吗?

ClaudeCode

感谢你报告,@chiragkataria22。 感谢你分享关于不断切换页面、调用画布样式和脚本的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识别和优...

浏览所有主题