PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 545 个问题
🔍 typescript你好，我遇到了页面管理器的小问题。我希望所有页面的分辨率都是固定的。 高度和宽度图形来自 API，我可以在单页模板上成功显示所需的分辨率。 但在多页模板中，一旦切换到不同页面，设备管理器会重置为全屏（默认）。 我该如何实现目标，才能在所有页面中正确显示所需的分辨率？ 请看下面我用 React js 写的代码：
GJSBlock
谢谢你举报，@Ubanna。 感谢你分享关于多页面管理器重置设备管理器的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节，维护者可以更快地识别和优先排序修复。Grapes...
在我看来，样式管理器的背景控件在处理主体与其他组件时存在一个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）——...
我认为一个更详细的历史堆栈会带来很棒的功能。你可以拿到撤销堆栈，然后从中建立一个记录所有编辑的历史报告，但对我来说每次编辑具体是什么不太清楚（至少对我来说是这样，如果我遗漏了什么，请告诉我）。比如用公式化描述，比如组件[组件名称]在[页面位置或组件添加]处添加/删除/编辑，或者组件[组件]文本编辑......（请原谅我用这个笼统描述，因为连我自己都不知道该怎么表达）只是简单介绍一下每个堆栈中项目的撤销/重做历史。我目前只知道每个历史物品的ID，如果现在可行的话，我只是不知道该如何提取这些信息来创建一个历史侧边栏，除了ID，请给我一些线索，告诉我该注意什么 最新版本有替代方案吗？[ ] 是的（描述替代方案）[ x] 不 这是否与某个...
artf
嗨@anatoli-dp，如果能查看撤销历史会非常酷，我已经在考虑如何扩展UndoManager模块，通过插件实现这种功能（比如你可以用你喜欢的框架渲染UI）。 UndoManager 栈会在任何被监听的模型/集合（组件、CSS 规则等）发生变化时更新，新增一个包含动作信息的 UndoAction 对象。值得注意的是，一次更改可以生成多个撤销动作： “''js 这会为新组件生成一个撤销操作 以及另一个用于新CSS规则的任务 editor.addComponents（' <d...
anatoli-dp
是的，我知道如何访问这个栈，只是不知道怎么设计它，才能给最终用户更有意义的描述
artf
我只是不知道怎么给最终用户一个更有意义的描述 每个UndoAction（堆栈的每个实例）都会告诉你动作的“类型”（例如“添加”、“删除”、“重置”、“更改”）以及关于更新模型的详细信息（例如，Component、CssRule 等）。你可以尝试读取这些数据，但我更想的是如何让每个操作都易于识别。
你好！@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...
我想自定义封锁图标，我找到了代码： 如何找到我想要的“内容”？ ![]（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'））; 组件...
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
我们不想让组件不可编辑，组件必须是可编辑的，只是不想在组件上显示左侧工具栏。
我到处找过，包括问题部分，也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容（不仅仅是导出或通过编辑器保存时）。 我想在 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（）'
版本： 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版本测试 提供最小可重复的示例...
“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 谢谢！
你好@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。