GrapesJS 问题

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

状态

排序

找到 231 个问题

🔍 general

#33042021年3月2日作者 SyedHashimShah3 个回答

2 个反应

提问 style-manager 常规

How I can customize the UI of Grapesjs?

我想自定义 Grapesjs 的界面，但 js 和 css 文件都被压缩了。请告诉我该怎么做？我只是想在界面里保留一些特定的模块，比如图片、文本等。

echobinod

SASS 用于生成压缩后的 CSS 文件。你可以从这里更改样式变量：src/styles/scss/

artf

@SyedHashimShah https://grapesjs.com/docs/getting-started.html

GJSBlock

谢谢你举报，@SyedHashimShah。关于我如何自定义Grapesjs的用户界面？这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.l...

查看详情

#33032021年3月2日作者 RutujaBadbe4 个回答

1 个反应

提问文档常规

Category order not displaying properly

嗨！我想在区块管理器中按特定顺序显示这些类别。我查阅了文档和之前的问题，发现了订单属性。于是，我尝试设置了顺序属性。但即使 ORDER 属性正在设置，它还没有按那个顺序显示。我是不是漏掉了什么？或者做错了什么？我正在做的是：因此，期望的结果是按顺序查看类别——标题、旋转木马横幅、版块、类别、新闻信件、页脚但我仍然感受到的是—— ![捕获]（https://user-images.githubusercontent.com/53044783/109652612-0387d600-7b86-11eb-88ca-38a9ed0c219a.PNG）

Ju99ernaut

我想你可以把它设为功能请求，我不确定Grapesjs上是否已经有类似的功能。不过如果你把每个类别的块拆分成不同的文件，然后按顺序加载这些文件，可能会更容易管理。

Ju99ernaut

我认为方块添加的顺序决定了类别顺序。

RutujaBadbe

@Ju99ernaut你好！谢谢你的回复。是的。最后我做了。但如果我想动态地做呢？如果有很多区块，保持顺序难道不难吗？

查看详情

#32982021年3月1日作者 neon123452 个回答

1 个反应

组件常规

Hide component labels while editing text

对于放置在页面顶部的文本，组件标签在编辑时可能会重叠并隐藏文本。另外，标签在不在顶部时可能会和文本编辑工具重叠。编辑文本时隐藏标签可以避免这种情况。

RutujaBadbe

你可以用 badgable ： false 隐藏标签 https://grapesjs.com/docs/api/components.html#parameters-3

GJSBlock

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

查看详情

#32962021年3月1日作者 RaresVlaiduc3 个回答

1 个反应

提问常规

Multiple pages plugin

你好！我看到这里有人讨论过某种多页插件。这还存在吗？有没有什么办法解决这个问题，还是我应该自己开插件？谢谢！

Ju99ernaut

我做了一个简单的 indexedDB，但它也可以适配到其他存储类型 https://github.com/Ju99ernaut/grapesjs-indexeddb-ui 不过我打算弃用它，改用一个内置其他存储类型的新插件，并且界面和用户体验也更好。我计划在artf在#3206号提到的“PageManager”API发布后发布它，同时可能还有同期提到的其他插件正在开发中。

artf

是的，还在进行中（很遗憾我还没到），但PageManager肯定会放在核心里。

GJSBlock

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

查看详情

#32942021年2月27日作者 server1024 个回答

0 个反应

style-manager 文档常规

功能：在样式管理器中为属性列表数组添加选项

