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

GrapesJS 问题

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

找到 3,464 个问题

#35892021年7月3日作者 lbmir3 个回答
0 个反应
提问文档typescript

Autoload storage is not working on page refresh

你好，首先我想说这个项目非常棒，谢谢你！ 我用了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...

查看详情
#35882021年7月3日作者 ap0l02 个回答
0 个反应
提问常规

Any way to make GrapesJS Mobile Editor usable?

你好， 太棒的项目了！然而，在查看了 Grapejs Touch 插件后，从移动设备上使用编辑器仍然非常困难。 有没有办法简化界面，让移动设备更容易自定义？这主要是针对“新闻通讯”选项。 非常感谢！希望我没有违反任何规则

artf

不幸的是，目前的用户界面就是这样，另一种选择是自己打造更适合移动端的用户界面。

GJSBlock

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

查看详情
#35872021年7月2日作者 milan-holes2 个回答
0 个反应
组件缺陷提问typescript

我如何创建 Grapesjs 服务，用来从存储的组件生成 HTML？

你好。有没有可能创建 Grapesjs 实例，而不生成整个编辑器？我创建了带有异步数据的自定义组件，需要在Node中创建后端服务，该服务从存储的组件生成HTML输出，并填充API的数据。 现在我出现错误了：ReferenceError： 窗口未定义 谢谢。

artf

我会把它关闭为重复 https://github.com/artf/grapesjs/issues/3399

GJSBlock

谢谢你举报，@milan混蛋们。 错误错误：ReferenceError： 窗口未定义 发生在组件在组件生命周期完全初始化前尝试访问属性时。这是GrapesJS中常见的竞争条件。 立即解决办法： 如果你控制代码，可以用空检查包裹调用： “JavaScript if （component && typeof component.method === 'function'） { 你的准则 } ``` 根本原因分析： 组件在调用你的方法之前不会验证状态。当多个操作同时发生时，这会...

查看详情
#35862021年7月2日作者 jcsofts4 个回答
3 个反应
提问组件typescript

How to listen the components change in a component.

init（） { this.listenTo（this.model，'change：components'， this.handleComponentsChange）; }, 我开发一个组件，尝试监听子组件的变化，然后添加上面的代码以查看初始化，但添加/移除组件时函数没有触发。 我该如何在组件视图中监听组件的变化？ 谢谢

dm-siegel

我也没能让这个方法正常工作。设置 listTo 时错误读取 components（）。初始化时标签是空的（里面没有内容），所以这很合理。 算了......我是在模型的初始化中操作，而不是视图。 “打字稿” init（） { const children = this.model.components（）; this.listenTo（children， 'add remove'， this.handleComponentsChange）; }, ``` 在我把它放到正确的初...

anlumo

组件收集不会改变，这也是为什么没有触发事件的原因。 存储后端是一个骨干集合，详见[这里]（https://backbonejs.org/#Collection）。你必须听它的事件，特别是“添加”和“删除”。

artf

