GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#35092021年6月1日作者 theSC0RP2 个回答

1 个反应

提问组件 style-manager

How to programmatically change componentFirst?

@artf，我一直在尝试在样式中使用 id 和类之间切换，所以我需要用程序方式更改 componentFirst 属性。但当我尝试更改配置时，行为没有变化。即使在演示中也无法正常工作。繁殖步骤：添加两个文本块给它们起同样的职业名称。在浏览器控制台中，使用 'editor.getConfig（）.selectorManager.componentFirst = false'给文字添加一些颜色。它只会被添加到选中的区块中附言：我还尝试在更改配置后使用editor.refresh（），但没有任何变化。

artf

你必须在更改那个选项 'editor.trigger（'component：toggled'）' 后重新触发选择

GJSBlock

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

查看详情

#35082021年6月1日作者 tranthanhhoa2 个回答

0 个反应

组件提问 typescript

Layer visibility does not work properly

版本： 0.17.4 如何繁殖切换到平板或移动模式通过切换图层的可见性图标来隐藏所选组件切换到桌面模式。结果在隐藏组件显示时，可见性图标仍然被禁用。预料中切换到桌面后，可视图标被启用。

artf

感谢你的反馈@tranthanhhoa我会在下一个版本里修复，但我觉得我会把可见性的变化当作全局条件，这样隐藏组件不会在所有设备上都可见。

GJSBlock

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

查看详情

#35072021年6月1日作者 cedriclajato2 个回答

0 个反应

组件 typescript 常规

No Generated ID and No auto select ID

大家好，我用的是 grapesjs-blocks-bootstrap4，检查它们的组件，看起来都正常。但当你选择块类容器时，它会针对类而不是唯一ID。 ![bootstrap-4-element]（https://user-images.githubusercontent.com/57404000/120257180-4a3eb680-c2c2-11eb-872a-e7da78e74ff4.PNG）我用这个model.set（'attributes'， { id： randomID（） }设置了随机ID）;但当你选择该块时，它仍然指向的是类而不是 ID

artf

https://github.com/artf/grapesjs/issues/2936#issuecomment-680322089

GJSBlock

谢谢你举报，@cedriclajato。感谢你分享关于无生成ID和无自动选择ID的报告。为了帮助团队调查并优先排序：请提供：一个最小可复现的例子（CodeSandbox/JSFiddle）你的GrapesJS版本号浏览器和操作系统信息浏览器控制台的任何错误信息重现问题的步骤最有帮助的是什么：简约代码示例（不是你整个项目）屏幕录制或截图显示问题明确区分预期行为与实际行为你正在使用的GrapesJS配置有了这些细节，维护者可以更快地识别和优先排序修复。...

查看详情

#35002021年5月28日作者 vijayshukla302 个回答

0 个反应

组件 typescript 常规

Remove custom trait by its type.

我创建了一个自定义特质，但该特质的名称将是动态的，目前尚不清楚。问题是当前的 removeTrait（）只对 name/id 有效。但如果我想用自定义特性移除组件中的所有特征怎么办？举个例子：我创建一个“my-custom-trait”特性并绑定到组件上。 component.addTrait（{ 名称：“some_random”，选项：[]，类型：“我的定制特质” }); 现在我想把它删掉，但我不知道名字。

artf