你好，我怎样才能在属性列表中添加buildProps，使得当选择某个选项时，该选项的属性会显示出来这是我在flex属性上想要实现的目标示例。 “JavaScript { 名称：“布局”，开启：真， buildProps： ['display']，性质：[ { 类型：“无线电”，属性：“显示”，列表：[ { 标题：“区块”，名称：'<span class=“material-icons”>calendarviewday</span>'，值：“方块”， }, { 标题：“Flex”，名称：'<span 类=“material-icons”>calendarviewweek</span>'，值：“flex”， bui...

Ju99ernaut

我相信你可以把构建道具从属性列表中移出，仍然能实现你想要的功能，内置的Flex Box相关属性只有在组件带有“display： flex”时才会显示。还需要注意的是，“buildProps”只是输入的预设，不能嵌入到其他输入中，也就是属性列表 “''js { 名称：“布局”，开启：真， buildProps： ['display'， 'direct'， 'align-content'， 'align-items'， 'align-items'， 'align-self'，...

server102

谢谢。我试过了，但网格属性不起作用。可能得手动实现，但不确定怎么最好地处理这个问题。

Ju99ernaut

网格属性没有“buildProps”，所以你得从头开始构建，遗憾的是文档里关于自定义属性的信息不多，你可能得从API参考里拼凑起来 https://grapesjs.com/docs/api/style_manager.html#stylemanager

查看详情

#32932021年2月26日作者 eikerd2 个回答

0 个反应

提问 style-manager 常规

Blockmanager：添加自定义类 gjs-block-category / gjs-title DIV

我有一份类别清单，想根据是否需要用不同风格标记一些类别。理想情况下，我可以在 div 里添加一个类，类为 'GJS-title'，这样它就会显示为'gjs-title required-field' 'this.editor.BlockManager.getCategories（）;' 返回了我所有块类别的数组，但我的问题是，我该如何选择一个来使用 .addClass（）？如果我按“id”来判断，并且我把 ' this.editor.BlockManager.get（'logos'）.addClass（'required-field'）' 这似乎不起作用。选择 gis 块类别的 DIV 以实现 .addClass（）的最...

artf

你好@eikerd通过查看代码，目前我看不到其他方法可以自定义块类DOM，除非你自己用DOM做点什么（块渲染完成后）。我可能会在下一个版本中把视图添加到分类模型中，所以你可以这样做： “''js const blockCat = 编辑器。Blocks.getCategories（）.filter（c => c.get（'id'） == 'ID-CAT'）[0].view; blockCat.el.addClass（'add-class'）; ```

GJSBlock

谢谢你举报，@eikerd。关于Blockmanager：添加自定义类gjs-block-category / gjs-title DIVs，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on...

查看详情

#32852021年2月21日作者 ashercoren4 个回答

6 个反应

画布提问常规

：画布iframe中的文档类型

嗨。这个问题已经被问过两次（[这里]（https://github.com/artf/grapesjs/issues/973）和[这里]（https://github.com/artf/grapesjs/issues/1230）），但从未有过答案。有没有办法在画布iframe的开头加上'<！DOCTYPE html>'，这样iframe就会进入标准模式？我需要这个，因为我想用tinyMce作为自定义RTE，而tinyMce需要标准模式。

artf

在下一个版本中，我会添加一个新的事件辅助工具，允许在加载前编辑 iframe 内容： “''js editor.on（'frame：load：before'，（{ el }） => { const doc = el.contentDocument; 文档开启（）; doc.write（“<！DOCTYPE html>”）; 文档关闭（）; }); ```

bgrand-ch

你好，对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...

artf

不太有，但我愿意听听如何让它可自定义的解决方案。

查看详情

#32842021年2月20日作者 mig84471 个回答

0 个反应

typescript 常规

Block rendering is being called twice

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L142 这行使得块被重新渲染，因为渲染是在监听“变化”事件，但由于该属性本身不影响块渲染本身，集合应保持静默，如： “''js model.set（'category'， catModel， {silent： true}）; ```

GJSBlock

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

查看详情

#32832021年2月20日作者 mig84474 个回答

2 个反应

常规

BlocksView rendering is being called twice

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L186 块管理器在寻找模型中的“渲染”属性，以判断视图是否已经渲染，但该方法并未设置该属性，因此该函数被调用两次，一次通过“reset”事件调用，一次由块管理器调用。一条包含： “''js this.rendered = true; ``` 应该添加这个功能才能停止这种情况

mig8447

@RutujaBadbe 这就是你需要的具体更改： https://github.com/artf/grapesjs/commit/640661b0a44e5e2857b615559c1db27da3e17a6c

artf

是的，明白了，谢谢

RutujaBadbe

https://github.com/artf/grapesjs/blob/b199083f6a6128ecff41d20865493294f71fe0a1/src/block_manager/view/BlocksView.js#L186块管理器在寻找模型中的“渲染”属性来判断视图是否已经渲染，但该方法不设置该属性，因此该函数被调用两次，一次通过“reset”事件，一次由块管理器调用。一条包含：“''jsthis.rendered = true;```应该添加，才能停止这...

查看详情

#32822021年2月20日作者 ThomasPof2 个回答

0 个反应

提问 typescript 常规

CleanId function not working with MJML code

即使在最新版本的 grapesjs（0.16.41）上，CleanID 仍然无法支持 MJML 代码。这和这个已关闭的问题有关：https://github.com/artf/grapesjs/issues/3276 这个函数不会读取MJML标签：“attrs”是空的，我找不到原因......

artf

id 问题应该已经在最新的 mjml 插件版本中解决了

GJSBlock

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

查看详情

GrapesJS 问题

浏览所有主题