GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#36422021年7月25日作者 Ubanna1 个回答
0 个反应

多页面管理器重置设备管理器

你好,我遇到了页面管理器的小问题。我希望所有页面的分辨率都是固定的。 高度和宽度图形来自 API,我可以在单页模板上成功显示所需的分辨率。 但在多页模板中,一旦切换到不同页面,设备管理器会重置为全屏(默认)。 我该如何实现目标,才能在所有页面中正确显示所需的分辨率? 请看下面我用 React js 写的代码:

ClaudeCode

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

#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的重复关闭 修复后我会在那里更新。

ClaudeCode

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

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

:改进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 个反应

脚本道具无效

你好!@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”默认已被编辑器自动使用。

ClaudeCode

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

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

自定义方块图标

我想自定义封锁图标,我找到了代码: 如何找到我想要的“内容”? ![](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图片 }) ```

ClaudeCode

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

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

我们如何隐藏可编辑组件的RTE?

你好 我们有个要求,就是不想在可编辑组件上显示 rte。我们该如何实现这一点?

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 个反应

如何在最终的HTML文件中加载动态内容?

我到处找了,包括问题区,也尝试了几种方法。但我真的不太确定如何在组件中总是加载动态内容(不仅仅是导出或通过编辑器保存时)。 我想在我的 Grapejs 组件中包含一个脚本,它总是从网页抓取内容并更新组件。 比如,当我写博客并将其存储到数据库中时,现在每当有人访问我的落地页(用Grapesjs制作),我希望他们能看到我最新的博客。 我不想手动通过编辑器重建我的葡萄页面。 另外,如果有终端用户访问网站,我只需要发送 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()'

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

漏洞与修复:图层管理器溢出/缩放

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

ClaudeCode

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

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

:我正在尝试复制页面,但由于 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 个反应

如何将视频标签的原始字符设置为动态?

你好@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。

浏览所有主题