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

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#35072021年6月1日作者 cedriclajato2 个回答
0 个反应
组件typescript常规

No Generated ID and No auto select ID

大家好， 我用的是 grapesjs-blocks-bootstrap4，检查它们的组件，看起来都正常。 但当你选择块类容器时，它会针对类而不是唯一ID。 ![bootstrap-4-element]（https://user-images.githubusercontent.com/57404000/120257180-4a3eb680-c2c2-11eb-872a-e7da78e74ff4.PNG） 我用这个model.set（'attributes'， { id： randomID（） }设置了随机ID）;但当你选择该块时，它仍然指向的是类而不是 ID

artf

https://github.com/artf/grapesjs/issues/2936#issuecomment-680322089

GJSBlock

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

查看详情
#35042021年5月31日作者 snowballrandom2 个回答
0 个反应
提问typescript常规

我注意到有人使用了 font awesome 4.7 的早期版本。

我注意到有人使用了 font awesome 4.7 的早期版本。 我使用 fontawesome 5.2 版本，似乎在与 Grapes JS 版本同时加载时会出现问题，有些字体无法加载，或者新 fontawesome 字符集中的类名发生了变化。 我该如何使用 Fontawesome 的新版本？ 我需要编辑Grapes JS源代码并编译才能使用更新的fontawesome吗？ ![截图来自2021-05-30 21-29-36]（https://user-images.githubusercontent.com/2145779/120131485-28441780-c18e-11eb-8064-fbcb754c0104.png）

artf

你可以在初始化时更改这个选项： https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/editor/config/config.js#L165-L168

GJSBlock

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

查看详情
#35002021年5月28日作者 vijayshukla302 个回答
0 个反应
组件typescript常规

Remove custom trait by its type.

我创建了一个自定义特质，但该特质的名称将是动态的，目前尚不清楚。 问题是当前的 removeTrait（） 只对 name/id 有效。但如果我想用自定义特性移除组件中的所有特征怎么办？ 举个例子：我创建一个“my-custom-trait”特性并绑定到组件上。 component.addTrait（{ 名称：“some_random”， 选项：[]， 类型：“我的定制特质” }); 现在我想把它删掉，但我不知道名字。

artf

