GrapesJS 问题

ThetripGr

算了，我仔细看了文档，之前没注意到关于扩展父功能的内容

GJSBlock

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

ThetripGr

我又试了几次终于让它工作起来了，我会试着解释一下我是怎么让它工作的。当你定义性状时 “''js 默认值：{ 特质：[{类型：“选择”， 选项：[{ { 值：'myCustomClass'，名称：'选项A' }， }], 标签：“traitLabel”， 名称：“traitName”， 变革提案：1 }] }, 抱歉格式有点，我还不会粘贴格式化代码:P

artf

抱歉格式有点乱，但我还不会粘贴格式化的代码:P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

GJSBlock

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

artf

正如你从示例中看到的 “''js 选择经理：{ 附录：'.styles-container' }, styleManager： { 附录：'.styles-container'， “''js 选择经理：{ 附录：'.styles-container-t' }, styleManager： { 附录：'.styles-container-b'， ```

GJSBlock

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

artf

十月CMS已有插件 https://octobercms.com/plugin/pkurg-pagebuilder

GJSBlock

谢谢你举报，@michaelVictoriaDev。 关于FEAT：有没有办法或教程能让我们在十月CMS中集成？！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则...

artf

我觉得你必须读读[这份指南]（https://grapesjs.com/docs/modules/Storage.html）

anuragk15

你找到解决办法了吗？ 我也有类似的问题。比如，当我写博客并存储在数据库中时，现在每当有人访问我的落地页（用Grapesjs制作），我希望他们能看到我最新的博客。另外，如果有终端用户访问网站，我只需要发送 Grapejs 的 html 和 css 对吧？没有组件？

GJSBlock

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

artf

你必须[扩展自定义组件的视图]（https://grapesjs.com/docs/modules/Components.html#view）

GJSBlock

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

longdoan7421

抱歉我误解了你的问题，所以我之前的评论不相关。 为了实现你的愿望，你需要创建自己的性状类型[（docs）]（https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type）和组件类型[（docs）]（https://grapesjs.com/docs/modules/Components.html#define-custom-component-type）。 有更简单的方法，但它不能把所有自定义数据保存...

longdoan7421

我不太明白你的问题。 但如果你为组件模型设置了任何自定义属性（除了一些保留键，比如“组件”、“样式”等）， 例如： 'component.set（'customTraits'， yourCustomTraits）;'。它会以JSON数据形式存在。

vijaycreatise

我试过这样做，但没用。 我想在 JSON 中添加 data 键和对象，用户选择表单时可以输入 API URL。你能帮我检查一下我做得对吗？

Joshmamroud

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js 你应该把功能绑定在“组件类型”本身，而不是试图找到该组件的所有实例并在某个更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。 这里有一些关于[如何扩展组件类型]（https://grapesjs.com/doc...

archerbj

@archerbj这里有你想要的演示：https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js你希望把功能绑定到“组件类型”本身，而不是试图找到该组件的所有实例并在更改时添加。为此，创建一个新的“组件类型”，扩展“视频”类型，然后在视图中添加“dblclick”事件处理程序。一旦有了这个，你就可以创建一个使用新组件类型的块。这里有一些关于[如何扩展组件类型]（https://grapesjs.com/docs/mo...

abulka

@Joshmamroud 谢谢你举这个例子。我能找到的唯一一个使用文档中提到的“扩展”功能的例子是你的。 你的例子非常简单且禅意——但它只是展示了给视频组件添加“dblclick”处理程序，并没有显示添加额外的组件属性或属性和特征。你能解释一下或者举个例子吗？因为我很难理解如何使用“extend”——正如我在#3060中提到的那样。

GJSBlock

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

johnkeel-thork

我正准备报告同样的问题。 新增背景图片： <img width=“847” alt=“截图 2021-12-23 12 06 51” src=“https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png”> 它正在转换为线条渐变，而不是网址： <img width=“621” alt=“截图 2021-12-23 12 07 36”...

artf

关闭 [jsfiddle]（https://jsfiddle.net/cqr7Luaj/），问题似乎解决了

GJSBlock

谢谢你举报，@fq-selbach。 *线性梯度CSS对背景图像产生奇怪影响的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：** 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更...