GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#36402021年7月23日作者 jlpatrick2 个回答

0 个反应

样式管理器的背景UI在Body/Wrapper上无法正常工作

在我看来，样式管理器的背景控件在处理主体与其他组件时存在一个UI错误。这个问题在#2834的截图中@kuhelbeher可以看到，但我也会提供一些简单的复现步骤。也许这个问题和那个问题有关。前往 https://grapesjs.com/demo.html删除所有现有组件，直到只剩下Body/包装器选择“身体”并设置背景图像（注意这里背景UI的身体图像设置长什么样）打开方块，拖动导航栏到页面顶部在导航栏上设置背景图像，编辑器中应该能渲染此时再次选择主体/封装器，然后查看背景UI（看起来它知道已经设置了非默认设置，因为标签颜色变了，重置图标可见，但第1层没有显示）在编辑器中选择导航栏，并比较它在背景UI中显示的内容（第1层正确显示）...

artf

谢谢你，Jim，是的，问题确实一样，所以我把这个作为#2834的重复关闭修复后我会在那里更新。

GJSBlock

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

查看详情

#36392021年7月23日作者 anatoli-dp4 个回答

0 个反应

undo-manager 组件增强提问 typescript

Improve UndoManager API

我认为一个更详细的历史堆栈会带来很棒的功能。你可以拿到撤销堆栈，然后从中建立一个记录所有编辑的历史报告，但对我来说每次编辑具体是什么不太清楚（至少对我来说是这样，如果我遗漏了什么，请告诉我）。比如用公式化描述，比如组件[组件名称]在[页面位置或组件添加]处添加/删除/编辑，或者组件[组件]文本编辑......（请原谅我用这个笼统描述，因为连我自己都不知道该怎么表达）只是简单介绍一下每个堆栈中项目的撤销/重做历史。我目前只知道每个历史物品的ID，如果现在可行的话，我只是不知道该如何提取这些信息来创建一个历史侧边栏，除了ID，请给我一些线索，告诉我该注意什么最新版本有替代方案吗？[ ] 是的（描述替代方案）[ x] 不这是否与某个...

artf

嗨@anatoli-dp，如果能查看撤销历史会非常酷，我已经在考虑如何扩展UndoManager模块，通过插件实现这种功能（比如你可以用你喜欢的框架渲染UI）。 UndoManager 栈会在任何被监听的模型/集合（组件、CSS 规则等）发生变化时更新，新增一个包含动作信息的 UndoAction 对象。值得注意的是，一次更改可以生成多个撤销动作： “''js 这会为新组件生成一个撤销操作以及另一个用于新CSS规则的任务 editor.addComponents（' <d...

anatoli-dp

是的，我知道如何访问这个栈，只是不知道怎么设计它，才能给最终用户更有意义的描述

artf

我只是不知道怎么给最终用户一个更有意义的描述每个UndoAction（堆栈的每个实例）都会告诉你动作的“类型”（例如“添加”、“删除”、“重置”、“更改”）以及关于更新模型的详细信息（例如，Component、CssRule 等）。你可以尝试读取这些数据，但我更想的是如何让每个操作都易于识别。

查看详情

#36382021年7月23日作者 momu-20162 个回答

0 个反应

组件文档 typescript

Script-props is invalid