你可以使用该身份证 “''js component.addTrait（{ ID：“我的定制特质”， 名称：“some_random”， // ... }); // ... component.removeTrait（'my-custom-trait'） ```

GJSBlock

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

查看详情
#34972021年5月28日作者 mosh-tudor2 个回答
1 个反应
缺陷typescript常规

Button trait command doesn't work

版本： 最新详细描述那只虫子 https://jsfiddle.net/cleaver/wgz2jsvq/2/ 以下内容没有发生： “''js 特质：[ { 文本：“简单按钮”， 类型：“按钮”， 全文：真实， 命令： （） => { console.log（“坏掉的按钮”）; alert（“坏掉的按钮”）; }, }, ] ``` --- 在版本 0.16.45** 上，同样的代码运行良好： https://jsfiddle.net/cleaver/kenvpt50/1/

artf

感谢报告，@tudor-ooo 将在下一个版本中修复

GJSBlock

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

查看详情
#34962021年5月28日作者 anlumo4 个回答
1 个反应
增强组件提问keyboardtypescript

Mark Component as Dirty

你想给GrapesJS添加什么？ 组件应该能够标记自己为脏，触发“onbeforeunload”警告信息。 详细描述你的功能需求详细 我有一个（自定义）文本组件，用户可以输入任意文本。我把数据存储在服务器上，我想要自动保存。不过，我不希望服务器因为每一个字符都被联系到文本组件，因为那会是用户数量的巨大洪水。 我也不想更改“stepsBeforeSave”，因为像拖动组件这样的大改动应该立即保存。 目前，组件在用户离开文本组件时存储数据（设置模型上的“内容”键）。这方法有效，但当用户在文本组件仍处于焦点状态时重新加载页面，最新的更改不会应用到数据模型上。 这样可以，但我想弹出保存警告对话框（“onbeforeunload”消息）。然...

anlumo

我通过完全关闭“on-andload”处理，自己滚动来解决这个问题。

artf

编辑器有“编辑”属性，只要启用或禁用RTE就会改变，所以我猜在你的情况下，这个功能应该可行 “''js editor.on（'' change：editing'， （em， editing） => { window.onbeforeunload = 编辑 ||editor.getDirtyCount（） ？e => 1 ：零; }); ```

anlumo

这个在 onbeforeunload 处理程序之后不会被我上面提到的那个片段覆盖吗？

查看详情
#34902021年5月27日作者 samichamoun2 个回答
0 个反应
提问文档typescript

Large images make area of content editor unreachable

你好， 比如你在页面上添加一个三列块，然后尝试在每列拖拽非常宽的图片，内容会被拉伸，溢出部分会被隐藏。 我们该如何添加垂直滚动条，或者强制编辑器在拖拽图片时限制可查看的大小？目前如果内容超出了那个区域，你就无法在编辑器里访问它。

artf

这更多是布局问题，你可以通过在所有图片中添加你的CSS来轻松解决，比如说，'img { 最大宽度：100%; }`

GJSBlock

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

查看详情
#34892021年5月27日作者 samichamoun1 个回答
0 个反应
提问typescript常规

Large images push out column width in editor view

作为前言，我描述的问题不会影响编辑生成内容的输出，只是在查看编辑器内部的内容时。 假设我在编辑器上创建了两列。两者宽度各为50%。 如果我把一张大图片拖到这些单元格里，它会把单元格的宽度推得很大，而不是调整大小以适应编辑器容器。 我能做些什么来修复这个问题吗？

GJSBlock

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

查看详情
#34852021年5月26日作者 ahmedderkaoui1 个回答
0 个反应
组件提问画布style-managertypescript

以HTML形式注入到画布的元素不会作为组件表现

考虑一个简单的块： 拖到画布时，可以选择该组件，并可修改其设置。 现在，我正在这样做，在卡片上添加相同的输入： '$（someElement）.find（“.card”）.html（'<输入类型=“text”/>'）;' 输入输入成功添加，但表现不如之前。它无法被选中、拖拽或删除，因此无法修改设置和样式。 有没有办法在特定元素中注入方块？

GJSBlock

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

查看详情
#34832021年5月25日作者 Palash-Mandal2 个回答
0 个反应
style-manager组件提问typescript

非常非常感谢之前的帮助。我还在开发领域比较新手。请帮我下面说

你好，@artf， 非常非常感谢之前的帮助。我还在开发领域比较新手。请帮我下面说 我需要一个模式，可以获取用户输入，比如块名、分类、HTML、CSS、JS，然后点击保存，把这些存储为新的块管理器。比如如何传递这些数据并存储为 dragabe 组件 我设置了调用模态和设置标题也包含内容的按钮，但编辑器未启动 图片 ![图片]（https://user-images.githubusercontent.com/17553816/119516278-424bb780-bd94-11eb-86db-812c6c405b1f.png） function buildCodeEditor（type） { var codeEditor = 编辑器...

artf

请遵循议题模板

GJSBlock

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

查看详情
#34822021年5月25日作者 Palash-Mandal4 个回答
0 个反应
组件画布typescript

Runtime updated traits not EDIT mode.

你好@artf 我遇到了关于某个特质的问题。当我拖放方块到画布时，它的特性在设置部分显示得很正常。但当我第二次保存并编辑，并在画布中选择了那个标签时，这个特征现在已经出现在设置的“Section”里了。 拜托拜托拜托帮帮我！ '// 自定义标题组件 blockManager.add（'header'， { 标签：“标题”， 类别：“组件”， media： '<SVG XMLns=“http://www.w3.org/2000/svg” viewBox=“0 0 24”><path d=“M8.3 11.5h7.4V6.9l-.2-1.6a1 1 0 00-.5-.5c-.3-2-.2-.7-.3-1-.3h-.6v-.4h6.8v...

artf

你是在插件里定义自定义组件吗？

Palash-Mandal

你是在插件里定义自定义组件吗？ 不用。只要添加init函数 editor = grapesjs.init({ const dc = editor.DomComponents; 自定义标题组件 blockManager.add（'header'， { 标签：“标题”， 类别：“组件”， media： '<SVG XMLns=“http://www.w3.org/2000/svg” viewBox=“0 0 24 24”><path d=“M8.3 11.5h7.4V6.9l-...

artf

定义新组件类型的第一个规则是将代码放入插件中。 摘自[docs]（https://grapesjs.com/docs/modules/Components.html#define-custom-component-type）

查看详情

浏览所有主题