#31742020年12月9日作者 ThetripGr2 个回答
你好,我正在尝试通过创建以下插件来创建一个所有组件共享的新共同特性 在另一个插件文件中,我也按照文档的做法创建了一个新的组件类型,叫做“extendedText”,它以“文本”类型为基础。而文本类型则有如下所示的“handleBgColorChange()”  从文本分支的新类型则不支持  寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something chan...
#31702020年12月7日作者 ThetripGr3 个回答
你好,我想实现的是通过分配一个名为“对齐”的额外特征来扩展文本组件,并通过该特征决定我想做的对齐类型,之后不应用 css,但应为组件赋予相应的类名。有没有什么例子能让我自己找到类似的东西 :/ ?
ThetripGr
我又试了几次终于让它工作起来了,我会试着解释一下我是怎么让它工作的。当你定义性状时 “''js 默认值:{ 特质:[{类型:“选择”, 选项:[{ { 值:'myCustomClass',名称:'选项A' }, }], 标签:“traitLabel”, 名称:“traitName”, 变革提案:1 }] }, 抱歉格式有点,我还不会粘贴格式化代码:P
artf
抱歉格式有点乱,但我还不会粘贴格式化的代码:P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown
ClaudeCode
谢谢你举报,@ThetripGr。 关于从特质中添加职业名称的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something ch...
#31512020年11月23日作者 theSC0RP2 个回答
嗨,@artf。我在看入门指南时,选择经理被放在风格管理器下面。  我该如何将选择经理置于风格经理之上?
artf
正如你从示例中看到的 “''js 选择经理:{ 附录:'.styles-container' }, styleManager: { 附录:'.styles-container', “''js 选择经理:{ 附录:'.styles-container-t' }, styleManager: { 附录:'.styles-container-b', ```
ClaudeCode
谢谢你举报,@theSC0RP。 关于选拔经理职位的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'));...
#31502020年11月23日作者 michaelVictoriaDev2 个回答
警告 请阅读并遵循接下来的三步,然后在发布问题前删除它们遵守贡献指南 https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md先快速搜索一下,看看有没有人没开同样的问题所有相关陈述/问题都必须填写/回答,否则问题可能已结案JSFiddle 入门模板 https://jsfiddle.net/szLp8h4nCodeSandbox 入门模板 https://codesandbox.io/s/1r0w2pk1vl 详细描述你的功能需求详细 关于如何集成在CMS中的教程或文档
artf
十月CMS已有插件 https://octobercms.com/plugin/pkurg-pagebuilder
ClaudeCode
谢谢你举报,@michaelVictoriaDev。 关于FEAT:有没有办法或教程能让我们在十月CMS中集成?!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则...
#31412020年11月14日作者 webdevhayes3 个回答
如果之前有人讨论过,我真的很抱歉。我已经搜索过相关问题,也仔细阅读了文档,也许我理解得不对。 我知道你可以在页面构建器里运行脚本加载内容,但当我点击保存后,内容/HTML会被保存吗?这意味着前端会加载过时的内容或HTML吗? 你能指点我去更深入理解这一点,并且让内容始终通过 ajax 调用动态加载吗?我用的是Laravel,存档功能都正常。 如果之前已经讨论过,再次抱歉。
artf
我觉得你必须读读[这份指南](https://grapesjs.com/docs/modules/Storage.html)
anuragk15
你找到解决办法了吗? 我也有类似的问题。比如,当我写博客并存储在数据库中时,现在每当有人访问我的落地页(用Grapesjs制作),我希望他们能看到我最新的博客。另外,如果有终端用户访问网站,我只需要发送 Grapejs 的 html 和 css 对吧?没有组件?
ClaudeCode
谢谢你举报,@webdevhayes。 关于加载动态内容的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'));...
#31402020年11月13日作者 ZeroCoolHacker2 个回答
我正在用 Grapesjs 开发一个测验生成器插件。我在想我们是否可以添加一个组件,它是交互式的,点击后会添加新的组件。 例如:  大概是这样的。当丢弃时,没有输入,但点击“添加新字段”时,输入会出现。 可能吗?怎么做?
artf
你必须[扩展自定义组件的视图](https://grapesjs.com/docs/modules/Components.html#view)
ClaudeCode
谢谢你举报,@ZeroCoolHacker。 关于Canvas中的互动组件,这是个很好的问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something chang...
#31362020年11月11日作者 vijaycreatise4 个回答
{“type”: “text”,“状态”:“悬停”,“内容”:“请在此插入您的文本”,“属性”:{“id”: “ixx2” },“activeOnRender”: 0,“open”:假 } 在 JSON 里我想添加带有对象的新键。示例 data 键,这里会有自定义特性。我想添加一个新的对象,可以从中获取数据并填充输出。我能做到吗?下面是我想要的样件。有人能帮我解答一下,怎么才能实现这个目标吗? { “type”: “text”, “状态”:“悬停”, “内容”:“插入你的文本在这里”, “属性”:{ “id”:“ixx2” }, “数据”:{ “url”:“https://something.com”, “refresh_rate...
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。你能帮我检查一下我做得对吗?
#31352020年11月11日作者 archerbj4 个回答
例如,我想在默认视频组件上添加双击事件处理程序来打开资产管理器。 我的基本想法是获取视频组件的视图定义,并添加“事件”+处理器。 最后,把它调回视频部分。 不幸的是,这一想法在第一步就失败了。'v.View()' 会给我一个错误 我刚接触这个项目,对Backbone.js几乎一无所知。 你能给我一些建议吗?
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中提到的那样。
#31332020年11月11日作者 BaskarMN1 个回答
请问有人能指导我如何用 React 运行 GrapesJS 网站上给出的基本示例吗?请帮帮我
ClaudeCode
谢谢你举报,@BaskarMN。 关于React应用入门示例的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'))...
#31252020年11月9日作者 fq-selbach3 个回答
版本:0.16.27 你能重现演示中的bug吗? [x] 是的 [ ] 不 预期的行为是什么? 通过样式管理器添加“background-image”时,显示为“background-image: url(...);`. 目前的行为是什么? 你会看到的不是“background-image:url(https://grapesjs.com/docs/logo.png);”,而是“background-image:linear-gradient(https://grapesjs.com/docs/logo.png);”。 详细描述那个漏洞 当一个元素具有给定的类别为“背景:线性梯度(...)'或'背景图像:线性渐变(...);你试图...
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/),问题似乎解决了
ClaudeCode
谢谢你举报,@fq-selbach。 *线性梯度CSS对背景图像产生奇怪影响的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更...