你好！@artf，感谢你的精彩工作！我选择值时会跟着 https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts,but 操作，脚本没有执行，期待大家的建议，非常感谢！ “''javascript export default function（editor， opt = {}） { cont c = opt; const domc = 编辑。主导组件; const defaultType = domc.getType（“default”）; const defaultView = defaultType.view; con...

artf

这里似乎一切正常：https://jsfiddle.net/rp7wa58h/ 无论如何，如果你不用“视图”，其实也不需要它，“isComponent”（在你的示例中拼写错误且位置错误）也是一样，“data-gjs-type”默认已被编辑器自动使用。

GJSBlock

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

查看详情

#36372021年7月23日作者 mingxin-yang2 个回答

0 个反应

提问 typescript 常规

Custom block icon

我想自定义封锁图标，我找到了代码：如何找到我想要的“内容”？ ![]（https://raw.githubusercontent.com/mingxin-yang/images/master/Snipaste2021-07-2316-46-52.png）

artf

嗨，@mingxin-yang，你可以阅读[这里]（https://grapesjs.com/docs/modules/Blocks.html）如何创建和更新方块。如果你需要更新方块的图标或标签，可以这样做： “''js 编辑。Blocks.get（'BLOCK-ID'）.set（{ 标签：“我的街区”，媒体：“<SVG...”，// 例如：你的SVG图片 }) ```

GJSBlock

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

查看详情

#36342021年7月22日作者 pankajsharma894 个回答

1 个反应

提问组件 typescript

How we can hide RTE for editable components ?

HI We have a requirement, where we don't want to show rte on editable components. how we can achieve that ?

mcottret

我允许自己补充一些我认为更接近楼主想达到的目标，基于@artf的回答： “打字稿” 编辑。DomComponents.addType（'text'， { extendFnView： ['onActive']，型号：{ 默认值：{ disableRte：错误 } }, 浏览量：{ onActive（） { if （this.model.get（'disableRte'）） { this.rte.getToolbarEl（）.style.display = 'none'; }...

iabhiyaan

“''js editor.on（'component：selected'， cmp => { CMP.set（{ 可编辑：错误，传播：[“可编辑”] }) }) ```

pankajsharma89

我们不想让组件不可编辑，组件必须是可编辑的，只是不想在组件上显示左侧工具栏。

查看详情

#36312021年7月21日作者 anuragk154 个回答

1 个反应

提问组件文档 style-manager typescript

How to load dynamic content in the final HTML file?

我到处找过，包括问题部分，也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容（不仅仅是导出或通过编辑器保存时）。我想在 grapejs 组件中加入一个脚本，它总是从网页抓取内容并更新组件。比如，当我写博客并存储在数据库里时。现在每当有人访问我的着陆页（用 Grapesjs做的）时，我希望他们能看到我最新的博客。我不想通过编辑器手动重建 grapejs 页面。另外，如果有终端用户访问网站，我只需要发送 Grapejs html和css，对吧？没有组件？抱歉如果这是个新手问题或者有人之前已经回答过。

stf1981

我觉得你应该搜索组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。

anuragk15

我记得你会搜索与组件相关的JavaScript -> https://grapesjs.com/docs/modules/Components-js.html#component-related。这段 js 代码嵌入在 html 输出中。所以每次组件加载时，它都会通过 JS 脚本动态加载数据？另外，对于终端用户来说，我只需要返回 Grapesjs 生成的 html+cas 文件，对吧？

stf1981

所以每次组件加载时，它都会通过 JS 脚本动态加载数据？是的另外，对于终端用户，我只需要返回由 Grapesjs 生成的 html+cas 文件，对吧？是的，组件里的 JS 脚本在 HTML 里，参见 'editor.getHtml（）'

查看详情

#36302021年7月18日作者 sanchit361 个回答

0 个反应

提问常规

想限制图片类型只能在列中丢弃。

嘿，@artf希望你一切顺利，也感谢你这么棒的项目。所以，我尝试让这种图像类型只被放入特定的块类型中。

GJSBlock

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

查看详情

#36292021年7月18日作者 Spjoetvoll1 个回答

0 个反应

提问缺陷 typescript

BUG AND FIX: Layer manager overflow/scaling

版本： 0.17.19 你能重现演示中的bug吗？[x] 是的[ ] 不预期的行为是什么？你应该能在图层管理器中看到每个子节点详细描述这个bug 当前的行为是什么？你能附上截图、截屏或实时演示吗？* 目前当你深入图层管理器时，缩放会完全乱套，像这样： https://i.imgur.com/gE20I9G.png 我看到在第3463期提到过这个问题，当时决定把它当作极低优先级的修复。不过，我相信我有一个非常简单的解决办法。我们只需添加一个 display：grid;到.gjs图层时，它能完美扩展。通过这个修复，最终会呈现我认为应有的样子： https://i.imgur.com/I7zfz4m.png 我用修复方法做了个...

GJSBlock

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

查看详情

#36272021年7月17日作者 sanchit364 个回答

4 个反应

style-manager 提问组件 typescript

：我正在尝试复制页面，但由于 ID，样式无法应用，结尾的 -2，-3 发生了变化。

“JavaScript const duplicatePage = （编辑者） => { let components = editor.getHtml（）; 令 css = editor.getCss（）; 让newPage = 编辑器。Pages.add（{ 样式：CSS，组件：组件， }); 编辑。Pages.select（newPage）; }; ``` 这就是我的功能。我正在尝试复制页面，HTML部分没问题，但由于CSS是通过ids应用的，当新页面渲染时，id的结尾会变为-2。有没有什么方法可以防止这种情况，或者有其他方法可以做到这一点？

OrigoVl

@sanchit36 你好，你在解决问题吗？你能说出来吗？

vlont

用这个 “''js const page = 编辑？。Pages.getSelected（）; 编辑？Pages.add（{ id：（page.get（'name'） || page.id） + '-copy'， component： page.getMainComponent（）.clone（） }， { select： true }）;'''

leonardolima99

@vlont 谢谢！

查看详情

#36262021年7月16日作者 san-1234 个回答

0 个反应

提问文档 typescript

How to set src of video tag at dynamic?

你好@artf，你好，我有 blockmanager 里的拖放视频标签和按钮，点击按钮后，我需要把 URL 改成 src。但不行，请指点我。编辑。BlockManager.add（“html/video”， { 标签：<div> <img src=“../../../Images/SiteBuilder/video.svg”/> <div class=“my-label-block”>视频</div> '，</div> 分类：“界面控制”，标签：“UI Controls”， id：“UI Controls”，内容： '<video id=“video1” src=“../../../Images/Jotun/Media21...

stf1981

我觉得我有类似的定制组件。也许这会有帮助

artf

如果你只需要更新方块内容（例如，变更会应用到新的拖拽方块上），你可以这样做： “''js const 块 = 编辑器。BlockManager.get（'html/video'）; block.set（'content'， '<video ...>'） ``` 如果你需要在画布中更改组件，我建议你更详细地阅读 [组件]（https://grapesjs.com/docs/modules/Components.html）

san-123

感谢@artf和stf1981的回复，实际上我会拖放多个生成随机数到ID属性的视频。在这种情况下，如何更新针对特定版本的选定视频？我未能更新src。

查看详情

GrapesJS 问题

浏览所有主题