PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 183 个问题
🔍 documentation你好， 切换设备时没有选择默认样式属性。 繁殖步骤： 开放[http://grapesjs.com/demo.html] 选择任意方块并观察默认值。例如，在“通用”下，位置设置为“静态”。 切换到手机端。 把位置改成“相对”。 切回桌面，注意位置设置为“相对”而不是“静态”。 我预计切换设备时如果没有选择任何选项，应该会显示或选择默认值。 我有一个问题的简短视频。 https://user-images.githubusercontent.com/12418977/127947367-b972400f-85fd-4bfb-a82b-1a3e5b572345.mp4
MrNikolovski
这@artf有什么新进展吗？
MrNikolovski
你好，@artf。能给我一个关于这个问题的最新进展吗？你觉得这是个小问题，还是没时间去处理？ 谢谢。
artf
我现在正在改进StyleManager，可能很快就能检查到。
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵循贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 你可以在控制台输入 grapesjs.version 获得版本 你能重现演示中的bug吗？[ ] 是的[ ] 不 预期的行为是什么？ 详细描述那个漏洞...
codingmachine16
你好@artf 你好， 我们正在用 grapesJs构建一个内容管理系统。我们创建了标题、页脚、产品滑块和各种横幅的组件。我们几乎完成了一个电子商务网站，使用 grapesjS + React Js + NodeJs 和 Mongdb。我们能够存储和加载组件，进出数据库。 比如我们的网站管理员部分就是 abc.com/editor 这里我们正在创建布局，并存储和加载页面 我们在前端遇到了问题。比如，abc.com/home 这里我们想显示存储的组件，并绑定动态数据。我们不想...
GJSBlock
谢谢你举报，@codingmachine16。 关于*的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'）...
你好！@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...
我到处找过，包括问题部分，也尝试了几种方法。但真的不太确定如何在组件里总是加载动态内容（不仅仅是导出或通过编辑器保存时）。 我想在 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（）'
你好@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。
你好，artf， 我已经实现了多张图片上传并保存到远程数据库。 就像如何上传单视频并保存远程数据库一样 因为每次我们都需要把所有视频放到远程文件夹，然后配置成视频标签的src。这需要很多时间 请指导我实现它。
GJSBlock
感谢你报告，@san-123。 关于如何添加视频上传并保存到后台的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'...
警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们 遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md 先快速搜索一下，看看有没有人没开同样的问题 所有相关陈述/问题都必须填写/回答，否则问题可能已结案 JSFiddle 入门模板 https://jsfiddle.net/szLp8h4n CodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 版本： 你可以在控制台输入“grapesjs.version”获得版本 你能重现演示中的bug吗？ [ ] 是的 [ ] 不 预期的行为是什么？ 详细...
san-123
它的复制品
GJSBlock
感谢你报告，@san-123。 样式管理器大小未设置为图片控制的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在...
你好，@artf， 我已经添加了 '让CC = 编辑器。Css作曲家; cc.setRule（'.fadetop-animate'， { 不透明度：0，'animation-name'： 'fadeTop' }， { atRuleType： 'keyframes'， atRuleParams： 'fadeTop'， 选择器：“to”， 风格：{ 不透明度：1 } });` 根据文件[]（https://grapesjs.com/docs/api/css_composer.html#setrule） 但关键帧规则不会被添加到组件中。 如何为组件样式添加关键帧？
artf
用这个 “''js 编辑。CssComposer.getAll（）.add（'@keyframes fadeTop { ... }'） // 你的CSS字符串 ```
GJSBlock
谢谢你举报，@niranjank151。 关于@keyframes即使我传递关键帧对象后也没有添加，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => conso...
GrapesJS 代码存在 XSS 问题，因为值插入 DOM 时不会逃逸，例如 https://github.com/artf/grapesjs/blob/dev/src/assetmanager/view/AssetImageView.js#L30 如果“model.getFilename（）”返回“<img src=x onerror=alert（document.cookie）>.jpg'，可能会导致账户被接管。相反，代码应当是例如： 这里也有类似的问题 https://github.com/artf/grapesjs/blob/dev/src/assetmanager/view/AssetImageView.js#L15，...
aimeos
@artf 你的计划是什么？因为GrapesJS对XSS的脆弱性是一个相当严重的安全问题
artf
是的，谢谢你的报告@aimeos我一定会在下一版里修正
aimeos
@artf 文档中还经常使用“${var}'来在模板中插入变量。这也应该改变，以避免开发者在不知情的情况下引入安全问题。
你好，首先我想说这个项目非常棒，谢谢你！ 我用了GrapeJS Demo示例中的代码，并添加了远程文件的保存和加载数据，这就是我的storageManager代码： savenow.php文件代码： loadnow.php文件代码： 保存更改时一切正常，但之后如果按“刷新页面，它就会加载修改前的旧内容。 但如果我用硬刷新**页面，页面内容正常，显示的是我最近的修改。 用户刷新页面时，我怎样才能保留保存的内容？ 看起来它会在某个地方保存旧内容，刷新后重新加载，但没有用我定义的存储管理器里的 urlLoad。 也许有办法禁用旧内容的加载，只用存储管理器里的urlLoad？
lbmir
和[https://github.com/artf/grapesjs/issues/2963]（https://github.com/artf/grapesjs/issues/2963）上的问题一样。 但我的情况是，只有在硬刷新后才加载内容
artf
听起来更像是你这边的问题，网页应用并不区分刷新和硬刷新，实际上硬刷新更像是没有浏览器本地缓存的刷新。试着从检查器那里确认你的加载调用是否真的返回了正确的数据（比如，你可能有一个启用了某种缓存的网页服务器）。
GJSBlock
谢谢你举报，@lbmir。 关于自动加载存储在页面刷新时无法正常工作，这个问题问得很好。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something c...