PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 3,464 个问题

#33832021年4月2日作者 KieronWiltshire4 个回答
0 个反应
提问style-manager常规

Is it possible to include the style in the html?

我目前用 grapesjs 来构建邮件模板，但当我导入带有<style>标签的 HTML 时，在存储之前，HTML 和 CSS 会被拆分。当这些存储在后端数据库时，HTML 里没有 <style> or <link> 标签，而是单独存储。有没有办法防止这种情况，并存储两个版本的编译版本，或者至少能在发送到服务器之前注入样式？

Ju99ernaut

Grapesjs不支持内联，但你可以用这里用的同样方法 https://github.com/artf/grapesjs-preset-newsletter。它使用 'juice' 包来合并 html 和 css

artf

是的，目前内联CSS被解析为CssComposer，并且[已从DOM]（https://github.com/artf/grapesjs/blob/bb24e02c66c6bcb3104bf2c99fd3ef30a4d1e1f3/src/parser/model/ParserHtml.js#L290-L302 移除）。这允许编辑器编辑其样式。

ronaldohoch

关于它有一个问题。 ckeditor 如何用内联样式编辑跨度，关闭后保留并重新打开同一个模板？

查看详情
#33822021年4月2日作者 Squirrel14892 个回答
1 个反应
提问缺陷文档typescript

Not able to add more than 2 projects under free version

![截图（11）]（https://user-images.githubusercontent.com/57554308/113369015-1a505280-9315-11eb-8d48-c9b8bdef335e.png）警告 请阅读并遵循接下来的三步，然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下，看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答，否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 http...

Ju99ernaut

grapesjs 和 grapedrop 是两个独立项目，你应该在这里提出你的问题 https://spectrum.chat/grapedrop

GJSBlock

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

查看详情
#33812021年4月2日作者 pranay22103 个回答
1 个反应
提问style-manager组件缺陷增强

在组件间切换会产生最大呼叫堆栈大小误差

你好，artf，感谢你打造了这样强大的定制CMS工具。 我正在项目中实现一个新页面功能，所以我用你的参考来切换组件，但出现了错误，请问能否指导我如何在面板点击“添加新页面”按钮时构建新页面？ 这是我的代码

Ju99ernaut

我觉得数组不是存储页面对象的最佳方式，所以运行数组操作获取页面并加载页面对调用栈来说可能太繁琐了。你应该考虑只在需要时才把页面加载到内存里，并存储在类似数据库的环境中，而不是数组。你可以试试这个插件 https://github.com/Ju99ernaut/grapesjs-template-manager

artf

我不确定你那边的情况，但我建议关注#3206，因为内置页面管理器快准备好了（我会更新那个问题）

GJSBlock

谢谢你举报，@pranay2210。 关于在组件间切换会导致最大调用堆栈大小错误的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*...

查看详情
#33802021年4月2日作者 alemenciones2 个回答
0 个反应
style-manager提问常规

Default properties not selected in styleManager

亲爱的，你知道为什么样式管理器里没有选择默认属性吗？ 我可以触发什么事件来更新这个？？ ![图片]（https://user-images.githubusercontent.com/2309686/113360884-0ca0ca00-9321-11eb-9542-c38bc6c85a92.png）

artf

试着检查你的配置中的“styleManager”https://github.com/artf/grapesjs/blob/dev/src/style_manager/config/config.js（highlightChanged应该是“true”）

GJSBlock

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

查看详情
#33792021年4月2日作者 silicahd3 个回答
1 个反应
style-manager常规

Tailwind CSS

我觉得让这个构建器变得出色的一点是加入顺风CSS类。尤其是现在有了新的Tailwind CSS按需生成器。

Ju99ernaut

我不确定这能不能加到核心库里，但如果有个插件肯定很棒。

artf

是的，我同意Brendon的看法，这绝对可以作为插件添加

GJSBlock

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

查看详情
#33782021年4月1日作者 dluague2 个回答
0 个反应
提问组件缺陷typescript

Null text after saving.

