GrapesJS 问题

artf

你好@iabhiyaan，当“page：select”触发时，画布内的iframe还没有加载，所以你需要等它们加载完后才能访问它的DOM。 “''js editor.on（'page：select'， page => { const frame = page.getMainFrame（）; frame.once（'loaded'， （） => { const rootEl = frame.getComponent（）.getEl（）; console.log（rootEl....

iabhiyaan

谢谢你@artf。

GJSBlock

谢谢你举报，@iabhiyaan。 感谢你分享关于page.getMainComponent（）.view在选择页面时显示未定义的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了...

artf

它们有附加的职业，我看到最新版本不再向元素添加职业了。 我不太明白你说的是什么，职业应该像以前一样导入。背景：我们使用定制组件，且一些默认设置（例如可拖拽、可调整大小等、样式）已更改。 如果你的自定义组件依赖于之前的默认属性，你只需要更新组件，但说实话，我甚至不记得任何核心组件有这样的改动。 请让我看看一些模板代码加载不良。

acip

嘿，谢谢你的快速回复。这是v0.14.5生成的模板 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb 看起来就是这样 https://ibb.co/Zz8qg2J 我们更改了一些自定义组件的默认属性和样式，并更改了dragMode='absolute'。其中一个问题是旧部件无法移动。 如果需要，我可以提供代码示例。

acip

我已经为现有模板设置了旧版本和新版本： https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html ![旧vsnew]（https://user-images.githubusercontent.com/...

artf

只需在组件视图中移除该属性（例如在 onRender 方法中），这样你仍然能在最终 HTML 中获得该属性

GJSBlock

谢谢你举报，@tannguyen97。 感谢你分享关于当元素属性 tabindex = -1 时，无法用“control + C”复制的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么：** 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS...

artf

检查组件API参考中的“toolbar”属性，尝试在问题中搜索相关内容

GJSBlock

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

krishnaeverestengineering

@deiga我们正在做类似的事情。

artf

我会把特性附加到某个组件属性上，而不是类属性，根据值我会正确使用 [removeClass]（https://grapesjs.com/docs/api/component.html#removeclass）和[addClass]（https://grapesjs.com/docs/api/component.html#addclass）

GJSBlock

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

GJSBlock

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

artf

和这里一样 https://github.com/artf/grapesjs/issues/3476#issuecomment-848074298

GJSBlock

谢谢你举报，@krishnaeverestengineering。 感谢你分享关于我没能对Grapesjs组件进行单元测试的报告。为了帮助团队调查并优先排序： 请提供： 一个最小可复现的例子（CodeSandbox/JSFiddle） 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么： 简约代码示例（不是你整个项目） 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细...

artf

你可以这样做： “''js tagListElement.on（'select2：select'， e => this.onChange（e））;onChange 会正确触发 onEvent ```

iteniel

@artf谢谢 你能帮我回答问题的第一部分吗 我需要类似 onPostRender/afterRender 的工具，在 DOM 存在时初始化 select2 组件 createInput 方法之后的某个词

GJSBlock

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

artf

在你的模型组件定义中，你用的是“content： config.template”，但应该是“components： config.template”

Palash-Mandal

你好，@artf， 我已经解决了，但组件出了问题。子组件 H2、H3 和 Link 负责推送所有其他组件。如果我丢掉一个列组件，那个子元素也会被推入去。我该如何限制冲突。 下面是我做的Codepen示例。 https://codepen.io/coderdesigners/full/XWMoNbZ 如果我掉一栏，下面会上升。这并不常见。默认情况下应该会有。 ![图片]（https://user-images.githubusercontent.com/17553816/12...

GJSBlock

谢谢你举报，@Palash-曼达尔。 关于子元素不可拖拽、可丢弃可高亮的问题，非常好。还有所有未推送在样式部分的子元素的CSS，同时在插件中开发横幅组件。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'ch...

artf

感谢@moises-flowize，这个问题将在下一个版本中修复 https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613

GJSBlock

谢谢你报告，@moises-flowize。 Command core：component-enter 在所有情况下都无法正常工作的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重...