正如Andreas已经提到的，你必须为收藏添加一个听众。 “''js init（） { const children = this.model.components（）; this.listenTo（children， 'add remove'， this.handleComponentsChange）; }, ```

查看详情
#35792021年6月30日作者 mcottret4 个回答
2 个反应
提问组件缺陷画布typescript

在放置“activeOnRender”组件后立即打开RTE时丢失了

版本： 0.17.4 你能重现演示中的bug吗？[x] 是的[ ] 不 繁殖步骤：前往[演示]（https://grapesjs.com/demo.html）在画布内放置一个“文本”方块点击刚刚丢弃的“文本”组件打开的RTE丢失了位置（参见[附图]（https://user-images.githubusercontent.com/9916749/123977724-89465180-d9bf-11eb-9e99-d1b1f9cb897c.png）） 预期的行为是什么？ 打开的RTE应正确定位 目前的行为是什么？ RTE位置不对，它隐藏了“文本”部分的内容，可能妨碍编辑（尤其是使用像CKEditor这样较大的自定义RTE时）。 这...

artf

是的，我想你说得对。实际上，在没有选择组件的情况下激活RTE其实没什么意义（可能对所有其他“可激活”的方块来说都合理）。

gustavohleal

你好。我和@ronaldohoch找到了一个解决这个问题的办法。 当 RTE 启用时，我们会触发滚动事件。 这是代码：

ronaldohoch

你好，刚刚从提交 bb4a661 更新了文件，我觉得非常接近，我用的是 grapesjs-ckeditor 代码和 RTE 的第一个打开，its 放置正确： ![图片]（https://user-images.githubusercontent.com/2287371/129779602-382fcbd7-2ecb-4c20-8302-d767f52a5066.png） 但第二次打开时，又放错地方了...... ：/ ![图片]（https://user-images.gi...

查看详情
#35782021年6月30日作者 jcsofts2 个回答
0 个反应
组件typescript常规

版本0.17.4 尝试向主体添加背景图像时缺少组件

我补充道 domComponents： { storeWrapper： 1 }， 初始化网页编辑器时，启用将背景图像添加到正文中。 使用本地storageManager时工作正常，但使用远程storageManager时所有组件丢失 以下是数据 {“type”：“wrapper”，“droppable”：“.container”，“attributes”：{“id”：“izmf”}，“components”：[{“type”：“container”，“classes”：[{“name”：“container”，“active”：false}]，“attributes”：{“id”：“iboj”}，“components”：[{“t...

artf

你好@jcsofts如果本地存储正常，而你的远程存储却不行，那很可能是你终端端操作有问题。 没有可复现的例子我帮不上忙，只能建议你严格按照这个[指南]（https://grapesjs.com/docs/modules/Storage.html）。

GJSBlock

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

查看详情
#35772021年6月29日作者 alimajed933 个回答
0 个反应
undo-manager提问画布typescript

UndoManager hasUndo（） 方法在不该返回时返回为真

我正在尝试禁用撤销按钮，因为没有撤销操作。 为此，我正在监听“change：changesCount”事件，并使用“editor？”。属性？撤销Manager？hasUndo（）' 来设置撤销按钮的禁用状态。 'editor.on（'change：changesCount'， editor => setHasUndo（editor？.属性？撤销Manager？hasUndo（）））;' 除了以下这种情况，它对我来说还算是有效的：我在空白画布上创建新模板我拖放一个方块我撤销 问题是，虽然撤销现在应该被禁用，但它没有，因为“编辑器？”属性？撤销Manager？hasUndo（）' 返回为真，和 'editor？' 一样。撤销Manag...

artf

所以队列中增加了一个额外的动作，而实际上不应该有，那就是我在画布上拖动一个方块时。 不太行，你能做一个可复现的演示吗？我不能复现？

no-response[bot]

由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。

GJSBlock

谢谢你举报，@alimajed93。 关于UndoManager hasUndo（）方法在不应该返回时返回为真的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console....

查看详情
#35752021年6月28日作者 jcsofts3 个回答
0 个反应
缺陷画布组件增强typescript

Grapes.min.js：2 未捕获类型错误：无法读取未定义的属性“长度”

我添加 <iframe src=“https://app.conversiobot.com/boot/fvMEvO” width=“100%” height=“500” frameBorder=“0” allow=“geolocation”></iframe> 使用了自定义代码组件。 我的代码在0.17.4时运行正常，但在0.17.19时错误率低于 grapes.min.js：2 未捕获类型错误：无法读取未定义的属性“长度” 在r.loadTraits （grapes.min.js：2） 在r.initTraits （grapes.min.js：2） 在r.initialize （grapes.min.js：2） at r.e.m...

artf

感谢你的报告，修复已经准备好下一次发布。

rahul-singh-bv

我在v0.19.5尝试在自定义代码块内添加iframe时也遇到类似问题

GJSBlock

谢谢你举报，@jcsofts。 错误 TypeError：无法读取未定义的属性“长度” 发生在 Canvas 尝试访问属性时，尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法： 如果你控制代码，可以用空检查包裹调用： “JavaScript if （component && typeof component.method === 'function'） { 你的准则 } ``` 根本原因分析： Canvas 在调用你的方法之前不会验证状态。当...

查看详情
#35742021年6月28日作者 alpha2k-io3 个回答
0 个反应
组件文档提问typescript

Adding traits are not picked up by trait manager.

以下是[docs]（https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components）的示例。 有没有进一步的配置可以让元素的新特质显示？ 使用输入的示例无法运行，我的ID被接收了，但额外的属性没有。 “''js 试着添加特质 编辑。DomComponents.addType（'ol'， { isComponent： el => el.tagName == 'OL'， 型号：{ 默认值：{ 特质：[ { 类型：“select”，// 性状类型 标签：“类型”，// 你将在设置中看到的标签 name： 'type'， // 用于组件的属性/属性名称 选项：[...

artf

我能正确看到你的例子，所有特征都正常工作。你能制作一个可重复的演示吗？

no-response[bot]

由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。

GJSBlock

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

查看详情
#35732021年6月27日作者 jasminder2 个回答
0 个反应
提问组件缺陷typescript

Duplicate controls for every component

版本： 0.17.17 你能重现演示中的bug吗？[ ] 是的[x] 不 预期的行为是什么？ 它不应该显示重复的控制。 目前的行为是什么？ ![db]（https://user-images.githubusercontent.com/1322355/123553458-e44a2f80-d798-11eb-8373-af205370e8e8.JPG） 详细描述那个漏洞 不知为何，我用原版设置的GJ时会出现重复控制。 你能附上截图、截屏或实时演示吗？**[x] 是（附上）[ ] 不

artf

把这个添加到你的初始化配置文件中，以移除默认属性'styleManager： { clearProperties： 1 }，'

GJSBlock

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

查看详情

浏览所有主题