版本： 0.16.45 你能重现演示中的bug吗？[ ] 是的[x] 不 预期的行为是什么？ 不应该有空文本。 目前的行为是什么？ 在将数据保存到数据库并检索（参见附带组件对象）后，空数据会出现。 这就是我分配来自数据库组件的方式 “''js this.editor = grapesjs.init（{ 容器：“#gjs${this._uid}'， 插件：[类型]， fromElement： false， 高度：这个。高度， 宽度：“自动” storageManager： false， 资产管理人：{ 资产：this.assets， 上传文件：this.uploadFile }, noticeOnUnload： false， com...

artf

看起来是你这边的问题，因为我无法复现（也许你后台操作有误？！）。先尝试创建一个可复现的演示（通过使用localStorage）

GJSBlock

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

查看详情
#33772021年4月1日作者 assadnazar3 个回答
1 个反应
style-managertypescript常规

StyleManager options repeating 2 times

版本：0.16.45 如果我添加 grapejs-preset-js，stylemanager 会重复每个选项两次。 这里有个 jsfiddle 链接，你可以检查相同的行为。 [https://jsfiddle.net/assadnazar/2asojqrc/1/]（https://jsfiddle.net/assadnazar/2asojqrc/1/） 也许是选项没有合并

Ju99ernaut

用途： “''js window.editor = grapesjs.init（{ // ... styleManager： { clearProperties：1 }, // ... }); ```

assadnazar

砰！

GJSBlock

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

查看详情
#33762021年4月1日作者 rcloss4 个回答
3 个反应
提问常规

Changing upload URL for AssetManager programmatically

我遇到的情况是，根据资产管理器的打开方式，我想传递一个略有不同的上传URL。 在asset：upload：start事件中，我让它查看应该使用哪个上传URL，如果需要更改，我会做 amConfig = editorAssetManager.getConfig（） amConfig.upload = 'NEW URL' 但它并没有用新的 URL 上传，而是坚持用 init 上定义的那个。Grapesjs 加载完成后，有没有办法更新配置？我没看到任何集合或 setConfig

SzaboGabesz

编辑。AssetManager.config.upload = 'NEW_URL' 就能做到

Ju99ernaut

配置里的值只在初始化时使用，所以改它没用，也许改一下这些会有帮助： “''js 编辑。Assets.FileUploader（）.config.upload = 'NEWURL'; 编辑。Assets.AssetsView（）.config.upload = 'NEWURL' ```

rcloss

谢谢，我刚试过这两个方法，但至少在asset：upload：start事件里没用

查看详情
#33752021年3月31日作者 christosapos2 个回答
0 个反应
组件提问typescript

无法基于文本组件为扩展按钮组件添加空格。

大家好， 首先，我想表达对这个惊人工具的感激之情。我基于文本组件做了扩展按钮组件，这样可以手动编辑按钮内容，而不使用特质。 扩展按钮组件的代码如下： var comps = 编辑器。主导组件; var defaultType4 = comps.getType（'text'）; 编辑。DomComponents.addType（'button'， { 模型：{ 默认值：{ 标签名称：“button”， 类：['.pointer']，//悬停时添加点击指针， }, }, 扩展：“文本”， isComponent： 函数 （el） { 如果 （el.tagName === 'BUTTON'） 返回 {type： 'button'}; }...

artf

看起来空格会触发 Chrome 中的“点击”事件。解决办法似乎是在“keypress”时添加 preventDefault https://stackoverflow.com/questions/22104860/chrome-firing-onclick-when-space-typed-in-contenteditable-button 附言：避免那样扩大视野。默认情况下，当你使用某种类型的“extend”时，它也在扩展视图（如果你需要扩展另一个组件的视图，可以用“ex...

GJSBlock

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

查看详情
#33742021年3月31日作者 FacuCarbon2 个回答
1 个反应
画布常规

Images and videos are not focused

你好，我遇到了一个问题，就是当把视频或图片添加到画布时，画布不是居中，而是偏向左边。借助面板，我设定了对齐，但它也无法居中。 ![图片]（https://user-images.githubusercontent.com/67525225/113194408-7f357b00-9237-11eb-973b-fa7305418354.png）

Ju99ernaut

试着把它放进容器里，你可能可以用Flexbox之类的东西把它居中。

GJSBlock

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

查看详情

浏览所有主题