你可以使用该身份证 “''js component.addTrait（{ ID：“我的定制特质”，名称：“some_random”， // ... }); // ... component.removeTrait（'my-custom-trait'） ```

GJSBlock

谢谢你举报，@vijayshukla30。感谢你分享关于按类型移除自定义特质的报告。为了帮助团队调查并优先排序：请提供：一个最小可复现的例子（CodeSandbox/JSFiddle）你的GrapesJS版本号浏览器和操作系统信息浏览器控制台的任何错误信息重现问题的步骤最有帮助的是什么：简约代码示例（不是你整个项目）屏幕录制或截图显示问题明确区分预期行为与实际行为你正在使用的GrapesJS配置有了这些细节，维护者可以更快地识别和优先排序修复。Gr...

查看详情

#34962021年5月28日作者 anlumo4 个回答

1 个反应

增强组件提问 keyboard typescript

Mark Component as Dirty

你想给GrapesJS添加什么？组件应该能够标记自己为脏，触发“onbeforeunload”警告信息。详细描述你的功能需求详细我有一个（自定义）文本组件，用户可以输入任意文本。我把数据存储在服务器上，我想要自动保存。不过，我不希望服务器因为每一个字符都被联系到文本组件，因为那会是用户数量的巨大洪水。我也不想更改“stepsBeforeSave”，因为像拖动组件这样的大改动应该立即保存。目前，组件在用户离开文本组件时存储数据（设置模型上的“内容”键）。这方法有效，但当用户在文本组件仍处于焦点状态时重新加载页面，最新的更改不会应用到数据模型上。这样可以，但我想弹出保存警告对话框（“onbeforeunload”消息）。然...

anlumo

我通过完全关闭“on-andload”处理，自己滚动来解决这个问题。

artf

编辑器有“编辑”属性，只要启用或禁用RTE就会改变，所以我猜在你的情况下，这个功能应该可行 “''js editor.on（'' change：editing'，（em， editing） => { window.onbeforeunload = 编辑 ||editor.getDirtyCount（）？e => 1 ：零; }); ```

anlumo

这个在 onbeforeunload 处理程序之后不会被我上面提到的那个片段覆盖吗？

查看详情

#34922021年5月27日作者 iabhiyaan2 个回答

0 个反应

组件提问常规

功能：insertAdjacentHTML（'afterend'， '<section></section>'）Grapesjs 里有类似的 API 吗？

Is there any way to add new section after the selected component using grapesjs ?

artf

你可以这样做： “''js const cmp = editor.getSelected（）; cmp.parent（）.append（'<section>...</section>'， { at： cmp.index（） + 1 }）; ```

GJSBlock

谢谢你举报，@iabhiyaan。关于FEAT： insertAdjacentHTML（'afterend'， '<section></section>'）的好问题。Grapesjs 里有类似的 API 吗？推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留...

查看详情

#34912021年5月27日作者 TheDude702 个回答

0 个反应

画布组件提问缺陷文档

IFrame 加载后不保存 SRC / 不识别 iframes

版本： 0.17.4 你能重现演示中的bug吗？[ ] 是的[X] 不预期的行为是什么？插入一个iFrame后，使用'editor.getHTML（）'时会返回src加载页面时，iframe将被识别为iframe组件，并再次可编辑详细描述那个漏洞我正在添加一个选项，允许用户基于“地图”组件插入 iframe。然而，设置“src”后，editor.getHTML（）只返回带有id和类的iframe标签。任何现有的 iframe 都不会被识别为 iframe 组件，加载回 Canvas 后也无法选择或编辑。用下面的代码，我可以像地图组件那样在画布上添加iframe，并编辑src特性，这样iframe就能正确更新，显示src定...

artf

我会在下一个版本中加入iframe支持。

GJSBlock

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

查看详情

#34862021年5月26日作者 kuhelbeher2 个回答

0 个反应

增强 style-manager 提问文档组件

专长：能够将所有边距、填充等属性合并更改

你好，目前 grapesjs 内置了属性，比如边际、填充，允许用户逐一更改每个属性（margin-top、margin-bottom等）。如果能同时更改所有这些属性会很不错。比如说，有个锁定按钮，启用后会同时更改所有属性，而不是一个一个。它可能看起来像这样： ![图片]（https://user-images.githubusercontent.com/37115006/119662534-2bf83700-be3a-11eb-83ff-09b7b63446d5.png） @artf有没有简单的方法可以用现有的 Grapesjs 工具实现，比如 StyleManager.addType 方法或类似的？

artf

是的，那会很酷，但遗憾的是，GrapesJS 还没有合适的 UI 模块，可以让用户通过重复使用其他组件轻松构建新的 UI 组件，所以 ['StyleManager.addType']（https://grapesjs.com/docs/api/style_manager.html#addtype）是唯一的办法，但在这种情况下，所有元素的构建权就得你自己决定。

GJSBlock

谢谢你举报，@kuhelbeher。关于FEAT：能够将所有边距、填充等属性合并的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：...

查看详情

#34852021年5月26日作者 ahmedderkaoui1 个回答

0 个反应

组件提问画布 style-manager typescript

以HTML形式注入到画布的元素不会作为组件表现

考虑一个简单的块：拖到画布时，可以选择该组件，并可修改其设置。现在，我正在这样做，在卡片上添加相同的输入： '$（someElement）.find（“.card”）.html（'<输入类型=“text”/>'）;' 输入输入成功添加，但表现不如之前。它无法被选中、拖拽或删除，因此无法修改设置和样式。有没有办法在特定元素中注入方块？

GJSBlock

谢谢你举报，@ahmedderkaoui。关于元素以HTML形式注入到画布时，不作为组件表现的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.lo...

查看详情

#34832021年5月25日作者 Palash-Mandal2 个回答

0 个反应

style-manager 组件提问 typescript

非常非常感谢之前的帮助。我还在开发领域比较新手。请帮我下面说

你好，@artf，非常非常感谢之前的帮助。我还在开发领域比较新手。请帮我下面说我需要一个模式，可以获取用户输入，比如块名、分类、HTML、CSS、JS，然后点击保存，把这些存储为新的块管理器。比如如何传递这些数据并存储为 dragabe 组件我设置了调用模态和设置标题也包含内容的按钮，但编辑器未启动图片 ![图片]（https://user-images.githubusercontent.com/17553816/119516278-424bb780-bd94-11eb-86db-812c6c405b1f.png） function buildCodeEditor（type） { var codeEditor = 编辑器...

artf

请遵循议题模板

GJSBlock

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

查看详情

GrapesJS 问题

浏览所有主题