#31382020年11月13日作者 adamwpe2 个回答
大家好， 我遇到了一个问题，当保存自定义HTML组件（只是一个表格）时，Grapes JS会修改它。 保存之前 ![图片]（https://user-images.githubusercontent.com/49768920/99049128-62512180-258e-11eb-9213-10bc30c037b0.png） 存档之后。 ![图片]（https://user-images.githubusercontent.com/49768920/99049054-464d8000-258e-11eb-9545-726b0348fa4c.png） 有没有可能把什么东西包裹起来，避免被修改？问题的原因是我用 twig（一种模板语言...
ClaudeCode
谢谢你举报，@adamwpe。 关于保存<TABLE>时防止被修改的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件...
#31372020年11月12日作者 Asha15973 个回答
未获得所选元素的样式 这是我的代码， const model = 编辑器。StyleManager.getModelToStyle（component）; let styleObject = model.getStyle（）; console.log（“样式”，styleObject） 版本： 0.14.49 你能重现演示中的bug吗？ [X] 是的 [ ] 不 预期的行为是什么？ 当选中元素时，我应该会看到该元素的样式。 目前的行为是什么？ 当选中元素时，我没有得到任何样式，只有空的对象。 你能附上截图、截屏或实时演示吗？ [X] 是的（附上） [ ] 不 这是实际和预期结果的截图，真实 ![截图，2020-11-12 16-5...
artf
首先，你需要升级你的 Grapesjs 版本（你用的是两年前的版本），然后你还得提供一个问题的实时演示。
no-response[bot]
由于我们请求原作者提供更多信息未获回应，本期已自动关闭。仅凭当前期刊中的信息，我们没有足够的信息采取行动。如果您有答案或找到我们需要的答案，请随时联系我们，以便我们进一步调查。
ClaudeCode
谢谢你举报，@Asha1597。 当我选择某个特定元素时，我无法获得它的样式。这个问题只发生在某些元素上。 似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandb...
#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中提到的那样。
#31342020年11月11日作者 josfh20054 个回答
版本： 0.16.27 你能重现演示中的bug吗？ [X] 是的 [ ] 不 预期的行为是什么？ 当我尝试拖动组件时，画布不应该滚动到页面顶部。 详细描述那个漏洞** 每当我尝试拖动页面最后部分的组件时，画布就会滚动到顶部。有时候第一次就会出现，但有时候总是这样，可能和元件类型有关。
artf
你好，José，你能提供你问题的截屏吗？我试过拖动模板的最后一部分，但对我来说一切正常
josfh2005
你好@artf， 你可以在这里看看，https://recordit.co/vn1ZVN6J1N 不是在各个部分，任何元素都会这样，但只有第一次尝试拖动时才会。
#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'））...
#31312020年11月11日作者 Joshmamroud4 个回答
版本： 0.16.27 你能重现演示中的bug吗？ [] 是的 [X] 不 预期的行为是什么？ 将粘贴文本为纯文本（文本节点），不像Grapes JS在</>元素中进行打包。 目前的行为是什么？ 当我把纯文本粘贴到空文本元素时，编辑器会用<font />元素包裹它。 在粘贴文本之前 ![Screenshot1]（https://user-images.githubusercontent.com/5224187/98757808-4d606c80-239b-11eb-8194-3b854dd8ac97.png） 在文本粘贴（以纯文本形式）之后 ![Screenshot2]（https://user-images.githubuser...
Joshmamroud
@artf你知道这是在组件、RTE还是其他地方发生的吗？你能指点我正确的方向吗？如果有人能帮忙，我将非常感激。谢谢！
artf
我没法复现，但我看到你用的是自定义的“dm-text”组件，这可能是原因？！
Joshmamroud
@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展：“文本”， 型号：{ 默认值：{ 名称：“文本”， 特征：[]， 可编辑：正确， 可掉落：错误， textable：确实如此， 风格：{ 填充：“10像素”， 宽度：“100%”， 高度：“自动” }, 可造型：[ “背景色”， “页分内”， “颜色”， “文本对齐” “font-size”， “字体家族”， “字体粗细”， “线高”， “边框宽度”， “边框颜色”， “边...
#31302020年11月10日作者 jenter4 个回答
版本： '0.15.10' 这个问题旨在验证是否有合适的方法通过自定义插件扩展当前 https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js。我们特别回顾了该文件中的“render（）”方法，以稍微修改HTML以结合工具栏和徽章，实现该UI设计： ![图片]（https://user-images.githubusercontent.com/1368216/98736636-12e2d980-2373-11eb-8871-7ac45dcdae3e.png） 过去，我成功地用编辑器扩展了命令。Commands.extend（'select-c...
artf
你好@jenter，好问题。不幸的是，我从未真正关注过画布扩展或其界面元素的可能性，所以肯定没有绝对正确的做法。 如果有人愿意提出解决方案，我很乐意帮你评估。
jenter
@artf我会审阅一些提案/想法并加入这个帖子。
#31282020年11月10日作者 sprklinginfo2 个回答
你想给GrapesJS添加什么？ 当组件被丢弃时，保持鼠标点击的位置。 详细描述你的功能需求详细 我开始玩一些基础的积木/组件。如果我拖拽一个组件，比如简单的文本输入，看起来它们会通过一个隐形网格布局吸附到最后一个激活的组件上。有没有可能某个组件只是停留在鼠标点击的位置？即使我试图把组件拖到别处，它也不会移动到我想要的位置。
sprklinginfo
发现已经通过使用“dragMode： 'absolute'实现了。谢谢。
ClaudeCode
谢谢你举报，@sprklinginfo。 关于FEAT：在鼠标点击的位置放置一个组件，这是个很棒的建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“ch...
#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）——这有助于团队更...