GrapesJS 问题

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

状态

排序

找到 466 个问题

🔍 components

#32062020年12月23日作者 jrkd4 个回答

6 个反应

增强组件提问 style-manager keyboard

Page Manager Plugin

功能：可以用Grapesjs创建多个页面。功能设计全球范围：[ ] 在顶部横幅“设备[下拉列表]”右侧添加一个链接，上面写着“当前<page-name>页面”。[x] 在右侧列“方块”右侧新增菜单项。图标会类似于[FA页面图标]（https://fontawesome.com/v4.7.0/icon/files-o）。[ ] 点击菜单项或当前页面链接，会显示“页面管理器”标签;一个全宽链接列表，可以在页面间切换。页面管理器标签页：[x] 当前页面将在列表中被高亮显示。[x] 点击新页面会刷新主视图及相关编辑器信息。[x] 当前设备设置应保持。[x] 导出/预览/布局/属性功能应指向新选中的页面。[ ] 列表中的每个页面都会有...

artf

Pages模块现已合并 https://github.com/artf/grapesjs/pull/3411，新版本即将发布。使用Pages API的简单演示：https://codepen.io/artf/pen/XWpJQoY

artf

听起来很棒，我很喜欢把这个插件作为插件的想法，如果你觉得需要添加什么（比如某个事件）来让它更好，告诉我。

jrkd

这个功能的核心今天已经运行起来了。 @artf如果还想要，告诉我，我会在一月份再花点时间。给自己的笔记，待办事项：添加/移除页面操作，进行视觉调整，集成存储管理器，并将代码重构为独立插件。

查看详情

#32002020年12月20日作者 sprklinginfo3 个回答

0 个反应

提问组件 style-manager typescript

需要帮助：能找到方块掉落到的组件吗？

你好，如果我在动态添加的组件上拖放一个方块，我如何获得或访问该方块被投放到的组件？我把拖曳模式设置为“绝对”（设计模式），这样用户可以自由地在页面任意位置放置一个方块，每页都有背景图片。当编辑器启动时，页面会动态添加。方块应根据背景图片放置在页面的不同部分。由于拖拽模式，方块被设置为“绝对”。我的问题是，如果我更改浏览器大小，带有背景图片的页面会相应缩放，但那些块却不会跟着目标图片移动。我在想，一旦块被放下，我需要把位置改成“相对”，并附加到页面上（图片）。尝试用“block：drag：stop”事件更改掉落方块的样式，但它变得隐形，它还在DOM上，但我看不到它了，“设置'z-index'为100000，也没用。我也搞不清楚...

artf

抱歉兄弟，我这里只回答你的主要问题如果我在动态添加的组件上拖放一个方块，我如何获得或访问该方块被投放到的组件？ “''js 模块和组件是两个不同的概念，如果你不理解，请阅读文档 editor.on（'block：drag：stop'，（component， block） => { 如果存在分量，表示掉落成功如果（分量） { component.addStyle（{ color： 'red' }） // 例如：更新风格你需要包含这个新组件的父节点吗？ const par...

inthismachine

@artf如果xxx被非法丢弃，有没有办法把<mj-text>xxx</mj-text>包裹在MJ截面和MJ列里？比如使用者试图把它砸在身体上。原因是我想自动把丢弃的文本块添加到一列行里，如果它没有放在列内。

GJSBlock

谢谢你举报，@sprklinginfo。关于需要帮助：获取方块被投放到的组件？这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'s...

查看详情

#31972020年12月19日作者 craighaworth2 个回答

0 个反应

缺陷提问 style-manager 组件依赖

你能重现演示中的bug吗？

版本： "0.16.30 你能重现演示中的bug吗？ [ x] 是的（通讯演示版）预期的行为是什么？图像大小调整的handle应该在不抛出异常的情况下调整图像大小。详细描述那个漏洞点击任何图片缩放的手柄都会触发未抓到的类型错误。 PropertyView.js：504 未捕获类型错误：无法读取未定义的属性“get” 在r.isTargetStylable（PropertyView.js：504）在r.checkVisibility（PropertyView.js：326）在r.target更新（PropertyView.js：269）东部时间（index.js：759） R.<匿名>（index.js：772）在r...

artf

感谢你的报告，下次发布会修复。

GJSBlock

谢谢你举报，@craighaworth。安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。为你现在：运行“npm审计修复”以查看可用的补丁查看是否有更新的GrapesJS版本，可能已经解决了这个问题如有稳定版，升级前先测试最新稳定版如果漏洞非常严重，可以使用“npm audit fix --force”，但请务必彻底测试理解风险：在GitHub安全公告中查看具体漏洞详情并非所有高严重性问题都会影响你的代码路径某些漏洞仅在特定条件...

查看详情

#31942020年12月18日作者 stljeff13 个回答

0 个反应

提问组件增强 typescript

How do I repurpose the Spectrum Color Picker?

我想重新利用GrapesJS中使用的色彩选择器。我必须用颜色选择器来设置一些项目的关卡设置。这些设置可以通过GrapesJS编辑器访问。我想利用现有用于字体颜色等特性的颜色选择器。我看到过[这篇帖子]（https://github.com/artf/grapesjs/issues/1393）关于扩展一个特性以获得颜色选择器。很遗憾，我觉得我做不到。据我所知，特质是组件的一部分;我不是在处理组件，而是在处理 GrapesJS 一般范围之外的项目层级设置。我只需要把输入标签传递给 Spectrum，并且能够在 Change 上添加事件处理功能。我能看到grapesjs.js编译包里有Spectrum插件，只是不明白是否以及如何利...

artf

目前，唯一的方法是使用这个非公开的API。 “''js editor.getModel（）.initBaseColorPicker（DomElement， { / spectrum options / }）; ``` 我已经开始开发一个新的UI模块，以应对类似情况（比如添加/替换GrapesJS UI元素的能力），但遗憾的是，我不知道它什么时候发布，因为它还处于实验阶段。

himedlooff

有没有办法保留色彩选择器，同时配置光谱选项？比如说，如果我想强制十六进制颜色，我可以传递“{ preferredFormat： ”hex“ }'？

GJSBlock

谢谢你举报，@stljeff1。关于我该如何重新利用Spectrum选色器？的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。使用事件系统： “JavaScript editor.on（'component：update'，（component） => { 你的逻辑 }); ``` 替代方法：听取“selector：add”以获取CSS选择器更改使用“selector：custom”来表示自定义规则利用“change：*”...

查看详情

#31922020年12月18日作者 niveth092 个回答

0 个反应

提问组件 typescript

How to make components not editable in preview mode?

我正在尝试让预览模式下的组件无法编辑。以下代码无法正常工作。请帮我解决这个问题。编辑; ngOnInit（）{ this.editor = this.initializeEditor（）; this.editor.on（'load'，（） => this.editor.runCommand（'preview'））; this.editor.on（'run：preview'，（） => { this.editor.Panels.getPanels（）.reset（[ 某种代码 ]) this.whenRunPreview（this.editor，'text'）; this.whenRunPreview（this.editor，...

artf

通过这种方式修复你的功能 “''js whenRunPreview（ed， type） { ed.getWrapper（）.findType（type）.forEach（cmp => cmp.set（{ editable： false }）） } ```

GJSBlock

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

查看详情

#31892020年12月16日作者 marcepoblet2 个回答

3 个反应

提问组件常规

ChangesCount is incremented, without changes applied

[double-click.pptx]（https://github.com/artf/grapesjs/files/5705054/double-click.pptx）有没有可能，当你只双击某个组件时，“changesCount”参数并没有被递增？当你双击且没有任何更改时，参数“changesCount”会被递增。我在pptx文件里附上了视频，展示了这种行为。这在任何浏览器中都是可以复现的。

artf

应该会在下一个版本中修复

GJSBlock

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

查看详情

#31882020年12月16日作者 GoodPHP1 个回答

0 个反应

组件提问文档

Custom Block for component - your opinion?

你好，我的团队为 GrapesJS 开发了这个自定义块。 <img src=“https://devfuture.pro/wp-content/uploads/2020/12/GrapesJS-Preset-Webpage-2020-12-16-00-35-02.png”> 我们这里有视频示例：https://www.youtube.com/watch?v=ZDnWS0X145s 你怎么看？你喜欢吗？我们在GrapesJS上的服务：https://devfuture.pro/grapesjs-development/

GJSBlock

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

查看详情

#31852020年12月11日作者 Stiggi2 个回答

0 个反应

提问组件 typescript

How to get the models trait of a component?

你好，我在TraitManager中添加了一个新的类型“array”。所以我可以添加几个子特征。有一点我必须检查模型的特征。我用的是这样的构造：有没有更简单的方法可以直接从组件获取组件的模型？此致敬礼，迈克尔

Stiggi

比我想象的简单:) 'editor.getSelected（）.defaults.traits'

GJSBlock

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

查看详情

#31772020年12月9日作者 anatoli-dp3 个回答

0 个反应

增强提问组件缺陷画布

问题/功能请求：更改所选组件工具提示

通过API有没有办法更改所选组件工具提示，还是只能通过编辑源代码来实现？如果是关于API的，请多包涵，因为我不够聪明，无法有效更改源代码，每次尝试做其他修改时，使用修改后的框架都会出错。如果没有，请把这个功能加到一个新功能里，因为这对某些自定义公司来说会非常有用。

artf

你好，当你定义一个新组件时，可以自定义它的工具栏 “''js ... 型号：{ 默认值：{ ... 工具栏：[ { 属性： { 类别： 'fa fa-arrow-up'，命令：（） => alert（'Hi'） }， ... ], } } 但不会被存储（比如页面刷新），所以我总是建议更多地以组件为导向思考。

anatoli-dp

谢谢，这对我想添加的一些内容帮助很大使用。 2020年12月29日星期二下午1：01 Artur Arseniev <[email protected]> 写道：关闭了#3177 <https://github.com/artf/grapesjs/issues/3177>。 — 你收到这个帖子是因为你写了这个帖子。直接回复此邮件，请访问GitHub查看 <https://github.com/artf/grapesjs/issues/3177#event...

GJSBlock

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

查看详情

#31762020年12月9日作者 mcottret4 个回答

1 个反应

提问 style-manager 组件缺陷 typescript

'setStyle' 和 'setComponents' 选项参数未被考虑

版本： 0.16.30 你能重现演示中的bug吗？ [x] 是的 [ ] 不繁殖步骤：打开控制台执行 'editor.setComponents（''， {avoidStore： true}）;'执行 'editor.setStyle（''， {avoidStore： true}）;'“存储......”日志依然存在（见附图）预期的行为是什么？ “选项”参数应被考虑。将“avoidStore”选项传给“true”，再传给“setStyle”和“setComponents”，应该能防止更新事件触发。目前的行为是什么？ “选项”参数未被考虑。传递“避免商店”选项无效，更新事件仍然会触发。提出的解决方案：很抱歉我之前在[PR]...

artf

谢谢@mcottret修复已经准备好，下次发布时会有修复

artf

不幸的是，由于初始命名不当，“avoidStore” 是用来跳过 UndoManager 而不是存储😁的好消息是，为了修复 #3189，我不得不引入新的“noCount”选项，这样可以跳过编辑器更改计数器，也不会触发存储。这个修复也促使我正确更新了 handleChanges 中的签名，使用 CssComposer，但我还需要修正其他几种方法才能让整个系统正常工作（包括你提到的那些）。所以，在下一个版本中，这个功能应该会像你预期的那样运行，配合新的“noCount”...

mcottret

你好，@artf！很抱歉重新提起这个问题，但“setStyle”问题似乎依然存在。重新操作上述步骤，“存储......”当调用“setStyle”并使用“noCount”选项时，日志仍然显示。我看到[已修复的“handleChanges”处理程序仍然使用“避免Store”选项]（https://github.com/artf/grapesjs/blob/dev/src/css_composer/index.js#L130），但“避免Store”选项似乎也没用。我没深...

查看详情

GrapesJS 问题

浏览所有主题